2 marzo 2013

Come condividere correttamente link, immagini e descrizione su Facebook da un blog di Blogger.

La corretta condivisione di URL, immagini e contenuti su Facebook è un tema molte sentito da chi ha un blog su Blogger e non riesce a far acquisire perfettamente la descrizione o la giusta immagine nella finestra popup che si apre quando si clicca su un bottone Facebook prima di postare nel nostro stream. A seguito di un commento su un post relativo a una barra per bottoni sociali e alla discussione che ne è derivata mi sono riproposto di fare un po' di chiarezza su questo argomento.

Facebook ha introdotto Open Graph Protocol per permettere agli webmaster di integrare nelle proprie pagine dei particolari tag per facilitarne la condivisione. Mi sono già occupato di come inserire i tag Open Graph su Blogger. Oltre a questi è anche possibile incollare una volta per tutte il file javascript per non doverlo fare tutte le volte che si installa il bottone del Mi Piace, il Like Box o qualche altro gadget collegato a Facebook. Ricordo che è anche opportuno creare una applicazione per poi poterne inserire l'ID nel modello. All'atto pratico occorre andare su Modello > Modifica HTML > Procedi e cercare la riga </head> quindi, subito sopra, incollare questo codice 

<!-- Facebook Open Graph Start -->
<meta content='parsifal32' property='fb:admins'/>
<meta content='362600930477422' property='fb:app_id'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
        <b:else/>
        <meta content='https://lh4.googleusercontent.com/-0L2P_yUFj3Q/T-lsE2iPfYI/AAAAAAAAY0I/RanQBNOCSig/s160/logo-ipcei.jpg' property='og:image'/>
        </b:if>
<b:else/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
</b:if>
<meta expr:content='&quot;it_IT&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Facebook Open Graph End -->

Ho lasciato i dati del mio modello proprio per rendere più semplice la loro personalizzazione. In sostanza basta sostituire i dati in rosso con il nostro nome utente su Facebook, che si può desumere dall'URL del nostro Profilo, con l'ID della applicazione che deve essere diversa per ciascun sito che amministriamo e con il logo del nostro blog che sarà l'immagine che compare di default quando non ce ne sono altre. Se vogliamo inserire una volta per tutte anche lo script va incollato subito sotto la riga

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

anche quest'altro codice con le stesse avvertenze di prima (nuovi modelli nei vecchi la riga è <body>). Ricordo però che questa seconda operazione è opzionale al fine della corretta acquisizione dell'anteprima

<!-- Facebook Open Graph Start -->
<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1&appId=362600930477422";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook Open Graph End -->

Chi usa la lingua inglese per il suo blog può sostituire it_IT con en_US. Nonostante questa modifica può capitare che Facebook non acquisisca correttamente contenuti e immagini del nostro sito. Ecco che allora proprio Facebook ci offre uno strumento che è molto simile a quello di Google denominato Strumento di test per i dati strutturati. Si tratta del Facebook Debugger che fino a poco fa veniva chiamato Facebook URL Linter e di cui avevo già parlato nel post appena linkato.

COME FUNZIONA FACEBOOK DEBUGGER

E' lo stesso Facebook che ci dà le informazioni su come utilizzare Facebook Debugger e che si possono esemplificare nel modo seguente. Quando si fa click su un pulsante per condividere una pagina, i server di Facebook cercano di recuperare i meta tag Open Graph che vi sono stati inseriti. Si tratta del titolo del post, della immagine o di un video che poi vengono presentati nell'anteprima per la conferma della condivisione. Se si sono inseriti questi tag Open Graph per la prima volta, Facebook può darsi che non li rilevi perché memorizza nella cache del browser i risultati di questa scansione per un lungo periodo di tempo. Accedendo a Facebook Debugger, incollando l'URL di una nostra pagina e cliccando su Debug otteniamo due risultati. Il primo sarà quello di andare a recuperare i tag Open Graph di questa pagina sostituendo quello che era presente nella cache mentre il secondo sarà costituito da delle avvertenze per gli webmaster sulla correttezza sintattica dei tag ivi inseriti

