Inserire pulsanti “sociali” nel proprio sito

Per celebrare le (quasi) 1000 visite mensili del blog e ringraziarvi ho deciso di implementare una nuova funzionalità.

Da oggi potete condividere gli articoli del blog che vi piacciono su facebook o buzz, cliccando sulle icone nel riquadro grigio al fondo dei post.

Per quanto riguarda facebook, l’inserimento del plugin prevede l’utilizzo delle Facebook javascript SDK. Per prima cosa si deve registrare il proprio sito come applicazione, in modo da ottenere un “application id”. Una volta fatto ciò potete aggiungere in fondo alla vostra pagina il codice javascript per caricare le sdk:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Ora potete aggiungere il tag FBML che caricherà il pulsante “mi piace”:

<fb:like href="URL da segnalare" layout="button_count"></fb:like>

Potete personalizzare il tipo di pulsante tramite il tag “layout”:

• “standard” per avere il pulsante con la frase a fianco
• “button_count” per avere il pulsante con il contatore dei “like”
• “box_count” per avere il pulsante e il contatore su due righe diverse

e tramite il tag “colorscheme”:

• “light” per lo schema di colori default
• “dark” per lo schema di colori grigio scuro

Nel tag href dovete inserire l’url che volete sia segnalata quando qualcuno clicca sul pulsante.

Per quanto riguarda Google buzz invece, non è necessario registrare nessuna applicazione, si dovrà solamente includere il codice javascript per le Google Buzz SDK in fondo alla pagina:

<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

e il codice del pulsante per condividere il link

<a href="http://www.google.com/buzz/post"
  class="google-buzz-button" title="Google Buzz"
  data-message="Here’s Buzz!"
  data-url="http://www.google.com/buzz"
  data-locale="it"
  data-button-style="normal-count"></a>

È anche possibile personalizzare il pulsante modificando il tag “data-url” inserendo l’url alla pagina che si vuole segnalare, e il tag “data-button-style” con le seguenti voci:

• normal-count

• small-count
• normal-button
• small-button
• link