BigThink

Impostare l’anteprima quando condividiamo un post su Facebook

Condividi su FacebookQuello che voglio condividere con voi oggi è un trucchetto facile, ma molto utile, che sicuramente pochi di voi conoscono ed utilizzano.

Provate a condividere questo post su Facebook, pubblicandolo tramite la vostra bacheca oppure cliccando sull’icona di Facebook appena sotto l’articolo. Cosa notate? Vi si aprirà la finestra per condividerlo ma, a differenza di altri blog, non potrete scegliere l’immagine di anteprima per la pagina, perchè l’avrò scelta io per voi!

Sì, perchè solitamente potete cliccare sulle frecce e scorrere tutte le immagini presenti nella pagina, fino a scegliere quella più significativa. Nel mio caso, invece, vi si presenta una sola immagine.

Condividi su Facebook

Sicuramente così è molto meglio: già l’utente medio è pigro e sarà un grande sforzo per lui solamente decidere di pubblicare il vostro articolo sulla sua bacheca. Se poi deve anche mettersi a scegliere l’immagine migliore, siamo a posto…

Come ho fatto? Vediamolo insieme.

Dovete sapere che esiste un particolare tag HTML che permette di associare alla pagina un’immagine di anteprima. Si tratta del codice seguente che dovrete inserire all’interno dei tag <head></head> della vostra pagina:

<link rel="image_src" href="http://www.miosito.it/anteprima.jpg" />

Ovviamente va sostituito il percorso con quello dell’immagine rappresentativa dell’articolo.

Dato che non possiamo certo farlo a mano ogni volta, abbiamo bisogno di uno script che trovi automaticamente l’immagine più rappresentativa dell’articolo e la inserisca nel tag. Niente di più semplice: copiate e incollate questo codice nel file functions.php del vostro tema WordPress:

function set_default_image(){
    global $post;
    $image = str_img_src($post->post_content);
    if($image != ""){
        echo '<link rel="image_src" href="'. $image . '" />' . "\n";
    }
}
add_action('wp_head', 'set_default_image');

function str_img_src($html) {
    if (strpos($html, '<img') !== false) {
        $imgsrc_regex = '#<\s*img [^\>]*src\s*=\s*(["\'])(.*?)\1#im';
        preg_match($imgsrc_regex, $html, $matches);
        unset($imgsrc_regex);
        unset($html);
        if (is_array($matches) && !empty($matches)) {
            return $matches[2];
        } else {
            return false;
        }
    } else {
        return false;
    }
}

La prima funzione inserisce nell’head del post corrente il tag con l’immagine, mentre la seconda funzione è quella che si occupa di andare a cercare nel testo la prima immagine che trova.

In questo modo, quando condivideremo il post su Facebook, verrà impostata come anteprima la prima immagine presente nel nostro articolo. Tutto questo in automatico!

Da notare che, oltre a Facebook, questo tag funziona anche su Digg e su Yahoo!.
Tre ottimi motivi per implementarlo!

Articolo scritto da Ghido

Fondatore di BigThink.it, si occupa dello sviluppo e del coordinamento dei progetti tecnologici. Specializzato nel Marketing su Facebook e nello sviluppo di Applicazioni Social, fa consulenza e formazione ad aziende ed agenzie.

Leggi anche...

Dividere su due colonne le categorie di WordPress

Dividere su due colonne le categorie di WordPress

Con questo post inizia una nuova serie di guide per la creazione o personalizzazione dei template di WordPress, ambito in cui mi sono specializzato recentemente. Oggi vedremo come dividere l'elenco delle categorie del nostro blog, su due colonne di egual lunghezza. Può tornarci utile nel caso avessimo veramente tante categorie e, per una maggiore ...
WordPress: Inserire l'anteprima automatica dei video di YouTube

WordPress: Inserire l’anteprima automatica dei video di YouTube

Molti blog pubblicano contenuti provenienti da YouTube, tuttavia al momento dell’inserimento sulle Pagine Fan di Facebook non hanno a disposizione un’immagine di anteprima che attiri gli utenti a cliccare. Devono quindi usare sempre la stessa di Default. Quello che vi voglio proporre oggi è un sistema che in pochi e semplici step vi consentirà ...
Facebook trick: aggiungere una Pagina Fan ai bookmark in home

