Velocizzare i social plugins con jQuery e Ajax

nov

Velocizzare i social plugins con jQuery e Ajax

Postato da regole-seo, in Approfondimenti SEO, Social

Vai all’ indice degli articoli » Velocità e SEO

Nel precedente articolo introduttivo dedicato a come usare i social plugins senza compromettere la velocità, abbiamo visto che il consiglio di Matt Cutts è appunto quello di non lasciare perdere i social widgets solo perchè il server a cui si collegano è “un po’ lento”.
La grande utilità dei social plugins per la nostra link popularity e presenza nel web è effettivamente fuori discussione.

Oggi però voglio mostrarvi come “salvare capra e cavoli” utilizzando Ajax e jQuery per velocizzare i social plugins facendo in modo che il loro tempo di caricamento non incida sul tempo di caricamento dei vostri contenuti.
Sfrutteremo le potenzialità delle “chiamate asincrone”.
Nell’articolo successivi dedicato a questa tematica proporrò una soluzione basata esclusivamente su Ajax e Javascript per tutti coloro che per qualche ragione non vogliano (o non possano) appoggiarsi alle librerie come jQuery.

L’utilizzo di jQuery per implementare questa tecnica richiede sicuramente molte meno linee di codice e ne rende quindi più veloce la realizzazione.

Visto che l’articolo è dedicato anche a chi non ha grandi competenze in ambito Javascript, procederò passo passo commentando anche quei passaggi che a qualcuno sembreranno più ovvi.

Installazione di jQuery

Innanzitutto occorre importare le librerie jQuery nella vostra pagina web (quella in cui vorrete visualizzare i social plugins). D’ora in poi chiameremo questa pagina myPage.php
Il mio consiglio è quello di sfruttare il repository di Google AJAX Libraries API con tutti i vantaggi che ne derivano anziché caricare le librerie direttamente sul server che ospita il vostro sito.
Per utilizzare Google AJAX Libraries API , prima di procedere con questa guida, seguite le istruzioni a questo indirizzo: http://www.regole-seo.com/google-load-velocita-google-ajax-api

In alternativa dovrete caricare nel vostro spazio web le librerie jQuery (scaricabili da questo indirizzo docs.jquery.com/Downloading_jQuery) e importarle nella vostra pagina web myPage.php tramite il seguente tag <script> da posizionare all’interno del tag <head>.
In termini di codice otterrete qualcosa di simile:

... <head> ... <script type="text/javascript" src="/js/jquery.js"></script> ... </head> ...

dove /js/jquery.js identifica l’indirizzo al quale è raggiungibile il file delle librerie jQuery sul vostro server.

Importate le librerie jQuery andiamo innanzitutto a capire cosa andremo a realizzare.

Descrizione del caricamento asincrono dei social plugin

Per non fare incidere il tempo di caricamento dei social plugins sul tempo di caricamento della pagina, faremo in modo di invocare gli script per la generazione dei widget in un secondo momento rispetto al caricamento della pagina e in maniera del tutto asincrona come schematizzato nella figura sottostante:

Passiamo dunque ad implementare questo meccanismo.

Creazione file contenente il codice dei social plugins

In alcuni articoli precedenti ho spiegato come realizzare il codice per i tre social buttons che utilizzo anche qui su regole-seo. Trovate queste brevi guide ai social buttons a questi indirizzi:

Nel nostro esempio realizzeremo una chiamata asincrona per il caricamento di questi tre social buttons ma è chiaro che potrete riutilizzare lo stesso metodo anche su altri social plugins.

Il codice ottenuto seguendo le guide sopra citate sarà simile al seguente:


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


<div style="margin: 3px 10px 0px 10px; float: left; width:110px;">
	<a href="http://twitter.com/share" class="twitter-share-button"
        data-count="horizontal" data-via="RegoleSeo">Tweet</a>
	<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>


<div style="margin:3px 12px 0 0; float:left; width:90px;">
         <fb:like layout="button_count" show_faces="false"></fb:like>
</div>


<div style="margin:3px 0 0 0; float:left; width:94px;">
	<a data-button-style="small-count"  title="Posta su Google Buzz"
        class="google-buzz-button" href="http://www.google.com/buzz/post"
        data-button-style="link" data-locale="it"></a>
        <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

