Pubblicato il 15/06/11e aggiornato il

Come installare tutti i plugin di Facebook senza appesantire la pagina.

Il sistema migliore per inserire nel nostro sito dei Social Plugin di Facebook è quello di usare il caricamento asincrono attraverso Javascript SDK. Il vantaggio risiede nel fatto che i plugin si caricheranno solamente dopo che si saranno visualizzati tutti gli altri elementi della pagina. Questo porterà dei benefici per il lettore e dei vantaggi anche nei confronti dei motori di ricerca visto che la velocità di caricamento è uno dei parametri che determinano il posizionamento di un post. Se avete già dei plugin installati nel vostro blog su Blogger è il caso di prendere in considerazione l'ipotesi di reinstallarli tutti con questa procedura.

Se non lo avete già fatto, occorre innanzitutto creare una applicazione di Facebook relativa al sito in oggetto. Affinché Facebook la accetti, occorre aver verificato il nostro account tramite codice inviato via SMS. Si va su Setup Facebook e si inseriscono l'URL e del nome del sito quindi si clicca su Create App

creare app con facebook  

Dove aver inserito le parole del controllo visivo si clicca su Invia. Tutte le applicazioni create dal vostro Profilo saranno visibili accedendo alla pagina de Le Mie Applicazioni. Saranno tutte elencate sulla destra e si potrà cliccare su ciascuna di esse per modificare i dati. Ci interessa il numero del suo ID

modifica impostazioni applicazione

  E' opportuno anche andare su Modifica impostazioni e inserire un'altra volta l'URL e il nome del sito oltre a selezionare la lingua italiana

modifica applicazione facebook 

Si termina andando su Salva modifiche. Adesso dobbiamo andare su Bacheca > Design > Modifica HTML e espandere i modelli widget. Dopo aver salvato il modello completo per un eventuale backup di ripristino, si cerca la riga </body> che si trova alla fine del template e, subito sopra si incolla questo codice

<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'ID_APPLICAZIONE', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/it_IT/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

dove al posto di ID APPLICAZIONE va inserito il numero acquisito da Facebook. Passiamo all'inserimento dei singoli plugin.

 

Plugin dei commenti di Facebook alla fine di ciascun articolo

Si va sempre su Design > Modifica HTML e si cerca la riga <div class='post-footer'>. Subito sopra si incolla il codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/><fb:comments colorscheme='dark' expr:href='data:post.url' num_posts='5' width='500'/>
</b:if>

dove 5 è il numero dei commenti visibili nella pagina, 500 è la larghezza del modulo mentre colorscheme='dark' si inserisce solo in caso di blog con sfondo scuro. Si salva il modello. Il modulo comparirà alla fine di ciascun post ma sarà caricato per ultimo.

 

Pulsante Mi Piace all'inizio di ciascun post

Dopo essere andati su Design > Modifica HTML > espandi modelli widget si cerca la riga

<div class='post-body entry-content'> 

e subito sopra si incolla il codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="fb-root"></div><fb:like expr:href='data:post.url' send="true" width="450" show_faces="true" colorscheme="dark"/></fb:like>
</b:if>

Si salva il modello. Le personalizzazioni riguardano la presenza o meno del bottone Invia (si toglie send="true" se non si vuole), colorscheme="dark" da mettere solo per blog con sfondo scuro e la larghezza (width) del pulsante.

Like Box con gli avatar delle persone che hanno cliccato Mi Piace sulla nostra pagina fan

Questo plugin si inserisce in modo diverso visto che non si agisce sul modello ma su un elemento pagina. Per semplicità conviene andare sul Like Box Plugin e configurare l'aspetto inserendo gli avatar, l'header, calcolandone la larghezza, ecc

like box plugin

  quindi si va su Get Code per acquisire il codice. Si sceglie quello in basso cioè quello in linguaggio XFBML

codice like box facebook

A questo codice va tolta la parte dello script, visto che lo abbiamo già caricato nel modello, e quindi è inutile e anche dannoso inserirlo nuovamente. Un esempio di codice potrebbe essere

<div id="fb-root"></div><fb:like-box href="http://www.facebook.com/ideepercomputeredinternet" width="292" show_faces="true" border_color="" stream="false" header="false"></fb:like-box>

e la parte eliminata dello script in questo caso è

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

Si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito quindi si salva e si posiziona con il mouse.

 

Inserimento del pulsante Mi Piace in modo flottante

Per installare un bottone che rimanga sempre nella stessa posizione del layout con lo scorrere della pagina si procede nello stesso modo. Si va su Design > Aggiungi un gadget > HTML/Javascript e in Sezioni del sito si incolla questo codice

<div style="position:fixed;top:200px;right:300px;"><div id="fb-root"></div><fb:like expr:href='data:post.url' send="false" layout="box_count" width="80" show_faces="false" colorscheme="dark" font=""></fb:like></div>

Si può personalizzare la forma del bottone e la sua posizione modificando i parametri in rosso. Se andate in questo

vedrete come i pulsanti e il like box si visualizzino dopo che è stata interamente caricata tutta la pagina. Un altro vantaggio, come ho già detto, quello di caricare il javascript di Facebook una volta per tutte. Con questa stessa modalità si può anche inserire il pulsante Consiglia.





6 commenti :

  1. Sinceramente non mi va di smanettare ancora e mettere mano al modello. Penso che - come nel mio caso - inserendo i plugin solo nei post e con il "vecchio" sistema non ci sia quasi alcuna differenza di tempo nel caricamento. Ad ogni modo: ottimo articolo come sempre, sicuramente molto utile per i nuovi.

    Ciao Parsi. :)

    RispondiElimina
  2. @LenNy
    E' utile solo per chi ha due o tre pulsanti il Like Box e magari il widget delle Attività recenti. In questo caso si risparmia certamente nel tempo di caricamento

    RispondiElimina
  3. Ho provato a inserire i 'commenti per post' ma non si visualizza niente. Nessun plugins di FB si visualizza sulla mia pagina. Cosa potrebbe essere?

    RispondiElimina
  4. @Emanuel Gavioli
    Il fatto è che Facebook cambia continuamente configurazione. Prova con questo sistema
    http://www.ideepercomputeredinternet.com/2011/06/come-installare-tutti-i-plugin-di.html

    RispondiElimina
  5. Mi è venuto un dubbio dopo aver usato Page Speed Insights perché mi ha rilevato che due immagini dei fan rallentano il mio blog di circa 1 secondo. Siccome io ho adottato il plugin di Facebook del Like Box ma senza inserire l'ID dell'applicazione, quindi significa che incollando questo codice prima di BODY ed inserendo l'ID dell'applicazione diventa asincrono e si potrebbe risolvere il problema?

    RispondiElimina
    Risposte
    1. Io ho inserito Twitter, Google+ e Facebook in modo asincrono ma secondo Page Speed sono sincroni... Credo che debbano migliorare e alcuni consigli siano fuori luogo @#

      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.