facebook-url-debugger

Ci possono essere anche delle avvertenze per ottimizzare la condivisione della pagina di cui è stato fatto il debug. Nella pagina il cui URL ho inserito come test mi è stato detto che le immagini sono troppo piccole e non debbono mai essere inferiori a 200 pixel in entrambe le dimensioni e preferibilmente debbano essere di 1500 pixel ma non superiori ai 5MB. Francamente non mi pare possibile ottemperare a questo consiglio. Non è che adesso dobbiate inserire i meta tag Open Graph e fare il debug di tutti i post del vostro sito. Basterà eliminare la cache del vostro browser per avere un miglioramento della condivisione. Concludo ricordando che Facebook qualche volta non riconosce l'ID utente se inserito come numero. E' quindi sempre meglio usare il VanityURL o impostarlo se non lo abbiamo ancora fatto. I meta tag Open Graph di Facebook vengono rilevati anche da Google e quindi possono aiutare il motore di ricerca a migliorare gli snippet dei nostri post.


Quando si condividerà un post di Blogger dopo aver inserito questi meta tag, si aprirà una finestra popup di anteprima con la miniatura della prima immagine presente e avente come descrizione quella inserita nella colonna di destra dell'Editor di Blogger quando si siano attivate le Preferenze di Ricerca.


