modifycando.com

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

Articoli che potrebbero interessarti:

1. Creare “Network” : trackback e ping Trackback sta per "riferimento all'indietro" ed è un sistema che gestisce, in maniera automatica, la...
2. Aggiungere il pulsante “Mi piace” di Facebook sul proprio sito web Aggiungere il pulsante "Mi piace" di Facebook sul proprio sito web...
3. Al via l’email targata Facebook : @facebook.com Il social network più frequentato del mondo sta per dare il via ad un vero...
4. MySpace si arrende a Facebook ed è Mashup Questa notte Facebook e Myspace hanno annunciato un accordo che consentirà agli utenti di Myspace...
5. Condividi su Facebook – Creare e personalizzare il pulsante Share Già qualche tempo fa avevamo visto come creare il pulsante che permetteva di condividere qualsiasi...
6. Il pulsante “Mi piace” anche su Google: “Google +1″. Ma se fosse un pesce d’Aprile? Da qualche giorno Google ha inserito una nuova funzionalità. Un pulsante che permette di esprimere...
7. Facebook : Il tag diventa un brevetto Ormai è diventata un’operazione così ordinaria che a nessuno verrebbe in mente di chiedersi di...