Pubblicato il 27/06/12e aggiornato il

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


like-box

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
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
bottone-invia 

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

bottone-rivevi-aggiornamenti


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

modulo-commenti

CODICE PER ATTIVITA' RECENTI SU FACEBOOK

attività-recenti-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

plugin-consiglia-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


registrazione-plugin

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.




22 commenti :

  1. ciao ho notato che nel widget iscriviti a questo blog non compare l'icona facebook!Non esiste una alterativa? grazie

    RispondiElimina
    Risposte
    1. @MAKEUPPIAMOCIDM
      La tua domanda mi sfugge. Il widget Iscriviti a questo blog non lo conosco, forse fai riferimento a quello dei Lettori. In ogni caso i blog su Blogger fanno capo a Google mentre Facebook fa parte di un'altra parrocchia. Se invece ti riferisci a un widget particolare creato da qualcuno allora dovresti indicarmi quale.

      Elimina
  2. HO provato a inserire il codice per i commenti di facebook nel blog ma non funziona.

    RispondiElimina
    Risposte
    1. @MiriamFrancescaMarchese
      Come puoi vedere dallo screenshot quando ho pubblicato il post funzionavano. Prova con altri tutorial
      http://www.ideepercomputeredinternet.com/2011/12/come-mostrare-il-modulo-dei-commenti-di.html
      http://www.ideepercomputeredinternet.com/2011/05/come-inserire-il-modulo-dei-commenti-di.html
      http://www.ideepercomputeredinternet.com/2011/12/come-usare-il-modulo-dei-commenti-di.html

      Elimina
  3. unico codice html dei modulo dei commenti facebook che funziona :))))) graziee!!!!

    RispondiElimina
  4. Ernesto scusami io ho aggiunto dei video youtube in alcuni gadget html ma su blogger non riesco ad aggiungere ilo mi piace di facebook.O meglio lo aggiungo ma è il mi piace dell'intero blog
    potresti aiutarmi? è da tempo che cerco di inserirlo

    RispondiElimina
    Risposte
    1. @RosarioDeMaria
      Vorresti inserire il Mi Piace solo per i video di Youtube? Non penso si possa fare, c'è già il Like di Youtube, ma tutto può essere.

      Elimina
  5. Ciao volevo fare una domanda, non è che i commenti di facebook violino questo regolamento adsense? perchè a me è gia successo quando ho inserito una chat, visto che comunque trattasi di messaggistica immediata.
    Solo per essere sicuri, non vorrei incappare nello stesso errore due volte.

    ANNUNCI IN NEWSLETTER/EMAIL/PROGRAMMI PER CHAT: come stabilito dal regolamento del programma, i publisher AdSense non possono inserire codici degli annunci, caselle di ricerca o risultati di ricerca nelle email o in programmi di posta elettronica inviati a terze parti. Il regolamento è applicabile inoltre a newsletter, messaggistica immediata (MI) e siti di chat. A causa della normativa sulla privacy, del potenziale rischio legale e dei problemi legati al targeting, non possiamo permettere ai publisher di pubblicare annunci contestualizzati in base al contenuto dei messaggi o su pagine che includono contenuti dinamici.

    RispondiElimina
    Risposte
    1. @RobertoBaggio
      Sul regolamento di Adsense non si può mai dire nulla di certo ma in questo caso si parla di contenuti dinamici e i commenti di Facebook penso che non possano essere considerarti tali perché
      1)Hanno tutti il loro link univoco. Se clicchi sull'ora si apre il browser con l'URL univoco del commento
      2)Anche altri sistemi di commenti come Disqus o IntenseDebate funzionano nello stesso modo
      3)Anche Google a detta del suo ingegnere capo Matt Cutts indicizza i commenti su facebook e Disqus postati nel blog
      http://blog.tagliaerbe.com/2011/11/google-indicizza-ajax-javascript-commenti-facebook.html
      Eventualmente c'è da considerare se convenga tenere un widget che appesantisce il blog e che riceve un commento la settimana (nel mio caso ...)

      Elimina
  6. Ciao Ernesto!

    Dopo diverso tempo, torno sul tuo blog e lo trovo più ricco che mai!

    Ancora una volta ti scrivo in cerca di soluzione al problema...

    Ho inserito i pulsanti di condivisione sul mio blog, sia in una barra laterale, sia alla fine del post. Tuttavia, ho un problema con il pulsante Facebook...
    Succede che se clicchi mi piace, si apre una finestra di popup per condividere il post, ma nella descrizione compare non quella del post, bensì quella che si trova alla fine del post (in un disclaimer)...
    Ho provato a risolvere il problema inserendo nel codice del pulsante il seguente codice:
    expr:href='data:post.url'
    ma il problema persiste.

    Ti premetto che il pulsante Mi Piace (come anche il modulo dei commenti Facebook) sono fatti con una Applicazione personalizzata (come spieghi anche tu nell'articolo).

    Se vorrai dare un'occhiata, ti lascio l'indirizzo:
    http://blog.abruzzoupndown.com
    (Ovviamente, per i pulsanti, dovrai entrare in uno degli articoli presenti

    Ti ringrazio anticipatamente per l'aiuto!

    A presto

    Gianluca

    RispondiElimina
    Risposte
    1. @ Gianluca
      Prova a inserire la Descrizione nelle 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
      http://www.ideepercomputeredinternet.com/2012/03/la-descrizione-nelle-preferenze-di.html

      Elimina
    2. Ciao Ernesto!

      Grazie per la risposta immediata!

      Proverò a fare come dici e ti farò sapere!

      Un'ultima cosa (anche se in parte esula dall'argomento):
      Sai mica quale sia il codice per mostrare un widget solo nella Home del blog e non nei post e nelle pagine?
      Intendo praticamente il contrario della funzione svolta da questo codice:



      E se lo conosci, è possibile inserirlo nei moduli html del layout o devo intervenire direttamente sul codice del blog?

      Grazie ancora per il tuo aiuto!

      Gianluca

      Elimina
    3. @ Gianluca
      Si chiamano tag condizionali. In questi post puoi trovare tutte le informazioni
      http://www.ideepercomputeredinternet.com/2012/06/i-tag-condizionali-e-i-domini.html
      http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html

      Elimina
  7. Ciao Ernesto volevo sapere se sulla piattaforma blogger è possibile istallare un plugin di wordpress? Grazie.

    RispondiElimina
    Risposte
    1. @# Assolutamente no. In qualche caso sono stati adattati a Blogger alcuni plugin di Wordpress. Mi ricordo WP-Cumulus, ma il procedimento per la loro installazione è del tutto diverso.

      Elimina
  8. Ho una domanda (stupida),
    quello che chiami "CODICE PER IL MODULO DEI COMMENTI DI FACEBOOK" è appunto il modo per far si che l'utente possa commentare un mio articolo direttamente col proprio account Facebook?
    Questo il mio blog: http://smanettandroid.blogspot.it/

    RispondiElimina
    Risposte
    1. Perché ti spiego, io di ne ho tre!
      Quindi devo anche capire dove posizionarlo..
      Inoltre, se cambio da 5 a 99 abilito fino a 99 commenti per articolo giusto?

      Elimina
    2. Sì è così ma non so se questo codice funziona ancora perché dal mesi di Luglio Facebook ha cambiato le API rendendo tutto molto più complicato
      @#

      Elimina
  9. Come si può inserire il box dei commenti Facebook anche su Mobile?
    Ho provato ad inserire il codice data mobile="true" ma non appare. :/

    RispondiElimina
    Risposte
    1. Devi installare il modulo due volte
      http://www.ideepercomputeredinternet.com/2013/08/modulo-commenti-facebook-blogger.html
      La prima volta nella sezione del codice per il desktop e l'altra nella sezione per il mobile, leggi qui
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      @#

      Elimina
    2. Potresti gentilmente aiutarmi? Perché mi sembra parecchio complicato.
      Da quello che ho capito devo incollare questo codice prima del tag < / head > :



      Codice dell'elemento visibile con il mobile


      Codice dell'elemento visibile tramite desktop


      Premetto che nel mio template ho già installato i commenti facebook creando un'applicazione che mi permette di moderarli.
      Quindi, nella parte "visibile solo tramite desktop" non incollerò nulla ma nell'altra parte, quella mobile, invece, quanti codici dovrò incollare?
      E soprattutto dovrò convertirli in xml?
      Spero che mi potrai aiutare, grazie!

      Elimina
    3. Non devi usare i tag condizionali e il codice sopra a < /head > devi inserirlo una sola volta. L'altro codice lo devi invece incollare due volte una volta nella sezione desktop e una nella sezione mobile. Per riconoscere queaste sezioni leggi questo post
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      Oltre che in
      b:includable id='post' var='post'
      devi metterlo anche in
      b:includable id='mobile-post' var='post'

      @#

      Elimina

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.