La condivisione dei contenuti del proprio sito internet è senza dubbio un fattore importante da considerare alla base di un progetto di realizzazione di un sito internet, e per sviluppare poi in seguito una buona campagna di web marketing, oltre che semplicemente per dare la possibilità ai propri utenti di condividere i contenuti solo per il piacere di farlo. Per fare ciò è necessario implementare nel proprio sito web i pulsanti di condivisione che i social network mettono a disposizione. In questo articolo parleremo dei pulsanti di condivisione di Facebook, Twitter e Google Plus.
Di tutorial in giro ce ne sono molti, ma il problema è che non sempre tutti funzionano. Questo perché le api che gestiscono questi pulsanti vengono spesso aggiornate e di conseguenza il codice di inserimento deve cambiare.
Partiamo dal presupposto che i social network mettono a disposizione istruzioni per l’inserimento di questi pulsanti ed altri plug-in, ma non sempre è facile reperire queste istruzioni, poi a volte non è facile trovarle in italiano e spesso necessitano di alcuni chiarimenti.
Andiamo ora a vedere i diversi pulsanti singolarmente.
La url per l’impostazione del pulsante è la seguente: http://developers.facebook.com/docs/reference/plugins/like/
È facile impostare i diversi parametri a seconda delle esigenze del vostro sito web o blog. Una volta impostati tutti i parametri, potete avere il vostro codice cliccando su “Get Code”.
La prima parte del codice va inserita subito dopo l’apertura del tag BODY del vostro sito.
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/it_IT/all.js#xfbml=1”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
La seconda parte va inserita nel punto della pagina dove volete che appaia il pulsante.
<div class=”fb-like” data-send=”true” data-width=”450″ data-show-faces=”true”></div>
Come vedete l’inserimento del pulsante LIKE di Facebook non è complicato.
Facebook mette a disposizione anche la possibilità di avviare un evento nel momento in cui viene cliccato il pulsante all’interno del vostro sito. Un esempio utile di applicazione è sapere quando una persona clicca sul pulsante per incrementare un valore all’interno del database per creare, ad esempio, una lista ordinata delle pagine del sito in base al valore dei “Mi piace”.
Per avviare questi eventi vi riporto il link alla pagina ufficiale di Facebook: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/ . Ne riparleremo poi approfonditamente in un altro articolo.
La url per l’impostazione del pulsante è la seguente: https://twitter.com/about/resources/buttons
Per il pulsante che ci interessa, selezionate “Condividi un link”. Impostate facilmente tutte le opzioni ed avrete un codice simile a questo:
<a href=”https://twitter.com/share” class=”twitter-share-button” data-lang=”it”>Tweet</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>
Inserite questo script nel punto esatto in cui volete il vostro pulsante.
Nelle opzioni a disposizione non c’è l’opportunità di scegliere la versione del pulsante con la nuvoletta in alto con il contatore (quella presente nel nostro sito in basso in fondo a questa notizia). Per avere questa versione è sufficiente aggiungere all’interno del tag A dello script il seguente valore: data-count=”vertical”.
Avrete quindi uno script simile a questo:
<a href=”https://twitter.com/share” class=”twitter-share-button” data-lang=”it” data-count=”vertical”>Tweet</a>
GOOGLE PLUS
La url per l’impostazione del pulsante è la seguente: https://developers.google.com/+/web/+1button/?hl=it
Anche qui è tutto molto semplice. Impostate le varie opzioni e avrete il vostro codice. Una prima parte da inserire in ogni punto dove volete il pulsante:
<div class=”g-plusone” data-annotation=”inline” data-width=”300″></div>
E una seconda parte da inserire dopo l’ultimo tag del pulsante di Google+ inserito nella vostra pagina:
<script type=”text/javascript”>
window.___gcfg = {lang: ‘it’};
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
UNIRE I 3 PULSANTI
Quasi sempre vi capiterà di dover inserire i 3 pulsanti insieme all’interno della stessa pagina del vostro sito web, su un lato, in cima o in fondo o in una posizione strategica per consentire una facile condivisione e favorire quindi il vostro piano di web marketing.
I tre pulsanti hanno già di base uno stile “float:left” che gli permette di affiancarsi facilmente in orizzontale, quindi sarà sufficiente inserire i vari script uno di seguito all’altro. L’unica nota riguarda il pulsante standard di Google Plus che ha all’interno uno spazio maggiore sulla sinistra e può quindi risultare graficamente fastidioso.
Lo script finale sarà quindi simile a questo:
<!– Facebook Mi piace –>
<div class=”fb-like” data-send=”false” data-layout=”box_count” data-width=”450″ data-show-faces=”false”></div>
<!– Twitter Tweet –>
<a href=”https://twitter.com/share” data-count=”vertical” class=”twitter-share-button”>Tweet</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>
<!– Google Plus Button –>
<div class=”g-plusone” data-size=”tall”></div>