Facebook trick: aggiungere una Pagina Fan ai bookmark in home

Se amministri una o più Pagine Fan su Facebook, ti sarai certamente accorto di un difetto di usabilità: ogni volta che vuoi andare sulla tua Pagina, devi cercarla nel box di ricerca di Facebook! A meno che non la inserisci nei bookmark/preferiti del tuo browser, non c'è modo di inserire un link direttamente accessibile ...
Usare TinyMCE come editor dei nostri plugin WordPress

Usare TinyMCE come editor dei nostri plugin WordPress

Settimana scorsa vi ho spiegato come inserire l'editor di WordPress nei vostri plugin, tuttavia dopo svariati test, ho trovato alcuni limiti nello script che vi ho proposto: la parte di HTML non funziona; è compatibile solo con le ultime versioni di WordPress; non è possibile inserire più di un editor nella stessa pagina. Alla luce di questi ...
Scarica Facebook Business, l'ebook gratuito di BigThink!

Scarica Facebook Business, l’ebook gratuito di BigThink!

Finalmente, dopo una lunga attesa, ho deciso di rendere disponibile Facebook Business, il mio primo ebook gratuito! Si tratta di ben 80 pagine dove troverai le migliori strategie per promuovere il tuo Brand su Facebook: dall'ottimizzazione del Profilo Privato alla personalizzazione del tuo Profilo Pubblico, dalle tecniche di diffusione della tua Pagina Fan ai ...

