mercoledì 12 gennaio 2011

Condividi su Facebook - Creare il pulsante


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 facebookmette a disposione.
Condividi su Facebook
Condividi su Facebook
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.”/>
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.”/>
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:
Condividi su Facebook
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.

Etichette:

0 commenti:

Posta un commento

Articoli simili

Blog Archive

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Macys Printable Coupons