Come inserire i plugin di Facebook senza diminuire la velocità di caricamento della pagina.

Avevo già parlato di come inserire i plugin di facebook in modo asincrono per fare in modo di caricarli indipendentemente dagli altri elementi della pagina. Non ero però ancora riuscito a trovare lo script che permetteva di farlo usando la localizzazione in italiano.

Adesso ho trovato la strada per poterlo fare. Ricordo brevemente in cosa consiste questo metodo di inserimento. Facebook mette a disposizione degli sviluppatori l'SDK Javascript in modo da creare applicazioni personalizzate e caricarle in modo asincrono per non bloccare la visualizzazione degli altri elementi della pagina e aumentarne la velocità di caricamento.

 

METODO ANALITICO

Per fare le cose per bene bisognerebbe creare un'applicazione ad hoc per ogni sito in cui si vogliono inserire i plugin con questo sistema. Vediamo brevemente come fare e poi illustrerò invece un metodo più semplice per i meno esperti.

Aprite Firefox perché con gli altri browser ci sono delle difficoltà. Andate nella pagina di registrazione dell'applicazione e inserite il nome del vostro sito e il relativo URL, quindi cliccate su Create an Application 

Vi saranno comunicati i dati della vostra applicazione e avrete il link per l'accesso alla Dashboard

Si potrà cliccare su Consenti per permettere all'applicazione di accedere al tuo Profilo. Saranno visualizzate tutte le applicazioni da te create. Questo però può essere fatto in un secondo momento. Nella parte bassa della pagina sarà visibile un esempio dell'HTML dell'applicazione

Voi dovete concentrarvi nella parte evidenziata di giallo dello screenshot. Quella che va dalla riga

<div id="fb-root"></div>

alla riga

</script>

Selezionatela, copiatela e incollatela nel modello immediatamente sopra alla riga </body>, quindi salvate il template.

 

METODO SEMPLIFICATO

Visto che l'applicazione l'ho già creata può essere usata tranquillamente da chiunque lo voglia. Coloro quindi che non se la sentono di armeggiare con l'HTML e il Javascript possono semplicemente incollare questo codice sopra alla riga </body> del loro modello (si trova nella parte finale) e, successivamente, salvarlo

<!--SDK FACEBOOK INIZIO-->
<div id='fb-root'/>
    <script>
      window.fbAsyncInit = function() {
        FB.init({appId: &#39;137301672963104&#39;, status: true, cookie: true,
                 xfbml: true});
      };
      (function() {
        var e = document.createElement(&#39;script&#39;);
        e.type = &#39;text/javascript&#39;;
        e.src = document.location.protocol +
          &#39;//connect.facebook.net/it_IT/all.js&#39;;
        e.async = true;
        document.getElementById(&#39;fb-root&#39;).appendChild(e); 
      }());
    </script>
<!--SDK FACBOOK FINE-http://www.ideepercomputeredinternet.com/-->

come mostrato in questo screenshot

Dopo aver fatto questa operazione, tutti i vari plugin di Facebook possono essere incollati in modo semplicissimo e utilizzando poco codice. Faccio l'esempio del plugin Mi Piace ma il metodo può essere applicato anche a tutti gli altri.

Aprite la pagina del plugin Like Button e configuratelo come più vi piace

L'URL to Like può essere lasciato in bianco perché di default sarà postato quello della pagina in cui è inserito. Si può scegliere la visione standard o quella con il contatore, la larghezza del widget, il verbo (mi piace o consiglia) e il colore light o dark (adatto per blog con lo sfondo scuro). E' importante anche scegliere se mostrare gli avatar di chi ha cliccato oppure no. Finita la configurazione si va su Get Code in fondo alla pagina. In questo caso non si copierà l'iFrame ma il codice XFBML

Questo codice può essere sostituito a quello dell'iFrame nel modello del template nella posizione e nei modi già visti in questo post. Si possono inserire con le stesse modalità anche il Like Box, gli Articoli Consigliati e le Attività Recenti. La differenza sta nel fatto che, dopo aver inserito nel modello il Javascript SDK si potrà incollare il codice XFBML invece dell'iFrame.

Durante l'apertura della pagina vedrete che i widget di Facebook inseriti con questo metodo saranno gli ultimi ad essere visualizzati e non impediranno il caricamento di tutta la pagina neppure nel caso in cui fossero momentaneamente down.