Come installare tutti i social plugin di Facebook in un widget di Blogger dopo aver creato una applicazione e aver modificato il modello con l'inserimento dei metatag e lo script di Open Graph.
I social plugin di Facebook sono stati introdotti da diversi anni e pur rimanendo sostanzialmente identici nella forma è mutata di molto la metodologia per la loro installazione. I primi tempi bastava copiare un semplice codice per poi incollarlo in un gadget o nel modello mentre adesso bisogna necessariamente passare attraverso la creazione di una applicazione.
Sembra che Facebook dia la possibilità di creare applicazioni solo agli utenti riconosciuti cha abbiano cioè verificato il loro account mediante un codice inviato per SMS al loro recapito telefonico. Inoltre dovranno essere inseriti dei metatag nel codice sorgente del sito web. In questo modo Facebook conoscerà chi utilizza i suoi bottoni e avrà la sicurezza che tali persone siano anche gli amministratori dei siti in cui vengono inseriti i suoi social plugin.
I plugin di cui è possibile l'installazione sono il Like Button (Mi Piace), il Send Button (Invia), il Follow Button (Segui che precedentemente si chiamava Subscribe Button), il modulo dei commenti, Share Dialog, Activity Feed (Attività Recenti), Recommendations Bar, Recommendations Box, Like Box (Fan Box della pagina fan), Login Button, Registration e Facepile.
CREAZIONE DI UNA APPLICAZIONE PER FACEBOOK
Ci si reca nella pagina Facebook Developers da loggati e si clicca su +Crea Applicazione
Dovremo inserire il nome della applicazione e facoltativamente lo App Namespace con sole lettere minuscole. Si sceglie la categoria e si clicca su Continua. Occorre superare un controllo visivo di una captcha per dimostrare che siamo umani e si aprirà la dashboard della applicazione
In App Domains dovrà essere inserito il dominio del sito per cui la stiamo creando l'app su Scegli come la tua app si integra con Facebook > Website with Facebook Login si inserisce l'URL della homepage. Nel caso di un blog gratuito di Blogger ricordarsi di utilizzare il canonico .com. Si va su Salva Modifiche in basso. Opzionalmente si può inserire anche una icona della applicazione. Nella parte alta della pagina saranno visibili un numero e un codice alfanumerico in qualità di API Key. In questo contesto ci interessa soltanto lo App ID
Da ricordare che ci vuole una applicazione per ciascun sito web sul quale vogliamo inserire i social plugin di Facebook. Si passa quindi alla modifica del template di Blogger.
MODIFICHE AL TEMPLATE DI BLOGGER
Si va su Modello > Modifica HTML e nella parte alta del codice si apportano queste modifiche
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'>
incollando le due stringhe colorate di rosso. Successivamente si cerca la riga </head> e, subito sopra, si incolla quest'altro codice
<!-- Facebook Open Graph Start -->
<meta content='parsifal32' property='fb:admins'/>
<meta content='687958031218259' 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='URL_LOGO_BLOG' 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='687958031218259' 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='URL_LOGO_BLOG' 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 -->
dove le modifiche riguardano il nome utente che potrà essere impostato tramite il VanityURL, o semplicemente ricavato dall'indirizzo del nostro Profilo Facebook, e lo AppID della applicazione. Si aggiunge anche una immagine del logo del sito che dovrà essere di almeno 200x200 pixel e la lingua prescelta. Nei vecchi modelli si cerca ora il tag <body> mentre nei template recenti si cerca la riga
<body expr:class='"loading" + data:blog.mobileClass'>
e, subito sotto, si incolla questo ultimo codice
<!-- 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=687958031218259";
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=687958031218259";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook Open Graph End -->
dove sarà nostra cura inserire l'AppID della applicazione che abbiamo creato e la lingua prescelta. Finalmente si salva il modello e si potrà passare alla installazione dei plugin.
CONDIVISIONE DEI LINK SU FACEBOOK
Se nella Bacheca di Blogger abbiamo attivato le Preferenze di Ricerca e se abbiamo inserito una descrizione per il post questo verrà condiviso con la miniatura e lo snippet.
Per verificare che i tag di Facebook siano stati ben inseriti si va su Facebook Debugger e si incolla l'URL di un post quindi si clicca su Debug per verificare che siano stati rilevati tutti i metatag
COME INSTALLARE IL PLUGIN MI PIACE
Se si vuole installare il Mi Piace in una sidebar si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice
<div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='false' data-width='55'
expr:href='data:post.canonicalUrl'/></div>
expr:href='data:post.canonicalUrl'/></div>
dove i parametri possono essere personalizzati seguendo le istruzioni del del Like Button. Il codice proposto determinerà questo aspetto del bottone
COME INSTALLARE IL LIKE BOX
Per installare il Like Box di una pagina fan in una sidebar bisogna andare sempre su Layout > Aggiungi un gadget > HTML/Javascript e incollare questo codice
<div class="fb-like-box" data-href="https://www.facebook.com/ideepercomputeredinternet" rel="publisher" data-width="292" data-height="360" data-show-faces="true" data-stream="false" data-header="false"></div>
Ovviamente l'indirizzo della pagina fan e gli altri parametri debbono essere personalizzati secondo lo schema del Like Box Plugin.
MODULO DEI COMMENTI DI FACEBOOK
Per visualizzare il modulo dei commenti in una sidebar o nel footer si va sempre su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo codice
<div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='460' expr:href='data:post.url'/></div>
Può essere settato il numero dei commenti visibili e la larghezza del modulo. Dall'inizio di questo mese sono mutate ancora le modalità di installazione dei plugin il che rende particolarmente difficoltoso inserirli nel modello. Nel caso dei commenti può essere utile visualizzare il gadget relativo al modulo solo nei singoli articoli e non in homepage, nelle pagine di archivio, in quelle delle etichette e nelle pagine statiche. Per far questo si inseriscono due tag condizionali per mettere dei vincoli alla visualizzazione del gadget. Il primo sarà quello che mostra il widget solo nei post e il secondo quello che non lo mostra nelle pagine statiche. Le istruzioni sono riportate nella sezione "Come usare i tag condizionali nei widget" nell'articolo appena linkato.
INSTALLAZIONE DEGLI ALTRI PLUGIN
Dopo essere andati su Social Plugins si clicca sul plugin da installare, si configura con il tool apposito e se ne vede l'anteprima sulla destra. Si va quindi su Get Code > HTML5 e si copia solo la seconda parte del codice mostrato nel popup. Eventualmente si cambia App dal menù a discesa se ne abbiamo create più di una per dei diversi siti web.
Il dato da modificare riguarda l'URL della pagina che è definito da
data-href="http://example.com"
Su Blogger si usano i tag specifici della piattaforma. Al posto di quella stringa si mette quindi
expr:href='data:post.url' oppure expr:href='data:post.canonicalUrl' o ancora
expr:data-href='data:post.canonicalUrl'
Pare che da questo mese si debba necessariamente inserire degli URL assoluti invece di quelli variabili e quello potrebbe pregiudicare le nuove installazioni di plugin di Facebook su Blogger.
Il 2° e 3° codice relativi alla modifica del template richiedono il VanityURL o l'ID. Ma della pagina o del profilo dal quale si gestisce la pagina?
RispondiEliminaSempre l'ID del Profilo o nome utente che dir si voglia. Oltre all'esempio del mio nick c'è anche fb:admins e non può essere l'ID della pagina ma dell'amministratore
Elimina@#
E nel caso in cui la pagina avesse più amministratori? metto l'ID di uno a caso?
EliminaUn sito può avere anche 100 amministratori ma si deve mettere l'ID di quello con cui è stata creata la applicazione
Elimina@#
ok grazie. preparatissimo come sempre ;)
Eliminascusarmi ernesto tempo fa consigliasti un ottimo programma di foto editing che è GIMP
RispondiEliminapotresti dirmi molto cortesemente come faccio a mettere una cornice ad un testo? per cornice intendo contorno al testo
grazie buona notte
Non sono particolarmente ferrato nei programmi di grafica e quindi anche su Gimp. Ho però fatto la recensione di un sito che si occupa proprio di tutorial per GIMP
Eliminahttp://www.ideepercomputeredinternet.com/2011/05/guida-e-tutorial-per-gimp-software.html
puoi quindi vedere lì se trovi qualcosa di utile
@#
Ciao! Ho seguito la guida e ci ho sbattuto la testa un po' su!! Ma se inserisco tutto come dici tu e metto il like button, mi chiede una conferma prima di mettere mi piace, come se non usassi gli open graph!! Invece io ho creato la app su fb e collegato tutto!!
RispondiEliminaSembra che Facebook faccia un po' come gli pare :(
Elimina@#
ahahahahah ok!! Mi fa piacere!! Il tuo pulsante su questa pagina funziona bene, non mi chiede nessuna conferma
EliminaTutte le volte che faccio una ricerca su google perché non riesco (più precisamente non so) fare qualcosa col blog, puntualmente rifiniso qua... quindi un GRAZIE enorme!!
RispondiEliminaProbabilmente sarei persa senza questa fonte di sapere! :)
^___^
Elimina@#
Ciao, vado un po' off-topic ma ho bisogno di aiuto e non sapevo dove scrivere. Non riesco ad inserire il Like Box di fb, come quello che hai tu. Vado in questa pagina: https://developers.facebook.com/docs/plugins/like-box-for-pages ma non capisco quale codice prendere e dove metterlo. Grazie.
RispondiEliminaLeggi questo tutorial
Eliminahttp://www.ideepercomputeredinternet.com/2013/08/like-box-facebook-code-blogger-wordpress.html
@#
Ciao Ernesto ho creato l'applicazione Open Graph e mi trovo impacciata ad installare il like button cioè non so come fare per inserirlo alla fine di ogni post e che si veda anche in home...Grazie
RispondiEliminaLeggi qui
Eliminahttp://www.ideepercomputeredinternet.com/2013/08/mi-piace-facebook-blogger-template.html
Per mostrarli anche in home togli i tag condizionali cioè la prima e ultima riga del codice incollato nel template
@#
Provo subito...il protocollo open graph con relativo id dell'app non ho avuto problemi...adesso provo ad inserire il like button
RispondiElimina