09
Velocizzare i social plugins con Ajax e Javascript
Postato da regole-seo, in Approfondimenti SEO, Social, in data 09/01/2011
Vai all’ indice degli articoli » Velocità e SEO
Il problema di come utilizzare i social plugins senza compromettere la velocità, è già stato affrontato una volta su regole-seo proponendo una soluzione Ajax e Javascript, basata sulle librerie jQuery.
Sebbene l’utilizzo di una libreria come jQuery rappresenti la migliore soluzione in quanto permette di risparmiare tempo e numerose linee di codice, è anche vero che spesso qualcuno (specialmente alle prime armi) potrebbe trovarsi di fronte a problemi di compatibilità con altre librerie Javascript utilizzate.
Per questo motivo e per eventuali altri casi in cui doveste decidere di non utilizzare jQuery, voglio proporre qui di seguito una soluzione tutta Javascript e Ajax per risolvere l’ormai famoso problema di come utilizzare i social plugins senza compromettere la velocità
Come consiglia anche Matt Cutts non è opportuno lasciare perdere i social widgets solo perchè il server a cui si collegano è “un po’ lento”.
Il guadagno che deriva dall’utilizzo dei social plugins in termini di link popularity e presenza nel web è talmente enorme rispetto allo svantaggio che deriva dalla lentezza provocata dai social plugins che sarebbe davvero ingenuo rinunciarvi per questo motivo.
La soluzione che proporrò qui di seguito mostra come “salvare capra e cavoli” sfruttando la tecnica delle “chiamate asincrone” per caricare i social plugins, in modo che il loro tempo di caricamento non incida sul tempo di caricamento delle vostre pagine. Tutto ciò è possibile utilizzando Javascript e Ajax
Come sempre, visto che l’articolo è dedicato anche a chi non ha grandi competenze in ambito Javascript, procederò passo passo commentando (soprattutto all’interno del codice) anche quei passaggi che a qualcuno sembreranno più ovvi.
Caricamento asincrono dei social plugin
Come nell’articolo “Velocizzare i social plugins con jQuery e Ajax“ ripropongo qui sotto uno schema che descrive quanto andremo a realizzare.
Perchè il tempo di caricamento dei social plugins non incida sul tempo di caricamento dei contenuti, faremo in modo di eseguire gli script per la generazione dei widget successivamente al caricamento della pagina e in modo asincrono come schematizzato nella figura sottostante:
Creazione file contenente il codice dei social plugin
Per comodità, in questo paragrafo ripeto quanto già scritto in “Velocizzare i social plugins con jQuery e Ajax“. In alcuni articoli precedenti abbiamo visto come realizzare il codice per i tre social buttons utilizzati anche qui su regole-seo. Trovate queste brevi guide a questi indirizzi:
- Facebook: inserire il bottone “mi piace” senza problemi
- Twitter: inserire il retweet button senza spiacevoli sorprese
- Google buzz button: inserirlo è semplice e conviene
Nell’esempio qui riportato realizzeremo una chiamata asincrona il cui scopo è quello di caricare questi tre social buttons ma è chiaro che potrete riutilizzare lo stesso metodo anche per caricare altri social plugins.
Il codice ottenuto seguendo le guide sopra citate sarà simile al seguente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
|
1 2 3 4 5 |
<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="<code style="color:red">RegoleSeo</code>">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div> |
|
1 2 3 |
<div style="margin:3px 12px 0 0; float:left; width:90px;"> <fb:like layout="button_count" show_faces="false"></fb:like> </div> |
|
1 2 3 4 5 6 |
<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.
Il codice in blu si riferisce al bottone “mi piace” di Facebook, quello in verde al retweet button di Twitter e quello in grigio al Google buzz button.
Quello evidenziato in rosso è il parametro utilizzato da Twitter per identificare l’utente che sta eseguendo il retweet. Dovrete sostituire questo parametro con il vostro utente Twitter.
Potete trovate tutti i dettagli su questo codice nelle tre guide sopra citate.
Ciò che dovete fare è copiare questo codice in un nuovo file (anzichè nella vostra pagina web) e caricarlo sul server che ospita il vostro sito.
D’ora in avanti chiameremo questo file social_buttons.php.
Per i principianti che stanno utilizzando un blog wordpress, consiglio di utilizzare l’estensione php per questo file (per evitare sorprese).
Creazione del contenitore per i social plugin
Anche questo passaggio è identico a quanto descritto in “Velocizzare i social plugins con jQuery e Ajax“. Per comodità descriverò nuovamente qui il tutto.
Inserite nella pagina web in cui volete visualizzare i tre social buttons, chiamata d’ora in avanti myPage.php un elemento (come ad esempio un tag <div>) che identificherà il luogo in cui lo script che realizzeremo inserirà i social buttons caricandoli dal file social_buttons.php.
Potremmo dunque realizzare un <div> simile al seguente:
|
1 |
<div id="<code style="color:red">social_buttons_top</code>" 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 Javascript-Ajax per il caricamento asincrono dei social plugins
Non ci resta che richiamare il file social_buttons.php appena creato tramite una chiamata Ajax.
Per realizzare questo utilizzeremo le seguenti linee di codice da inserire nella vostra pagina web myPage.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<script type="text/javascript"> /*Funzione di callback che gestirà la risposta del server*/ function gestisciRisultato() { //req è l'oggetto rappresentante la nostra richiesta ajax creato nella funzione //getUrl() descritta più sotto. //Se il trasferimento è completato (4) if (req.readyState == 4) { //Se lo stato è successo (200) if (req.status == 200) { //recuperiamo il testo dalla risposta (il contenuto del file //"social_buttons.php") sottoforma di stringa var resText = req.responseText; //Inseriamo il tutto nel <div> di destinazione avente //id "social_buttons_top" var span = document.createElement('span'); span.innerHTML = resText; var myDivDestination = document.getElementById("<code style="color:red">social_buttons_top</code>"); myDivDestination.appendChild(span); } } } /* Funzione cross-browser per ottenere l'oggetto XmlHttpRequest */ function getXmlHttp() { req = null; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } return req; } /* Funzione di caricamento dati tramite Ajax*/ function getUrl() { //inizializzazione dell'oggetto ajax XmlHttp. //XmlHttp rappresenta un set di API che possono essere usate da JavaScript, //JScript, VBScript e altri linguaggi di scripting per trasferire XML //o altri dati da e verso un web server tramite protocollo HTTP req = getXmlHttp(); if(req!=null) { //La seguente istruzione specifica quale funzione //dovrà essere invocata una volta ricevuta una risposta dal server. //La funzione "eval" accetta un parametro stringa e lo esegue come //se fosse codice js. //Nel nostro caso il parametro passato è il nome della funzione di //callback (definita sopra) il cui codice verrà eseguito quando la risposta //dal server sarà stata ricevuta. req.onreadystatechange = eval( 'gestisciRisultato' ); //Apertura del canale di comunicazione con il server eseguendo //una richiesta di tipo get sul file "/social_buttons.php" //il terzo parametro settato a true specifica che si tratta di una //richiesta asincrona. req.open( "get", '<code style="color:red">/social_buttons.php</code>', true); //impostiamo il content-type dalla richiesta req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //Effettuiamo la richiesta al server (il parametro è un messaggio //che può essere inviato al server insieme alla richiesta) req.send( null ); } } /*invocazione della funzione getUrl dopo un timeout di 3 secondi*/ setTimeout("getUrl()", "<code style="color:red">3000</code>"); </script> |
Come vedete sono molte più linee di codice rispetto alla soluzione jQuery proposta nell’articolo “Velocizzare i social plugins con jQuery e Ajax“.
Ho inserito diverse linee di commenti per cercare di agevolare i meno esperti in ambito Ajax e Javascript.
L’istruzione setTimeout(“getUrl()”, “3000″); è quella che da il via al tutto invocando la funzione getUrl() tre secondi dopo il caricamento della pagina. Questa funzione effettua il caricamento del codice contenuto nel file “social_buttons.php“. A quel punto partiranno le richieste ai server dei social plugins che andranno a realizzare i nostri social buttons.
Il ritardo che ho voluto impostare a tre secondi ha migliorato la velocità di rendering della pagina web.
Potrete giocare a piacere su questo valore (espresso in millisecondi) per raggiungere la condizione che vi sembra ottimale.
Il secondo parametro della funzione req.open( “get”, ‘/social_buttons.php’, true); (in rosso nel codice) dovrà essere modificato in base alla posizione del file social_buttons.php sul vostro server.
Tramite “social_buttons_top” (sempre evidenziato in rosso nel codice) individuiamo invece il <div> precedentemente creato all’interno del quale lo script “inietterà” i social buttons caricati.
In questo modo anche chi non può o non vuole appoggiarsi a comodissime librerie Javascript come jQuery (che io consiglio vivamente) può risolvere il problema di come utilizzare i social plugins senza compromettere la velocità.
Una volta capito il meccanismo potrete ovviamente applicarlo anche agli altri social plugin come la Facebook like box che vedete a destra in questa pagina.
Non esitate a farmi sapere cosa ne pensate! 
ciao, molto interessante come articolo. Considera che adesso non è più necessario a una chiave da Google per utilizzare Google Loader.
ciao
Grazie mille per la segnalazione Franco!
ma questa soluzione potrebbe andare per un blog creato con blogger?
Non uso blogger ma non credo ti dia la possibilità di mettere mano al sorgente per inserire lo script… …magari attraverso dei plugin…