Inserire bottoni "Condividi su Facebook" e "Mi piace" su Blogger

Per inserire i bottoni "Condividi su Facebook" e "Mi piace" questo link, sempre su Facebook, nel proprio blog Blogger sarà sufficente seguire la seguente guida.
Nella guida verranno spiegati i vari passaggi per inserire i codici corretti nella pagina.
Ecco i vari passaggi per ottenere una barra come quella presente in questo sito, alla fine di ogni articolo:



  1. Andate nel pannello di controllo del vostro blog Blogger.
  2. Nella scheda Design andate su Modifica HTML
  3. Spuntate l' opzione "Espandi i modelli widget"
  4. Cercate nella pagina (in Windows potete usare CTRL+F per aprire la schermata di ricerca) il codice
    <div class='post_content'>
  5. Dopo aver trovato la stringa cercata, inserite il seguente codice HTML subito sotto la stringa:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding-top: 3em'>
<div style='float:right; margin: 0 0 1em 0; text-align:right;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'>Condividi l&#39; articolo su Facebook</a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div style='float:right; text-align:right;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&
amp;amp;show_faces=false&amp;width=100&amp;action=like&amp;
font=arial&amp;colorscheme=light&quot;'frameborder='0' scrolling='no'
style='border:none;overflow:hidden;width:85px; height:40px; text-align:right'/>
</div>
<div style='float:right; margin: 0 1.5em 1em 0; text-align:right;'>
<b:include data='post' name='shareButtons'/>
</div>
</div>
</b:if>

Andiamo a vedere la struttura e i vari componenti del codice:
  • La prima istruzione:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    indica che tutto ciò che è contenuto in questo tag HTML (che sarà chiuso alla fine) potrà essere visualizzato soltanto una volta aperto il post. Se non fosse presente questo componente (e sarebbe necessario eliminare anche alla fine), la barra verrebbe visualizzata anche in ogni singolo post nella home page. Soluzione però, secondo me, un pò scomoda e disordinata.
  • La struttura più esterna DIV:

    <div style='padding-top: 3em'>
    è come una tabella che contiene i vari widget (bottoni). Non ci soffermiamo più di tanto sul puro codice HTML.
  • Il primo vero bottone che vediamo scritto:

    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'>Condividi l&#39; articolo su Facebook</a>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    è quello per "Condividi su Facebook" che mostra, oltre al pulsante, anche il numero di condivisioni fatte del post su Facebook, tramite un fumetto a destra del bottone. E' possibile cambiare l' aspetto del bottone, per esempio per visualizzare più grande il fumetto con il numero di condivisioni, cambiando l' istruzione button_count, per esempio con box_count, provate!
    Anche se l' istruzione di questo bottone è messa per prima nel codice, tale bottone compare come primo DA DESTRA nel blog. Infatti l' ordine dei vari bottoni è dal primo all' ultimo da destra e non da sinistra. Il codice del bottone più a destra và scritto per primo, poi segue quello più a sinistra e così via.
  • Il secondo bottone:

    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;
    width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&
    amp;quot;'frameborder='0' scrolling='no' style='border:none;overflow:hidden;width:85px;
    height:40px; text-align:right'/>
    quello di "Mi Piace" e anche questo può cambiare di stile modificando l' istruzione button_count presente nel codice.
  • Il terzo e ultimo bottone (che in verità è una serie di bottoni):

    <b:include data='post' name='shareButtons'/>
    sono i bottoni di condivisione per Facebook, Buzz, Twitter e altro. Questo insieme di bottoni vengono forniti direttamente come novità delle ultime versioni di Blogger. Infatti se andate su Design,
    Elementi Pagina e cliccate su Modifica nella scheda Post sul blog, potrete spuntare l' opzione "Mostra i pulsanti di condivisione". Questi pulsanti, però, molto spesso, non vengono visualizzati automaticamente su Blogger se viene modificato, anche leggermente, il templete del blog ed è quindi necessario inserirli tramite il codice sopra riportato.