Pubblicato il 28/07/13e aggiornato il

Come installare i social plugin di Facebook in un widget di Blogger.

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

applicazione-facebook

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

configurazione-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 

app-id-facebook

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 == &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='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='&quot;it_IT&quot;' 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='&quot;loading&quot; + 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 -->

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.

condivisione-facebook

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

facebook-debugger

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>

dove i parametri possono essere personalizzati seguendo le istruzioni del del Like Button. Il codice proposto determinerà questo aspetto del bottone
bottone-mi-piace

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>

modulo-commenti

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.

codice-plugin-facebook

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.




17 commenti :

  1. 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?

    RispondiElimina
    Risposte
    1. Sempre 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
    2. E nel caso in cui la pagina avesse più amministratori? metto l'ID di uno a caso?

      Elimina
    3. Un sito può avere anche 100 amministratori ma si deve mettere l'ID di quello con cui è stata creata la applicazione
      @#

      Elimina
    4. ok grazie. preparatissimo come sempre ;)

      Elimina
  2. scusarmi ernesto tempo fa consigliasti un ottimo programma di foto editing che è GIMP
    potresti dirmi molto cortesemente come faccio a mettere una cornice ad un testo? per cornice intendo contorno al testo
    grazie buona notte

    RispondiElimina
    Risposte
    1. 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
      http://www.ideepercomputeredinternet.com/2011/05/guida-e-tutorial-per-gimp-software.html
      puoi quindi vedere lì se trovi qualcosa di utile
      @#

      Elimina
  3. 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!!

    RispondiElimina
    Risposte
    1. Sembra che Facebook faccia un po' come gli pare :(
      @#

      Elimina
    2. ahahahahah ok!! Mi fa piacere!! Il tuo pulsante su questa pagina funziona bene, non mi chiede nessuna conferma

      Elimina
  4. Tutte 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!!
    Probabilmente sarei persa senza questa fonte di sapere! :)

    RispondiElimina
  5. 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.

    RispondiElimina
    Risposte
    1. Leggi questo tutorial
      http://www.ideepercomputeredinternet.com/2013/08/like-box-facebook-code-blogger-wordpress.html
      @#

      Elimina
  6. 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

    RispondiElimina
    Risposte
    1. Leggi qui
      http://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
      @#

      Elimina
  7. Provo subito...il protocollo open graph con relativo id dell'app non ho avuto problemi...adesso provo ad inserire il like button

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.