che realizza i pulsanti così come li vedete nell’immagine sottostante.

In blu ho evidenziato il codice relativo al bottone “mi piace” di Facebook, in verde quello del retweet button di Twitter e in grigio il Google buzz button.
Ho anche evidenziato in rosso il parametro utilizzato da Twitter per identificare l’utente che sta eseguendo il retweet. Questo parametro andrà sostituito con il vostro utente Twitter.
Trovate tutti i dettagli su questo codice nelle tre guide citate precedentemente.

Tutto quello che dovete fare è inserire questo codice in un nuovo file separato anzichè nella vostra pagina web e caricarlo sul server che ospita il vostro sito.
Chiameremo questo file social_buttons.php.
Se utilizzate un blog wordpress, il cosniglio per i principianti è quello di utilizzare l’estensione php per questo file (per evitare sorprese).

Creazione del contenitore per i social plugin

Inseriamo nella pagina web myPage.php del nostro sito un elemento (come ad esempio un tag <div>) che rappresenterà il luogo all’interno del quale lo script che realizzeremo andrà ad inserire i social buttons caricati dal file social_buttons.php.
Potremmo dunque realizzare un <div> simile al seguente:

<div id="social_buttons_top" style="height:20px; padding:15px 0 0 0;"></div>

Prestate attenzione al valore dell’attributo id (evidenziato in rosso). Sarà utilizzato dal codice Javascript per identificare l’elemento in cui inserire i social buttons.

Realizzazione dello script Ajax di caricamento asincrono tramite jQuery

Quello che resta da fare è richiamare il file social_buttons.php appena creato tramite una chiamata Ajax utilizzando le librerie di jQuery.
Il tutto è realizzabile attraverso le seguenti poche righe di codice da inserire nella vostra pagina web myPage.php:


<script type="text/javascript">
   $(document).ready(function() {
      setTimeout(function(){$.ajax({
         url: '/social_buttons.php',
         success: function(data) {
	    $('#social_buttons_top').html(data);
         }
      })},
      3000);
   });
</script>

Questo script viene eseguito al termine del caricamento della pagina ed effettua il caricamento del codice contenuto nel file “social_buttons.php“. A questo punto partiranno le richieste ai server dei social plugins che permetteranno di visualizzare i nostri social buttons.
Con questa funzione in realtà la richiesta al nostro file social_buttons.php viene effettuata 3 secondi dopo il caricamento della pagina.
Personalmente ho trovato che questo ritardo ha migliorato ulteriormente la velocità di rendering della pagina web.
Potrete aumentare o diminuire questo ritardo a piacere modificando il paramentro dei millisecondi della funzione setTimeout impostato appunto a 3000 (in rosso) nel codice qui sopra.
Il valore del parametro url (sempre evidenziato in rosso) dovrà essere modificato in base alla posizione del file social_buttons.php sul vostro server.
La notazione “#social_buttons_top” individua invece il <div> precedentemente creato all’interno del quale lo script “inietterà” i social buttons caricati.

Questo è tutto .
Chiaramente una volta capito il meccanismo potrete estenderlo anche agli altri social plugin come ad esempio la Facebook like box come quella che vedete a destra in questa pagina.

Non esitate a farmi avere le vostre impressioni!

Vai all’ indice degli articoli » Velocità e SEO

(5) Comments

Continua a leggere

Commenti (5)

Walter in data 26/nov/2010 alle ore 04:11 dice:

Complimenti il tutorial è molto interessante e la spiegazione eccellente.
Reyboz Blog in data 29/dic/2010 alle ore 12:12 dice:

Veramente molto interessante…un ritardo meditato per il caricamento corretto di qualcosa di pesante esterno alla pagina…

Credo che mi abbia fatto venire in mente un idea grazie per il suggerimento
regole-seo in data 29/dic/2010 alle ore 12:12 dice:

…mmm non fare il misterioso, facci sapere cosa ti frulla
Gianni Leggio in data 20/gen/2011 alle ore 03:01 dice:

Ho utilizzato questo metodo per Disqus e funziona a dovere
Carlo in data 20/gen/2011 alle ore 05:01 dice:

Grazie, ottimo tutorial! L’ho appena applicato ad un portale a cui sto lavorando

regole-seostrumenti seo per creare siti ottimizzati