Già qualche tempo fa avevamo visto come creare il pulsante che permetteva di condividere qualsiasi contentuo del nostro sito sul social network più utilizzato. L’articolo era questo.
Abbiamo anche visto in altri post che esistono anche molti plugin per wordpress, ma anche per gli altri Cms che permettono la condivisione su quasi tutti i social e community che lo permettono.

Ora continuiamo ed approfondiamo il discorso del pulsante condividi.
Come già detto, il pulsante “Condividi su Facebook” o “Share on Facebook” permette ai visitatori del nostro sito di linkare il nostro contenuto sul social netwotrk in modo che sia visualizzato sulla nostra bacheca con un commento o delle informazioni che riguardano la pagina.

Come spiegato nel precedente articolo lo stesso Facebook mette a disposizione un tool di creazione del link da mostrare on-line che permette anche un minimo di personalizzazione

Premendo sul tasto “Share on Facebook” si aprirà un popup in cui vengono riepilogati i dettegli del link da condividere. Una’immagine, il titolo e l’Url.
Facebook recupera queste informazioni automaticamente dal codice html della pagina.

Il codice da inserire per visualizzare il pulsante è il seguente :

<a name="fb_share" type="icon_link" share_url="INDIRIZZO_DA_CONDIVIDERE" href="http://www.facebook.com/sharer.php">
Condividi
</a>

L’aspetto del pulsante dipende dal parametro type
box_count : Visualizza un riquadro con il numero di utenti che hanno condiviso il link
Il Box, piuttosto vistostoso è il seguente :

button_count : In questo caso il box visualizzato è un po’ più piccolo.

button : visualizza n semplice pulsante share, senza il numero di condivisioni

icon_link : Visualizza un’icona di facebook con in più il testo del bottone mentre icon visualizza esclusivamente l’icona.

Come si vede nell’esempio il parametro share_url identifica l’url della pagina che vogliamo condividere.
Se il campo viene lasciato vuoto, la pagina usata è quella in cui il link è stato creato.
Volendo personalizzare il link, possiamo dare un titolo alla share:

http://www.facebook.com/sharer.php?u=<link>&t=<title>
</title></link>

Come si intuisce accanto al parametro u va inserito il link da condividere mentre al posto del parametro t il titolo che verrà visualizzato anche nel popup riepilogativo.

Le informazioni riepilogative relative alla pagina che facebook recupera per visualizzarle nella bacheca dipendono dalla pagina stessa.
In particolare il titolo usato sarà quello presente nel tag title della pagina.
La descrizione è la description della pagina. Questi valori sono nella sezione head della pagina stessa
Note aggiuntive
Racchiudendo il codice di share all’interno di un div come specificato sotto, è possibile modificare l’allineamente a destra o sinistra del contatore e del testo relativo.

<div style="float:left;padding:4px;">
CODICE SHARE
</div>

In questo caso il pulsante sarà a sinsitra.

Le informazioni direttamente dagli sviluppatori di facebook sono nella pagina “Strumento di condivisione di Facebook”.
Altre informazioni relative a Facebook sono invece reperibili nel link seguente : Facebook.

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