17:56
KThree
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.
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.
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: '<data:post.url/>'}</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 == "item"’><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 == "item"’><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 == "item"’><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 == "item"’><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.
0 commenti:
Posta un commento