Inserire un pulsante nel blog per condividere gli articoli su Facebook, con contatore delle segnalazioni fatte

Dopo aver segnalato la possibilità di inserire un pulsante nei post del blog per condividerli su Twitter, con tanto di contatore delle segnalazioni fatte, presento la stessa modifica ma fatta per Facebook, che al momento ha un volume di iscritti maggiore in Italia e può rivelarsi più proficuo come strumento per la promozione dei nostri articoli.

Il bottone è fornito dallo stesso Facebook e ovviamente va riadattato alle nostre esigenze, ma esiste anche un sito specializzato in questo servizio, fbShare.me: io qui presento entrambe le versioni, lasciando a voi decidere il look dei pulsanti. Il risultato finale è comunque equivalente.

Utilizzare il pulsante di Facebook

Dalla pagina di generazione del pulsante, è possibile personalizzare l’aspetto e altre opzioni minori del pulsante. Fondamentalmente è possibile scegliere tra questo meno invasivo:

che va benissimo messo sia sopra che sotto il post, e questo:

Le varie opzioni permettono altre personalizzazioni ma, visto che il codice va modificato e non voglio complicare la vita a me e a voi, propongo il codice solo per questi due pulsanti, lasciando ai più tecnici il compito di sbizzarrirsi col codice.

Per il primo:

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'>Condividi</a>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>

E per il secondo:

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'>Condividi</a>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>

Scegliete il codice che preferite, copiatelo e mettetelo da parte.

Generare il pulsante con fbShare.me

Se i pulsanti proposti da Facebook non vi piacciono, potete provare quello di fbShare.me:

Anche questo pulsante è altamente personalizzabile, ma richiede di inserire codice HTML particolare nel template e la guida è solo in inglese. Quello proposto va comunque benissimo e il suo codice (con qualche piccola modifica per adattarlo a Blogger) è:

<script>var fbShare = {
  url: &#39;<data:post.url/>&#39;
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

Se preferite questo pulsante, copiatene il codice e mettetelo da parte.

Pulsante in alto nel post

Una volta scelto il pulsante e messo da parte il relativo codice, dovete scegliere la posizione dove farlo apparire. Se volete il pulsante in alto a destra nel post, modificate queste righe aggiungendo il codice scelto da voi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right; margin-left:10px;'>
...codice del pulsante scelto...
</div>
</b:if>

Se invece lo volete in alto a sinistra, modificate queste righe:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin-right:10px;'>
...codice del pulsante scelto...
</div>
</b:if>

La riga in rosso va sostituita col codice del pulsante che avete scelto. Le righe in blu invece sono opzionali e se lasciate faranno apparire il pulsante solo nella pagina del singolo post e non nella pagina principale del blog (è sempre l’opzione che suggerisco).

Pulsante in fondo al post

Se volete inserire il pulsante in fondo al post e allineato a sinistra, personalizzate questo codice:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='text-align:left;'>
...codice del pulsante scelto...
</p>
</b:if>

Se invece lo volete allineato a destra:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='text-align:right;'>
...codice del pulsante scelto...
</p>
</b:if>

Anche in questo caso le righe blu sono opzionali e se le togliete i pulsanti appariranno anche nella pagina principale del blog.

Inserire il pulsante nel template

Una volta scelto il pulsante e fatte le dovute personalizzazioni, andate in Layout –> Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa riga di codice:

<data:post.body/>

che può presentarsi con qualche differenza, tipo:

<p><data:post.body/></p>

o qualcosa di molto simile.

Se avete scelto di mettere il pulsante sopra, incollate il codice sopra questa riga, altrimenti incollatelo sotto. A questo punto potete salvare il template e provare il vostro nuovo pulsante.

Per concludere

Come dicevo all’inizio dell’articolo, Facebook in Italia ha una diffusione più capillare di Twitter al momento, per cui un pulsante di questo tipo si rivela utilissimo, specialmente per chi è una presenza costante nel grande social network. Personalmente, sto pensando di aggiungerli entrambi, sia quello di Twitter che quello di Facebook.

Se decidete di aggiungerlo al vostro blog, fatemi sapere come vi trovate.

Per qualsiasi difficoltà, se siete di sesso maschile, fatemi un fischio. Se siete di sesso femminile, evitate il fischio: mia moglie potrebbe male interpretare il gesto. Fate semplicemente “ciao” con la manina.