Ormai facebook, se ben utilizzato, è diventato una fonte di visitatori non indifferente.
In questo artiolo vediamo come creare il pulsante “Condividi su Facebook” senza l’utilizzo di plugin, moduli o componenti ed in modo indipendete dal Cms utilizzato. In realtà quanto scritto può essere utilizzato anche se non si utilizza un Cms.

Fondamentalmente ci sono 2 modi ugualmente validi:
1. Utilizzare il bottone  fornito dallo stesso Facebook (ovviamente va riadattato alle nostre esigenze)
2. esiste un sito specializzato in questo servizio, fbShare.me:

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.
Le due immagini seguenti mostrano i due tipi di pulsanti che facebook mette a disposione.

Le varie opzioni permettono altre personalizzazioni  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.

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.

Fonti :
creareblog.blogspot.com
facebook