43 commenti:

  1. Ciao, grazie agli articoli di questo sito, sto costruendo, la grafica su blogger, proprio come la desidero io, senza dover ricorrere a pagare un grafico. Vorrei chiederti solo una cosa, e scusami se non è pertinente all'articolo. Vorrei uno sfondo completamente bianco, ma essendo partita da un template preimpostato, mi trovo a non riuscire a togliere la linea/ombreggiatura che racchiude post e widget. Come posso fare? Ti ringrazio in anticipo.

    RispondiElimina
    Risposte
    1. @# Non hai inserito l'URL del tuo sito ma dal tipo di problematica che poni ritengo che ci siano delle immagini di sfondo nel template che sia difficile eliminare. Forse ti conveniva partire da un modello ufficiale di Blogger

      Elimina
    2. Si, sono partita proprio da un modello ufficiale, e sto via via cambiando le cose che mi interessano con l'aiuto dei tuoi articoli. Nonostante modifichi i colori in "personalizza", resta l'ombreggiatura http://postitletterario.blogspot.it/ Ti lascio il link. Ho provato a sostituire il codice #eeeeee con quello bianca, ma il problema persiste. Grazie della risposta e buona domenica :)

      Elimina
    3. @# Prova con questo ma serve solo per le immagini dei post ma ti può essere utilie per operare nel codice
      http://www.ideepercomputeredinternet.com/2012/07/eliminare-bordi-immagini-blogger.html
      ma nel tuo caso dovevi partire da un modello senza ombreggiature. Puoi scegliere bordi e immagini trasparenti da Modello > Personalizza però prima salva il template perché andandoo lì si possono perdere tutte le personalizzazioni

      Elimina
    4. 'https://lh4.googleusercontent.com/-0L2P_yUFj3Q/T-lsE2iPfYI/AAAAAAAAY0I/RanQBNOCSig/s160/logo-ipcei.jpg. Non capisco cosa mettere al posto di questo meta. Grazie.

      Elimina
    5. C'è una virgoletta di troppo. Se incolli questo URL nel browser
      https://lh4.googleusercontent.com/-0L2P_yUFj3Q/T-lsE2iPfYI/AAAAAAAAY0I/RanQBNOCSig/s160/logo-ipcei.jpg
      vedrai l'immagine del logo di questo blog. Quello che devi fare è creare un marchio per il tuo sito di almeno 200x200 pixel, caricarlo su Picasa e ottenerne il link diretto che poi inserirai al posto del logo di questo blog che ho incollato come esempio
      @#

      Elimina
  2. Ciao Ernesto, mi sta succedendo una cosa molto strana.
    Ho fatto una modifica al css giustificando il titolo del post (andata a buon fine).

    Ora sto cercando di modificare altre cose ma dal design di blogger non mi fa modificare nulla: ne caratteri, ne altro, nulla di nulla...applico modifica ma non me la fa vedere in anteprima e nè me la fa veramente.

    Mi domando se possa aver influito la modifica che ho fatto su css o cosa stia succedendo....

    Ti ringrazio anticipatamente della risposta, mio blog http://dino-freezone.blogspot.it/

    RispondiElimina
    Risposte
    1. @# Non c'entra nulla comunque puoi sempre togliere quella riga se hai dei dubbi

      Elimina
  3. Ho provato a togliere...il titolo post mi rimane giustificato e mi sta bene...ma il blog continua a non voler apportare altre modifiche da designer....cosa puo essere?

    Grazie

    RispondiElimina
    Risposte
    1. @# Non ho doti divinatorie ahimè! Prova a cambiare browser. Se non va elimina la cache e eventualmente anche i cookie

      Elimina
  4. Eh lo so...ma grazie lo stesso. Ho provato gia a cambiare browser...sto leggendo in vari forum e più di una persona ha trovato questo blocco....

    Provo a eliminare cache e cookie e speriamo che vada...

    C'è chi ha risolto cambiando modello e iniziando daccapo ma spero di non doverlo fare.

    RispondiElimina
  5. ciao Ernesto! innanzitutto grazie per il lavoro che fai, complimenti per le spiegazioni chiarissime, ho già usato un paio di tuoi tutorial per il blog che sto allestendo, http://progressismosintetico.blogspot.it.
    vengo alla domanda.. quando premo "condividi su facebook" per un post, il layout dell'elemento da condividere è un casino, non esce il titolo del post, non esce la favicon (che pensavo andasse a sostituire l'imm di anteprima qualora il post non avesse immagini) etc.
    allora ho provato a ricorrere a questo tutorial, ma andando a ritroso e provando a creare l'applicazione, non trovo le stesse schermate indicate da te su facebook, evidentemente devono aver modificato tutto di recente. sapresti spiegarmi come devo fare?
    ho anche un altro problema: avrei voluto inserire alla fine di ogni articolo una bio dell'autore (blog multiautore), ma quando vado a cercare nel codice il tag di chiusura del footer post, non lo trovo! sto usando un modello predefinito di blogger (modello simple) modificato da me aggiungendo qualche gadget. grazie mille in anticipo!!

    RispondiElimina
  6. @# Se non riesci a creare una applicazione Facebook è forse perché non hai verificato il tuo account con il numero telefonico. Invece non riesci a trovare il codice perché probabilmente non hai messo la spunta a Espandi i modelli widget

    RispondiElimina
    Risposte
    1. @# Puoi comunque provare a usare l'ID della applicazione che ho creato io e che è nel codice di questo post.

      Elimina
    2. Ha funzionato parzialmente lasciando l'ID della tua applicazione, adesso legge il titolo del post e le immagini, ma la descrizione no. beh, è decisamente già qualcosa! è vero comunque, non ho verificato l'account con il numero di telefono, sarà per quello.
      adesso riprovo anche ad espandere i modelli widget, in effetti può darsi che ieri abbia dimenticato di mettere la spunta.
      grazie mille davvero! :)

      Elimina
    3. @# Mia,
      Per la descrizione leggi le ultime righe del post e l'articolo che vi è linkato

      Elimina
  7. Incollando il primo [ uscito questo errore>

    Errore di analisi XML, riga 718, colonna 118: Element type "meta" must be followed by either attribute specifications, ">" or "/>".

    RispondiElimina
    Risposte
    1. @# Dal tipo di messaggio sembra che in qualche riga con < meta non ci sia il tag > alla fine. Nel codice del post mi sembra ci siano tutti

      Elimina
  8. Io ho inserito i tag Open Graph, ma quando pubblico un nuovo post devo ricorrere sempre a Debugger di Facebook per generare l'anteprima.
    Inoltre su Google Plus la prima immagine non è mai quella del post, ma quella dei social della sidebar...mi sapresti aiutare?

    RispondiElimina
    Risposte
    1. @# Forse dovresti usare le Preferenze di ricerca per migliorare la situazione
      http://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html
      http://www.ideepercomputeredinternet.com/2012/03/la-descrizione-nelle-preferenze-di.html
      che servono anche per Facebook dopo aver eliminato la cache

      Elimina
  9. caro ernesto, io mi sto ancora dibattendo con il solito problema, cioè: una miniatura adatta quando la gente condivide i miei post su facebook. su molti siti non si parla di open graph, ma soltanto di inserire questo codice:
    link rel=”image_src” href=url_completo_immagine” (qualcosa del genere)
    nel tag "head".
    infatti io vorrei che ogni post avesse sempre la stessa immagine (il logo del blog).
    quindi come si fa? modello=>modifica html e poi? sopra o sotto "head"? e poi di "head" ce ne sono due!
    grazie e scusa sono abbastanza impedito...

    RispondiElimina
    Risposte
    1. @# Li ho letti anche io quei codici ma si riferiscono a mesi fa se non anno fa. Ora per la condivisione delle immagini si usa Open Graph. Se vuoi mostrare sempre la stessa immagine, la devi caricare sul web e deve avere una dimensione superiore ai 1500 pixel come scritto anche nel post. Puoi provare a inserire oltre alle prime tre righe del codice solo quest'altra
      < meta content='URL della immagine' property='og:image'/ >
      dove ho aggiunto gli spazi per farmi accettare il codice dal commento

      Elimina
  10. Ciao Ernesto, il mio ID lo posso prendere anche da http://graph.facebook.com/username? Perchè dalle foto risulta sempre diverso

    RispondiElimina
    Risposte
    1. @# Sì è corretto prenderlo dall'URL del nostro profilo se abbiamo optato per quello che si chiama VanityURL come è nel tuo caso

      Elimina
  11. Ciao Ernesto. Da quando ho eliminato il top slide menu che avevo installato qualche tempo fa ho un problema per quanto riguarda la descrizione dei post che condivido su facebook: la descrizione non compare più. Ho provato ad usare facebook debugger e, rispetto ai tuoi post, ho notato che nei miei non compare l'og:description. Considerando che non mastico troppo il codice, come potrei fare per ripristinare il vecchio funzionamento del pulsantino di condivisione che si trova su blogger?

    RispondiElimina
    Risposte
    1. L'og:description viene ricavato dalla Descrizione di Google che va abilitata con le Preferenze di Ricerca
      http://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html
      http://www.ideepercomputeredinternet.com/2012/03/le-preferenze-di-ricerca-di-blogger.html

      Elimina
    2. E se invece non volessi inserirlo, come potrei fare per ottenere in automatico la descrizione del post quando lo condivido su facebook, magari utilizzando le prime righe del post stesso?

      Elimina
  12. Non capisco. Non vuoi aumentare i visitatori? Applicare le regole SEO di Google è essenziale @#

    RispondiElimina
    Risposte
    1. Si, quello sì. Però vorrei comunque poter condividere su facebook avendo a disposizione come descrizione del post il testo del post stesso. Il tutto se possibile in automatico come accadeva prima...

      Elimina
    2. Prova questo sistema
      http://www.ideepercomputeredinternet.com/2010/10/come-inserire-la-descrizione-del-blog.html
      però è vecchio

      Elimina
    3. Niente, non va... anche provando ad inserire una "descrizione della ricerca" nel post comunque quando vado a condividere tramite facebook non compare alcuna descrizione

      Elimina
  13. Buonasera Ernesto, ti ringrazio per il lavoro che fai e devo dire che seguendo i tuoi consigli sono riuscita a costruire il mio blog come volevo. Da un paio di mesi però quando condivido su facebook, non mi appare più la foto del post ma sempre quella dell' header. Ho seguito la tua procedura ed ho inserito gli Open Graph, ma niente, rimane sempre la foto dell'header senza possibilità di scegliere l'anteprima su facebook. Ho fatto anche il debugger e mi dice questo: Object at URL 'http://www.ass-cult-irumoridellanima.com/' of type 'website' is invalid because the given value '' for property 'og:image:url' could not be parsed as type 'url'. Ma non so proprio che cosa voglia dire. Mi puoi aiutare per favore? Approfitto di questo commento e aggiungo, come se nn bastasse, che oggi ho trovato un avviso che googlebot nn riesce ad accedere al mio blog. Io nn ho toccato niente, nn so nemmeno cosa siano questi file robots.txt. Nn so più cosa fare.

    RispondiElimina
    Risposte
    1. Questo è il post giusto. Se non ti funziona non saprei cosa dirti. Riguardo a Googlebot potrebbe essere un falso positivo e risolversi da solo ma è meglio controllare. Leggi questo post
      http://www.ideepercomputeredinternet.com/2012/06/come-inserire-le-sitemap-nel-file.html
      Poi vai su Impostazioni > Preferenze di ricerca > Crawler e indicizzazione e disabilita il file robots.txt personalizzato o riportalo alla situazione di default. Questo problema potrebbe anche essere alla causa della scorretta anteprima di Facebook
      @#

      Elimina
    2. ciao Ernesto qualche giorno fa anche io ho ricevuto una mail dove mi viene detto che Googlebot non riesce ad accedere al mio blog, ma io ho controllato e il file robots.txt è già disabilitato, che faccio? Grazie , buona domenica!

      Elimina
    3. Le visite sono crollate o sono rimaste stabili? Nel secondo caso si tratta probabilmente di un bug o di un falso positivo mentre nel primo caso non saprei proprio cosa dirti
      @#

      Elimina
    4. Le visite sono rimaste stabili , direi allora che posso stare tranquilla giusto? Grazie!

      Elimina
  14. buonasera Ernesto
    un anno fa avevo messo tutto a posto e ha funzionato tutto per un anno.
    da due giorni Facebook è di nuovo al punto di allora, ovvero condivide l'immagine che decide lui e senza alcuna descrizione del post.

    Inutile dire che non ho cambiato assolutamente nulla nel html dei miei blog.
    hai suggerimenti?
    grazie, Paola

    RispondiElimina
    Risposte
    1. @# Sono diversi giorni che anche io ho il tuo identico problema che potrebbe essere collegato a questo bug di Blogger
      http://www.ideepercomputeredinternet.com/2014/05/widget-degli-articoli-casuali-blogger-miniature.html?showComment=1415798862927#c4517832148400337257
      Vedremo i prossimi giorni

      Elimina
  15. Grazie Ernesto
    ho provato anche ad eliminare tutti i widget e la s finale delle immagini. nessun cambiamento
    aspetto il tuo post.

    RispondiElimina
  16. Ciao Ernesto... ho problemi con l'open graph.
    Questo è il mio blog: www.aressandoro.com
    Ho usato il codice che hai messo su ma sembra non funzioni. Potresti dare un'occhiata e magari dirmi cos'è che non va? ^_^

    Grazie anticipatamente!

    RispondiElimina
    Risposte
    1. Ho guardato il codice sorgente del tuo sito e non ho trovato nessun tag dell'Open Graph né della prima parte con i metatag né della seconda parte con lo script
      @#

      Elimina
  17. Ciao Ernesto, ho inserito URL dei post che non vengono condivisi in modo corretto in fb (parlo delle immagini) in ophen graf. Non riesco a risolvere nulla :( Ho cambiato anche l'html come avevi suggerito in un altro post, aveva funzionato ma poi ha smesso.
    Cosa devo controllare che mi stà sfuggendo? Stà capitando con sempre maggiori post, quindi ho sicuramente fatto qualche pasticcio :( il mio sito: www.lauralauincucinaconleamiche.it
    Ringraziandoti per il tuo prezioso aiuto e per il tuo grande lavoro attendo tue notizie.
    Grazie. Buona giornata!

    RispondiElimina
    Risposte
    1. Anche a me capita molto spesso di non riuscire a condividere la miniatura giusta. Oltre agli accorgimenti di questo post non è che si può fare molto altro :((
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.