Velocizzare i social plugins con jQuery e Ajax

Postato da regole-seo, in Approfondimenti SEO, Social, in data 22/11/2010

Vai all’ indice degli articoli » Velocità e SEO

jquery-velocita-social

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:

social-plugin-ajax

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:

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

social-buttons-example

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:

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:

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

Commenti (18)

  1. Walter scrive:

    Complimenti il tutorial è molto interessante e la spiegazione eccellente.

  2. Reyboz Blog scrive:

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

  3. regole-seo scrive:

    …mmm non fare il misterioso, facci sapere cosa ti frulla :)

  4. Gianni Leggio scrive:

    Ho utilizzato questo metodo per Disqus e funziona a dovere ;)

  5. Carlo scrive:

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

  6. Andrea scrive:

    Ciao, ottima guida però a me non funziona. Quando inserisco i codici dei plugin nel social_buttons.php non vedo i plugin e visualizzando la sorgente la pagina è bianca. Ho provato molte volte, ma il problema persiste. Inoltre, la pagina dove inserisco l’ultimo codice nel single.php del mio tema non succede nulla. Ho anche caricato le librerie jQuery nell’header.php del tema.

  7. regole-seo scrive:

    Ciao Andrea. E’ difficile capire perchè a te non funzioni.
    La guida che ho fatto rispecchia esattamente la stessa procedura con cui qui su regole-seo vengono visualizzati i bottoni dei social e la fan box nella colonna di destra.
    …e come vedi funzionano.

    Eventualmente aiutati con firebug per capire se le chiamate non vanno a buon fine.
    Posta anche la url della tua pagina web.

  8. Andrea scrive:

    ciao, ottimo articolo, come sempre….
    Però non mi funziona, non riesco a capire cosa sbaglio!
    L’unico particolare che hai tralasciato (forse veramente troppo ovvio) è il come creare la pagina “social_buttons.php”
    Deve avere tutte le credenziali di pagina web (doctype, meta, html, body ecc…) oppure nuda e cruda con il solo codice dei social button?

  9. regole-seo scrive:

    Ciao Andrea, benvenuto.
    La pagina social_buttons.php deve contenere solo il codice che ho messo in questo articolo, nulla di più.
    Lascia qui sul blog il link sia della pagina che include sia di quella inclusa così do un’occhiata.

  10. Andrea scrive:

    mi dispiace ma per ora non posso linkare perchè il sito è in fase di test.
    quello che posso chiederti è se è giusta questa libreria

    Appena mi danno l’ok ti linko il sito.
    grazie mille

  11. Andrea scrive:

    ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

  12. regole-seo scrive:

    Bhe giusta in che senso?
    E’ la versione 1.7.2 di jquery agganciata dalle librerie di google. La Url è corretta.
    Io addirittura sto usando le 1.4.2.

  13. Antonio scrive:

    Salve,
    anzitutto grazie e complimenti per la guida sulle chiamate asincrone con jquery. Visto che ho lo stesso problema di andrea volevo chiederti una cortesia, non è che potresti postare un file zip con i due file php di esempio funzionanti?Te ne sarei molto grato. Grazie della disponibilità Antonio

  14. regole-seo scrive:

    Ciao Antonio,
    i file conterrebbero esattamente quello che vedi qui nell’articolo.
    Se dunque qualcosa non funziona è da capire analizzando il vostro sito. Se mi lasciate il link magari posso dare un’occhiata e magari darvi dei suggerimenti.

  15. martino scrive:

    Ottimo, peccato però che i pulsanti non funzionano correttamente se non richiami wp-load.php… Hai tralasciato dunque una parte della guida!

  16. regole-seo scrive:

    Ciao Martino.
    La descrizione di questa guida non è specifica per wordpress.
    Anzi ti assicuro che funziona indipendentemente dalla paittaforma usata.
    Anche con delle semplici pagine html.
    Infatti tutto il codice descritto qui è client-side.
    Il file wp-load.php non centra nulla e contiene delle funzionalità “core” di wordpress e se non lo carichi avrai problemi ben più grossi che la mancata visualizzazione dei plugin social!

  17. martino scrive:

    Non mi ero reso conto che la guida non era specifica per WordPress. Il tuo post è ottimo, ma non riesco a risolvere il problema di richiamare le funzioni di WordPress nella pagina richiesta. Il che – almeno per me – rende del tutto inutile questa altrimenti ottima soluzione!

  18. regole-seo scrive:

    E’ molto strano Martino.
    Questo blog è fatto in wordpress e non ho avuto i problemi che dici.
    Ho fatto soltanto quello che ho scritto in questa guida.

    E’ chiaro che se nella pagina che richiami devi usare delle funzioni wordpress particolari che sono in un altro file php, devi includere il file php che le implementa…
    …ma anche questo è un discorso generico e non solo per wordpress.

    Qui lo scopo era quello di ottenere quello che vedi anche su questo sito ovvero richiamare in modo asincrono una pagina che contenesse solo i widget (niente codice server-side) per non rallentare il caricamento della pagina con i contenuti.

Scrivi un commento