Caricare Bottoni e Widget di Twitter in modo Asincrono sul proprio blog

Con l'adeguamento alla normativa sui cookie mi sono trovato a dovermi inventare una soluzione per quanto riguarda gli elementi social, si veda anche l'articolo "Cookie policy: come gestire Google Analytics, AdSense e i bottoni Social", (il Like-Box di Facebook ed il widget di Twitter in primis) presenti sul mio blog e sui siti che gestisco. Pensandoci ho concluso che ritardare il caricamento di bottoni e widget e farli apparire allo scroll della pagina in modo asincrono mi permettesse di prendere due piccioni con una fava, oltre all'adeguamento alla normativa anche un lieve miglioramento nei tempi di caricamento delle pagine.

Mentre, però, il Like-Box di Facebook è un iframe e caricandolo tramite Ajax non ha sollevato alcun problema, il widget di Twitter contiene uno script in Javascript ed al suo richiamo nella pagina il box con gli ultimi tweet ed il bottone "segui" non apparivano.

Il problema non poteva essere altro che la mancata esecuzione dello script, infatti controllando sulle specifiche W3C per l'oggetto XMLHttpRequest si può leggere:

"Scripts in the resulting document tree will not be executed, resources referenced will not be loaded and no associated XSLT will be applied."

In pratica quanto sospettato. Cercando in rete mi sono reso conto che questo è un problema noto e molti sono riusciti a risolvere modificando lo script fornito da Twitter ed aggiungendo l'opzione js.async=true;, inutile dire che a me non ha funzionato.

Sono invece riuscito a risolvere il problema optando per l'utilizzo della funzione eval() allo script in questione (interpretato come testo). Aiutato da jQuery è stato facile individuare lo script nel contenuto di ritorno al quale associare la funzione ed il risultato è stato immediato.

Di seguito il codice che utilizzo sul mio blog e che quindi certifico come funzionante:

Widget di Twitter inserito in una pagina statica, chiamiamola twitter-widget.html (ognuno avrà il proprio script recuperato dall'account personale di Twitter, riporto il mio a titolo di esempio):

<h3>Seguimi su Twitter</h3><a class="twitter-timeline" href="https://twitter.com/michelepisani80" data-widget-id="557326679178485760">Tweet di @michelepisani80</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Nella pagina chiamante avrò il contenitore nel quale dovrà apparire il widget e che identifico con un id:

<div id="mp_twitter_timeline"></div>

A questo punto possiamo richiamare il codice asincrono necessario che si avvierà allo scroll della pagina (ma a seconda delle esigenze potrebbe essere avviato ad esempio direttamente all'onload):

$(window).one("scroll", function (e) {

	$.ajax({
		url: "/percorso_file/twitter-widget.html",
		context: document.body,
		success: function(responseText) {
			$("#mp_twitter_timeline").html(responseText);
			$("#mp_twitter_timeline").find("script").each(function(i) {
				eval($(this).text());
			});
		}
	});
  
});

Lo script di cui sopra non fa altro che cercare nella risposta alla chiamata Ajax, inserita all'interno del contenitore target, i tag script e per ciascuno di essi (in questo caso ce n'è solo uno), ne esegue il contenuto Javascript testuale con la funzione eval() permettendoci di ottenere il risultato cercato.