Come installare i plugin di Facebook su Blogger.

Come installare tutti i plugin di Facebook su Blogger con Open Graph. Codice del Bottone Mi Piace, Like Box, Pulsante Invia, Attività Recenti, Modulo dei Commenti di Facebook e Articoli Consigliati.

I Social Plugins di Facebook permettono agli webmaster di inserire nei propri siti web una serie di bottoni e box per favorire la condivisione dei loro contenuti nel social network per antonomasia.

L'installazione di ciascun plugin può essere fatta separatamente utilizzando il codice di Facebook oppure si può procedere collettivamente creando una applicazione ad hoc e inserendo nel modello il javascript localizzato di Facebook. In questo caso l'installazione dei singoli plugin è particolarmente facilitata, non si rischia di inserire il javascript di Facebook più di una volta e il caricamento dei plugin avviene in modo asincrono il che comporta un minor tempo per il caricamento della pagina.

Per inserire su Blogger i vari plugin separatamente si può consultare l'articolo su

• Come inserire il Mi Piace di Facebook -

Gli altri plugin quali il Fan Box possono essere installati seguendo la stessa falsariga cioè selezionando il plugin, inserendo i dati richiesti nel modulo e andando su Get Code

Sulla destra sarà visibile l'anteprima del plugin. Vediamo come inserire i bottoni e box di Facebook se si è invece optato per installare nel template di Blogger l'Open Graph di Facebook

• Come inserire in Blogger Open Graph di Facebook -

Se si sono seguite le istruzioni del post linkato sopra ecco quali sono i codici da aggiungere

CODICE MI PIACE FACEBOOK

<div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='false' data-width='55' expr:href='data:post.canonicalUrl'/>
    </div>

riferito a un bottone con contatore verticale. Per scegliere altri tipi di pulsanti consultate il post su come si possa personalizzare il Like di Facebook. Questo codice può essere incollato su Layout > Aggiungi un gadget > HTML/Javascript oppure anche nel modello di Blogger con le seguenti opzioni e dopo aver messo la spunta a Espandi i modelli widget

1. Per visualizzarlo prima del contenuto del post va incollato prima della riga <data:post.body/>
2. Per visualizzarlo dopo il contenuto del post va incollato dopo la riga <data:post.body/>
3. Per visualizzarlo dopo il Read More va incollato prima della riga <div class='post-footer'>

Se proviamo a incollare nel template il codice del Mi Piace così com'è, probabilmente Blogger non lo salverà. Dovremo quindi convertirlo in XML usando lo strumento Blogcrowds. Dopo avervi incollato il codice, si clicca su Parse e si copia il codice convertito che in questo caso sarà

&lt;div class=&#039;fb-like&#039; data-layout=&#039;box_count&#039; data-send=&#039;false&#039; data-show-faces=&#039;false&#039; data-width=&#039;55&#039; expr:href=&#039;data:post.canonicalUrl&#039;/&gt;
    &lt;/div&gt;

Naturalmente possono essere aggiunti dei tag condizionali per visualizzare il bottone solo nei post o usare altri tag per posizionarlo sulla sinistra, al centro, sulla destra, aumentare i margini superiori, ecc

CODICE INVIA DI FACEBOOK

Si utilizza lo stesso codice del Mi Piace visto in precedenza solo che dovremo sostituire data-send='false'  con data-send='true' . Il bottone Invia sarà visualizzato sotto al Mi Piace
 

CODICE RICEVI GLI AGGIORNAMENTI

E' noto che si possono visionare sulla nostra Bacheca i post pubblici di utenti di Facebook che non sono nostri amici attivando la funzione per Ricevere gli Aggiornamenti. Questo può essere fatto direttamente su Facebook ma può anche essere inserito un pulsante nel blog per far compiere ai lettori questa azione direttamente nel nostro sito. Il codice è

<div class="fb-subscribe" data-href="https://www.facebook.com/parsifal32" data-show-faces="true" data-width="450"></div>

dove va modificato l'URL del mio profilo su Facebook. Questo codice può essere inserito su Layout > Aggiungi un gadget > HTML/Javascript

Anche in questo caso il pulsante può essere inserito direttamente nel template convertendo il codice in XML come illustrato per il bottone Mi Piace.

CODICE PER IL MODULO DEI COMMENTI DI FACEBOOK

Stavolta è opportuno inserire il modulo direttamente nel modello. La regola è sempre quella di andare su Layout > Modifica HTML > Procedi e espandere i modelli widget. Se si sceglie di visualizzare il modulo dei commenti subito sotto ai singoli post, occorre trovare la riga <data:post.body/> e, subito sotto, incollare il codice  che mostrerà il modulo solo negli articoli

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='680' expr:href='data:post.url'/>
</b:if>

dove i parametri in rosso rappresentano rispettivamente il numero di post (5 su Facebook) da mostrare e la larghezza del modulo (680 pixel). Tale box dei commenti può anche essere personalizzato aggiungendo un div con un id e configurando un opportuno CSS. Il proprietario del sito, avendo creato l'applicazione, sarà anche in grado di moderare i commenti andando su Modifica e Impostazioni

CODICE PER ATTIVITA' RECENTI SU FACEBOOK

In questo caso il codice va inserito su Layout > Aggiungi un gadget > HTML/Javascript

<div class="fb-activity" data-site="http://www.ideepercomputeredinternet.com/" data-app-id="362600930477422" data-width="300" data-height="300" data-header="true" data-recommendations="true"></div>

dove dovranno essere personalizzati l'URL del blog e l'ID della applicazione.

CODICE PLUGIN CONSIGLIA SU FACEBOOK

Esattamente come sopra il codice va inserito su Layout > Aggiungi un gadget > HTML/Javascript

<div class="fb-recommendations" data-site="http://www.ideepercomputeredinternet.com/" data-app-id="362600930477422" data-width="300" data-height="300" data-header="true"></div>

dove vanno sostituiti l'URL del blog, l'ID della applicazione e configurate le dimensioni.

CODICE LIKE BOX DI FACEBOOK

Il Like Box è un widget che in genere viene posizionato in una sidebar. Si va quindi su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo codice

<div class="fb-like-box" data-href="https://www.facebook.com/ideepercomputeredinternet" data-width="292" data-show-faces="true" data-stream="false" data-header="true"></div>

dove deve essere inserito l'URL della pagina fan, la larghezza del widget e scegliere se mostrare gli avatar e lo stream inserendo true oppure false.

CODICE DEL PLUGIN REGISTRAZIONE

Questo plugin mostra un modulo precompilato per registrarsi a Facebook direttamente dal nostro sito. Occorre andare nella pagina del Registration Plugin e copiare il codice dell'iframe che poi può essere incollato come gadget in una sidebar




Per adesso mi fermo qui perché il Facepile Plugin è poco usato e il Live Stream Plugin sarà rimosso dall'elenco dei plugin disponibili nel prossimo Settembre 2012.