Corsi on-line

jQuery SocialCount: social interaction con chiamate asincrone

L’inclusione di pulsanti per la condivisione sociale nelle pagine di un sito Web espongono quest’ultimo a latenze e rallentamenti, richiamare le API di Facebook, Twitter, LinkedIn, Pinterest e altre piattaforme di questo tipo significa molto spesso peggiorare la user experience costringendo gli utenti ad attese più o meno per il completamento dei caricamenti. SocialCount è un plugin per jQuery che aiuta a limitare questi fenomeni grazie all’utilizzo di chiamate asincrone.SocialCount

Una delle problematiche che affliggono più frequentemente i widget sociali riguarda le loro dimensioni, in molti casi si parla di un interscambio di dati superiore ai 200 KB nonostante i processi di minificazione e di compressione tramite GZip. Immaginate quindi quanto il caricamento simultaneo di più pulsanti sociali possa influire sulle caratteristiche del DOM (Documenti Object Model). Spesso poi tali widget rendono le pagine poco responsive e impediscono funzionalità elementari come lo scrolling.

Per evitare che le componenti JavaScript e CSS delle interazioni sociali finiscano per pesare eccessivamente sui tempi necessari al rendering, SocialCount si presenta come un’estensione del noto framework JS che consente di integrare widget in grado di adattarsi facilmente al layout di un’interfaccia per il Web, di supportare l’interazione con mouse, touchscreen o tastiera e di divenire disponibile in un package da appena 3KB.

Lo sviluppatore ha la possibilità di fornire i widget senza il ricorso a JavaScript o prima che JavaScript venga caricato, soluzione particolarmente indicata per le versioni mobili di un progetto. E’ supportato anche l’embedding dei “Like” per il Sito in Blue e dei “+1” per Google Plus in modo che questi ultimi possano essere utilizzati anche senza abbandonare la pagina corrente.

Una volta inclusi all’interno della propria pagina Web il file JavaScript e CSS di SocialCount (socialcount.min.js e socialcount.min.css) si possono integrare i pulsanti sociali definendo pochi parametri:

<ul class="socialcount" data-url="URL_DEL_SITO_WEB">
<li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=URL_DEL_SITO_WEB" title="Condividi su Facebook"><span class="social-icon icon-facebook"></span><span class="count">Like</span></a></li>
<li class="twitter"><a href="https://twitter.com/intent/tweet?text=URL_DEL_SITO_WEBL" title="Condividi su Twitter"><span class="social-icon icon-twitter"></span><span class="count">Tweet</span></a></li>
<li class="googleplus"><a href="https://plus.google.com/share?url=URL_DEL_SITO_WEB" title="Condividi su Google Plus"><span class="social-icon icon-googleplus"></span><span class="count">+1</span></a></li>
</ul>

Attualmente il plugin supporta l’interazione con Facebook, Twitter e Google Plus, l’estensione è però Open Source e potrà essere liberamente adattata anche ad altri social network.

Via SocialCount

Post correlati
I più letti del mese
Tematiche