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 == "item"'>
<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='"it_IT"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Facebook Open Graph End -->
<meta content='parsifal32' property='fb:admins'/>
<meta content='362600930477422' property='fb:app_id'/>
<b:if cond='data:blog.pageType == "item"'>
<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='"it_IT"' 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='"loading" + 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 -->
<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
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.
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.
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@# 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
EliminaSi, 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@# Prova con questo ma serve solo per le immagini dei post ma ti può essere utilie per operare nel codice
Eliminahttp://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
Ciao Ernesto, mi sta succedendo una cosa molto strana.
RispondiEliminaHo 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/
@# Non c'entra nulla comunque puoi sempre togliere quella riga se hai dei dubbi
EliminaHo 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?
RispondiEliminaGrazie
@# Non ho doti divinatorie ahimè! Prova a cambiare browser. Se non va elimina la cache e eventualmente anche i cookie
EliminaEh 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....
RispondiEliminaProvo a eliminare cache e cookie e speriamo che vada...
C'è chi ha risolto cambiando modello e iniziando daccapo ma spero di non doverlo fare.
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.
RispondiEliminavengo 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!!
@# 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@# Puoi comunque provare a usare l'ID della applicazione che ho creato io e che è nel codice di questo post.
EliminaHa 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.
Eliminaadesso riprovo anche ad espandere i modelli widget, in effetti può darsi che ieri abbia dimenticato di mettere la spunta.
grazie mille davvero! :)
@# Mia,
EliminaPer la descrizione leggi le ultime righe del post e l'articolo che vi è linkato
Incollando il primo [ uscito questo errore>
RispondiEliminaErrore di analisi XML, riga 718, colonna 118: Element type "meta" must be followed by either attribute specifications, ">" or "/>".
@# 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
EliminaIo ho inserito i tag Open Graph, ma quando pubblico un nuovo post devo ricorrere sempre a Debugger di Facebook per generare l'anteprima.
RispondiEliminaInoltre su Google Plus la prima immagine non è mai quella del post, ma quella dei social della sidebar...mi sapresti aiutare?
@# Forse dovresti usare le Preferenze di ricerca per migliorare la situazione
Eliminahttp://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
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:
RispondiEliminalink 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...
@# 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
Elimina< meta content='URL della immagine' property='og:image'/ >
dove ho aggiunto gli spazi per farmi accettare il codice dal commento
Ciao Ernesto, il mio ID lo posso prendere anche da http://graph.facebook.com/username? Perchè dalle foto risulta sempre diverso
RispondiElimina@# Sì è corretto prenderlo dall'URL del nostro profilo se abbiamo optato per quello che si chiama VanityURL come è nel tuo caso
Elimina