136 Commenti

  1. Ciao a tutti… ho una piccola domanda, ma se io inserisco questo codice:

    invece che dentro … lo inserisco dentro il single.php?
    posso diversificare le immagini da pubblicare?

    24 novembre 2011, 12:11
    • Scusate non mi ha preso il codice, mi riferivo a primo che hai detto da inserire nella header.php “”

      24 novembre 2011, 12:13
  2. r0by

    Ciao a tutti. Io ho seguito tutti i passaggi indicati ed effettivamente all’interno dell’html del post compare la stringa

    il problema è che ciò nonostante quando clicco “like” sul post del blog su facebook ottengo una preview diversa da quella inserita in

    tra l’altro è una preview che non ha niente a che vedere con quello che è postato dentro all’articolo…

    Altra cosa che mi sembra strana è che se condivido manualmente il post, invece di fare like, ottengo la preview corretta. Mistero?

    22 novembre 2011, 15:04
  3. marco

    Ciao a tutti, il mio problema è, sia quando clicco su mi piace che su condividi, nella descrizione dell’anteprima vengono mostrate le news correlate dell’articolo. Come è possibile?

    12 novembre 2011, 16:26
  4. Ciao a tutti, premetto io uso Joomla io ho ricontrato questo problema spesso e volentieri e ho cercato su tutti i forum possibili ed immaginabili, senza riuscire a trovare soluzione alcuna.
    Chi diceva che era colpa di un java, chi di un plugin, chi di vattela a pesca, finchè ho chiamato il mio ISP esponendogli la cosa…
    bhe hanno risolto la cosa effettuando la ripropagazione dei DNS relativi al mio dominio…è necessario attendere 24/48 ore affinchè tale informazione si propaghi alla rete globale, ma vi assicuro FUNZIONA ALLA GRANDE!!!!

    7 novembre 2011, 18:02
  5. Shades

    Ciao Ghido, ho provato la guida e col mio sito non funziona.
    Mi fa sempre vedere le prime 5 immagini che ho pubblicato negli articoli iniziali e come se non bastasse vedo il titolo vecchio senza descrizione che ho aggiunto in secondo momento. Sapresti aiutarmi? 🙁

    7 ottobre 2011, 02:47
  6. ciao, scusami , so che non è la stessa cosa, ma puoi aiutarmi con lo stesso argomento ma per joomla?
    devo trovare il modo di far comparire le foto nelle condivisioni su FB.

    ti ringrazio

    17 settembre 2011, 12:47
  7. Ciao, sto utilizzando il codice che hai suggerito ma ho notato che funziona per quanto riguarda i post, mentre non funziona per le pagine! Come devo modificarlo perchè funzioni anche per le pagine? Grazie 🙂

    10 settembre 2011, 11:55
  8. mettobecco

    Purtroppo non funziona, la cosa si verifica da due-tre mesi, ogni volta che inserisco un link in facebook non mi visualizza l’immagine di antemprima, per gli articoli del mio blog visualizza soltanto l’immagine di un avatar (quello di default per i commenti), avevo pensato che la colpa poteva essere un plugin istallato su wordpress, ma oggi ho letto questo articolo ho provato ad inserirlo come link su facebook e non si visualizza nessuna immagine in anteprima… ??? Non so dove mettere le mani…, fino a tre mesi fa tutto funzionava bene… e oggi facendo la stessa funzione ma su google-plus la cosa funziona… ??? Hai (avete) qualche suggerimento?

    8 settembre 2011, 08:56
  9. Credo (e sottolineo “credo”) che il problema attualmente risieda nella prima delle due funzioni. Occorrerebbe modificarla in modo che il percorso dell’immagine sia assoluto e non relativo. Questo perché FB non tiene più in considerazione il taglink rel=”image_src” se il percorso dell’immagine non è assoluto. La modifica dovrebbe essere abbastanza semplice, ma non essendo io un programmatore, preferisco lasciar fare a chi è più pratico.

    8 luglio 2011, 14:16
  10. lele

    Ma funziona anche su joomla lo script?

    7 luglio 2011, 23:30
  11. Ciao. Rispondo al post di Simone del 27 febbraio: questo che hai detto mi pare a volte vero…. ma a volte no, come in questo caso:

    http://marcomalatesta.blogspot.com/2011/06/spesso-le-petizioni-funzionano.html

    prova a condividere su FB questo articolo, cosa che ho già fatto io. Ti accorgerai che hai ancora la possibilità di scegliere un’anteprima!
    E’ questo è bene. E’ male invece il fatto che non compare NESSUNA anteprima di testo!
    Qualcuno sa darmi un consiglio per risolvere questo problema?

    24 giugno 2011, 07:50
  12. @druida: prova a lasciare il link non attivo (senza www) del tuo blog, magari qualche buon anima (ghido) ti potrà aiutare

    13 giugno 2011, 20:03
  13. druida

    e immagino che nessuno mi risponderà…

    12 giugno 2011, 20:29
  14. druida

    ho usato il codice. Ma ha funzionato solo per un articolo. Per tutti gli altri non lavora.

    12 giugno 2011, 19:10
  15. usa il primo codice che trovi, e al posto di href=”http://www.miosito.it/anteprima.jpg” metti l’url della tua immagine, ad esempio:

    href=”http://www.miosito.it/image/mia-immagine.jpg”

    30 maggio 2011, 19:36
    • per mettere sempr eun immagine fissa con questo TAG , in joomla come devo fare?

      grazie

      17 settembre 2011, 15:21
  16. ciao, ho letto il post, ma , ad essere sincero non ci ho capito molto. per la versione wodpress.com, come posso ottenere un’immagine fissa(quella del mio blog!) pubblicando un post su fb? per ora mette come anteprima delle immagini di alcuni link amici. Spero tu possa aiutarmi!!!!Grazie mille

    30 maggio 2011, 18:01
  17. Non ho ancora provato ad aggiungere la funzione nel functions.php, ma ho provato a condividere il tuo articolo come da te suggerito, e non propone nessuna anteprima, e neanche la mette confermando la condivisione su FB. Eventualmente il tutto sarebbe valido anche per la condivisione che fa il plugin SexyBookmarks e con quella funzione lui sceglie l’immagine solo per la condivisione su FB o potrebbe andare in conflitto con qualche altra scelta di preview? Grazie, sei la nostra bibbia… 😉

    24 maggio 2011, 18:54
  18. Grandioso!!! Hai splendidamente risolto il mio problema…..
    Quando premevano like sul mio sito mi entrava un’immagine che non c’entrava niente…
    GRAZIE!!!!

    15 maggio 2011, 22:55
  19. Rob

    A me purtroppo non funziona!
    Ho copiato il codice sia nel functions.php del tema sia nel functions.php di default di wodrpress, ma quando qualcuno clicca sul tasto “MI PIACE” Facebook sceglie un’immagine A CASO per ogni post, solitamente una della sidebar e quindi anche bottoni o banner che riguardano tutt’altro! Come posso risolvere? Grazie!

    2 maggio 2011, 00:20
  20. Ciao Ghido,
    Non riesco a far funzionare questo script sul mio sito.. Potresti aiutarmi per favore?

    1 maggio 2011, 12:07
  21. Emiliano

    Ciao Ghido,
    esiste una funzione come questa utilizzabile su blogspot?
    Vorrei che su tutti i post ci sia solo l’header del mio blog.
    Sto sbattendoci da giorni…potresti aiutarmi? Ti ringrazio

    20 aprile 2011, 00:09
    • Ciao Emiliano,
      se vuoi impostare la stessa immagine per tutti i post, inserisci la prima funzione prima della chiusura dell’ nel tuo codice:

      e al posto di http://www.miosito.it/anteprima.jpg metti l’url dell’immagine del tuo header

      20 aprile 2011, 17:25
      • Emiliano

        Grazie Roberto,
        però purtroppo quando incollo il link dell’immagine mi trasforma il codice così:

        e non va bene…

        20 aprile 2011, 20:48
        • purtroppo si è mangiato il codice, se vuoi, contattami sul mio blog (clicca sul mio nome) che così vedo se riesco ad aiutarti

          21 aprile 2011, 02:15
  22. Ciao, grazie mille per la preziosissima guida che ora seguirò nel dettaglio per il mio sito WordPress. Mi servirebbe aiuto però anche per un sito Joomla. Come si fa ad impostare la stessa identica funzione, inserendo lo stesso identico script, anche in un sito Joomla? Grazie in anticipo e complimenti per l’ottimo sito! 😉

    7 aprile 2011, 22:40
  23. Ciao!! Io ho provato a fare come hai detto e con la versione 3.1 di wp non mi funziona, mi crea proprio dei problemi al sito dandomi messaggio di errore e rendendolo non visibile in rete, ora ho tolto la funzione. Ma il mio problema è che quando faccio la condivisione su fb a volte non mi include l’immagine dell’articolo neanche nella scelta dell’anteprima, mi propone solo le icone che ho nella barra di destra!

    1 aprile 2011, 10:38
  24. Shade

    Ciao,
    e se il mio sito è in flash e non ho immagini nel testo?
    Ho provato ad inserire nell’html un immagine nascosta così:
    <!– –>

    Ma nulla, nessuna anteprima !

    10 marzo 2011, 18:09
    • Ciao a tutti,

      @shade: per commentare usa , con due trattini …

      @iettafune: ho riscontrato un problema e spero non sia la nuova versione di wp 3.1 .. in pratica nella versione 3.1 l’anteprima è un’immagine standard di fb se l’immagine non è presente sul mio spazio web… altrimenti si vede bene.. ad esempio se l’immagine che ho inserito è su flickr, esce l’immagine standard…
      Mentre nelle vecchie versioni tutto funzionava bene…

      Chi di voi ha questo problema e che versioni avete?

      15 marzo 2011, 19:35
  25. iettafune

    Ho provato questo script.
    L’ho aggiunto a fine file, ovviamente prima di ?> ma non funziona più. Siccome l’articolo è abbastanza vecchio, o hanno modificato qualcosa in FB, oppure ho sbagliato io qualcosa.

    Attendo vostre notizie.
    Grazie

    3 marzo 2011, 15:28
  26. Ciao a tutti, io ho un problema, lo script non visualizza le immagini inserite con campo personalizzato e quindi non direttamente all’interno dell’articolo. C’è qualche modifica che io possa fare per farlo funzionare? Grazie Marco

    2 marzo 2011, 12:32
  27. Ciao Ghido,

    intanto complimenti per il blog, da quando ti seguo sto imparando molte cose su Facebook! 🙂

    Volevo parlarti di un problema che con il tasto Mi Piace sul mio sito web.

    Ho inserito il tasto Mi Piace in una pagina del mio sito; inizialmente, la pagina aveva un titolo e una descrizione che, poi ho modificato secondo le mie esigenze. Ho inserito un titolo e una descrizione che attirano maggiormente l’attenzione degli utenti.

    Il problema è che cliccando ora su Mi Piace, Facebook continua a pubblicare il vecchio titolo e la vecchia descrizione. Come posso fare?

    Scusami e grazie in anticipo per la risposta.

    Gabriele

    2 marzo 2011, 11:37
    • ho anche io questo problema, ma solo su facebook.., ad esempio su google plus non ce l’ho..
      Ho fatto una simulazione di spyder sul sito ed il testo che mi visualizza è quello corretto.
      Non capisco a questo punto se facebook pesca il codice da google o da qualche altro motore di ricerca invece che direttamente dall’url. Se fosse così e quindi devi aspettare che ripassi lo spyder, oppure non so…

      3 dicembre 2011, 19:18
  28. Grazie Ghido, ho seguito le indicazioni del tuo articolo e l’ho appena settata sul mio sito! 🙂

    28 febbraio 2011, 15:31
  29. Simone

    Ciao, ti faccio i complimenti, fai sempre un buon lavoro.
    per quanto riguarda questa famosa anteprima io ho un problema strano…ho cercato un po’ anche da altre parti e ho trovato questo:

    vorrei leggessi qui, attualmente ho lo stesso problema…è giusto quello che c’è scritto o ci sono soluzioni? Grazie, Simone

    “Se facebook non crea un’anteprima delle immagini del sito che vogliamo condividere, oppure ne crea alcune e fra queste nessuna ci soddisfa, oppure vogliamo che venga visualizzata un’immagine che non è presente nella pagina web, dobbiamo “forzare” facebook dandogli un’immagine che userà di default per la condivisione, aggiungendo nell’ della nostra pagina web queste stringhe:

    codice:

    IMPORTANTE:
    A quanto pare, quando viene condiviso un link su facebook, quest’ultimo salva in memoria le informazioni relative al link, quindi anche le immagini che sono presenti al momento della condivisione.
    Se in seguito queste informazioni vengono modificate, facebook non se ne accorge e continua a riportarte le informazioni che ha in memoria. E’ per questo che non trovavo riscontri nelle prove che facevo aggiungendo o levando immagini.. riprovavo a condividere la stessa pagina web senza che cambiasse niente.

    Se volete condividere una pagina su facebook con un’immagine specifica, il consiglio che vi do quindi è questo:
    1) copiate nella sezione le righe di codice che ho incollato sopra
    2) fate dei test su pagine di prova (ex. test.html, test2.php…) ricordando che avete un tentativo di condivisione per ogni pagina web con lo stesso nome (se non va bene dovrete cambiare nome alla pagina e riprovare a condividere)
    3) solo quando il risultato vi convince allora riportate il tutto sulla vostra pagina web originaria e condividerla.”

    27 febbraio 2011, 17:57
  30. Gennaro

    Ciao Ghido, volevo chiederti come può implementare questo codice chi come me gestisce un sito con Joomla.

    22 febbraio 2011, 17:54
  31. Grazie, mi hai salvata!!!

    10 febbraio 2011, 20:54
  32. Marco

    Salve Ghido.
    Il mio problema è il testo di anteprima su facebook, invece di uscirmi le prime righe dell’articolo mi esce questo “#navbar-iframe { display:block } if (window.jstiming) window.jstiming.load.tick(‘headEnd’);”
    cosa posso fare?

    29 gennaio 2011, 12:43
    • Ciao!!

      Stesso tuo problema (credo)…hai risolto???

      5 ottobre 2011, 16:47
  33. Ciao Ghido .. meno male che ho trovato questo post .. ti prego aiutami .. da poco è uscito il mio libro comico e il blog che ho fatto su wordpress mi serve per aumentare la visibilità e le vendite ovviamente e soprattutto sponsorizzare che ho passato il provino per zelig off quindi ti prego aiutami tuuuuu !!!. Fino a ieri tutto ok . Da oggi quando provo a condividere un mio link sul profilo della mia bacheca face oppure sulla mia pagina .. non esce piu l’immagine .. solo il titolo e il testo . io l’immagine l’ho messa ti assicuro ma non appare .. Premesso che sono un ignorantone su tutto .. aiutami tu ti prego.
    Grazie Nunzio
    Ps : ti mando un mio libro se mi aiuti hahaha :p

    28 gennaio 2011, 11:57
    • a cacchio .. il sito è http://www.nunziopaololocantore.com ..grazie!!!!

      28 gennaio 2011, 11:59
      • Ciao Nunzio, ho visto il codice HTML del tuo sito e ho notato che hai incollato il codice del mio post, ma nel modo sbagliato! Va inserito nel file functions.php, all’interno dei tag <?php e ?>
        Ciao!

        28 gennaio 2011, 12:14
        • Ue Ghido grazie per la repentina risposta!! he he effettivamente hai ragione .. mi sono scordato i tag .. cmq a me questo problema della mancata pubblicazione dell’anteprima dell’immagine dell’articolo di wordpress su facebook è sorta prima che inserissi il nuovo codice. Così dal nulla. Ho provato a disinstallare i plugin uno a uno credendo magari fosse quello. Ho provato poi con i widget ma nemmeno quello mi ha dato esiti positivi. Alla fine ho tolto pure google adsence ma nulla. Essi che due giorni prima era tutto ok. Credevo che avrebbe risolto il mio problema il tuo codice ma non è cosi. Senti ti scoccerebbe se ti aggiungo fra gli amici di face e ti do la pass del mio sito e l’user id affinchè tu possa dargli un occhiata? .. guarda sono seriamente disperato, la settimana prossima mi partono le presentazioni del libro e ho un urgente bisogno di sistemare questa cosa . Ti posso pure pagare, mettermi in ginocchio sui ceci a cantare o sole mio XD .. ma dammi una mano please. Attendo tue notizie !!.. e grazie ancora per la disponibilità

          29 gennaio 2011, 07:04
          • Warning: Cannot modify header information – headers already sent by (output started at /home/mhd-01/www.nunziopaololocantore.com/htdocs/wp-content/themes/arclite/functions.php:712) in /home/mhd-01/www.nunziopaololocantore.com/htdocs/wp-admin/async-upload.php on line 26
            686

            IN PIU ADESSO QUANDO PROVO AD INSERIRE FOTO NEGLI ARTICOLI MI DICE QUESTO .. GHIDO ..SALVAMI TU

            29 gennaio 2011, 10:04
          • ADESSO QUANDO INSERISCO UNA FOTO NELL’ARTICOLO ESCE CODESTO MESSAGGIO .. GHIDO ..SALVAMI TU
            Warning: Cannot modify header information – headers already sent by (output started at /home/mhd-01/www.nunziopaololocantore.com/htdocs/wp-content/themes/arclite/functions.php:712) in /home/mhd-01/www.nunziopaololocantore.com/htdocs/wp-admin/async-upload.php on line 26
            686

            29 gennaio 2011, 10:05
  34. trovato ! se può servire lascio qui il codice ..da mettere in e cambiare ‘custom_field’ con il proprio campo personalizzato

    ID, ‘custom_field’, true);
    if ($image) {
    echo “”;
    } ?>

    26 gennaio 2011, 16:48
  35. ciao Ghido, sai come posso scegliere l’immagine di anteprima da un campo personalizzato ?

    26 gennaio 2011, 14:21
    • parlo di WordPress 😉

      26 gennaio 2011, 14:23
  36. Ciao Ghido,
    ho provato a condividere il tuo l’articolo e sinceramente non esce nessuna immagine.
    Come mai??? sono io il problema o non funziona più questo metodo??
    Cmq. grazie per i tuoi utili consigli 😉

    Ciao

    Dave

    19 gennaio 2011, 00:14
  37. Ghido se non sbaglio ci siamo incontrati su qualche forum di domainers o su GT, seguo i tuoi articoli da tempo, che dire…. fenomenali!
    Ti scrivo per dirti che presto, appena avrò tempo, pubblicherò un articolo sul mio sito per “pubblicizzarti”! Di sicuro non hai bisogno di pubblicità su un sitarello come il mio, ma ti meriti un ringraziamento per tutti i consigli che ci dai! 😀

    5 gennaio 2011, 12:26
    • Bè, che dire…. ti ringrazio! 😉

      P.S.
      sì, probabilmente ci siamo beccati su Domainers

      5 gennaio 2011, 12:41
  38. Ciao, volevo esporti il mio problema. Quando inserisco alcuni link del mio sito su facebook molte volte non carica nulla e lascia il link e basta. Altre volte carica tutto. Da cosa potrebbe dipendere?
    I feed sono tutti ok.
    Spero di trovare un aiuto, nel frattempo ti ringrazio cmq!
    Andrea

    15 novembre 2010, 12:00

12 Citazioni