Piccole icone sociali animate alla fine dei post di Blogger per condividere sui social network.

Come installare in tutti i post le icone animate di condivisione di Twitter, Facebook, Google Plus, Linkedin, Pinterest, Youtube e quella dei Feed RSS

Mi rendo conto che il titolo di questo post non è il massimo dal punto di vista SEO perché troppo lungo e, benché sia molto descrittivo, non rende immediatamente chiaro al lettore l'argomento del post. Si tratta in realtà di inserire in tutti gli articoli una serie di icone che si animano al passaggio del mouse e che permettono di condividere il contenuto del post con un solo click nei social network più importanti.

La novità di questa impostazione è che il lettore non viene mandato all'account dell'autore con un apposito link ma se clicca sopra a una icona si aprirà una pagina precompilata per la condivisione su Facebook, Twitter, Google+ e Linkedin. Ho anche aggiunto le icone di Pinterest, di Youtube e dei Feed RSS anche se in questo caso c'è solo il link all'account senza condivisione di contenuti.

Diciamo che queste prima 4 icone fanno il lavoro dei vari bottoni ufficiali essendo però molto meno invasive, esteticamente più valide e con un aspetto che si intona alla quasi totalità dei blog.

Si possono inserire nella parte bassa del blog subito alla fine dell'articolo oppure anche nella parte alta subito sotto il titolo. In sostanza ho applicato a queste piccole icone colorate e animate i codici di condivisone dei social per immagini personalizzate. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin>. Subito sopra si incolla questo codice

/* Piccole Icone Sociali Inizio */
ul.ipcei_icone_sociali {float:left; margin-bottom:10px;}
ul.ipcei_icone_sociali li {float:left;list-style: none outside none;border:none;}
ul.ipcei_icone_sociali li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8ztxKG5VJeNaY_9kVrEhPy-risUBuGW-wiGFf4Wfksvkfm2r-ky9WSfW8cyFtB9bU6dvqXs3TRVUFY0eaYC6Gp8LleePEPHl7VzZb3JJ1u38qzsIjtA82ID-AzqlJLAyVbIPWCXP2qg/s640/social-icons.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.ipcei_icone_sociali li a, .ie8 ul.ipcei_icone_sociali li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8ztxKG5VJeNaY_9kVrEhPy-risUBuGW-wiGFf4Wfksvkfm2r-ky9WSfW8cyFtB9bU6dvqXs3TRVUFY0eaYC6Gp8LleePEPHl7VzZb3JJ1u38qzsIjtA82ID-AzqlJLAyVbIPWCXP2qg/s640/social-icons.png' )}
ul.ipcei_icone_sociali li.facebook a{ background-position:0 0}
ul.ipcei_icone_sociali li.googleplus a{ background-position:-96px 0}
ul.ipcei_icone_sociali li.linkedin a{ background-position:-128px 0}
ul.ipcei_icone_sociali li.pinterest a{ background-position:-160px 0}
ul.ipcei_icone_sociali li.rss a{ background-position:-192px 0}
ul.ipcei_icone_sociali li.twitter a{ background-position:-256px 0}
ul.ipcei_icone_sociali li.youtube a{ background-position:-320px 0}
ul.ipcei_icone_sociali li.facebook a:hover, #sidebar ul.ipcei_icone_sociali li.facebook a:hover{ background-position:0 -32px}
ul.ipcei_icone_sociali li.googleplus a:hover, #sidebar ul.ipcei_icone_sociali li.googleplus a:hover{ background-position:-96px -32px}
ul.ipcei_icone_sociali li.linkedin a:hover, #sidebar ul.ipcei_icone_sociali li.linkedin a:hover{ background-position:-128px -32px}
ul.ipcei_icone_sociali li.pinterest a:hover, #sidebar ul.ipcei_icone_sociali li.pinterest a:hover{ background-position:-160px -32px}
ul.ipcei_icone_sociali li.rss a:hover, #sidebar ul.ipcei_icone_sociali li.rss a:hover{ background-position:-192px -32px}
ul.ipcei_icone_sociali li.twitter a:hover, #sidebar ul.ipcei_icone_sociali li.twitter a:hover{ background-position:-256px -32px}
ul.ipcei_icone_sociali li.youtube a:hover, #sidebar ul.ipcei_icone_sociali li.youtube a:hover{ background-position:-320px -32px}
/* Piccole Icone Sociali Fine */

poi si clicca su Vai al widget > Blog1

e si cerca la sezione <b:includable id='post' var='post'>. Si clicca sulla freccetta nera alla sua sinistra per visualizzare tutto il codice. Si scorre fino a trovare la riga <div class='post-footer'>. Subito sopra o subito sotto si incolla questo secondo codice

<!-- Piccole Icone Sociali Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='ipcei_icone_sociali'>
<li class='facebook'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Facebook'>
</a></li>
<li class='googleplus'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Google+'>
</a></li>
<li class='twitter'>
  <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Twitter'/>
</li>
<li class='linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Linkedin'>
</a></li>
<li class='youtube'>
<a href='http://www.youtube.com/user/parsifal32' rel='nofollow' target='_blank' title='youtube'>
</a></li>
<li class='pinterest'>
<a href='http://pinterest.com/parsifal32/' rel='nofollow' target='_blank' title='pinterest'>
</a></li>
<li class='rss'>
<a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</b:if>
<!-- Piccole Icone Sociali Fine -->

dove sono da modificare gli URL degli account di Youtube, di Pinterest e l'indirizzo dei feed. Si salva il modello. Visto che quella zona del template è infarcita di molti elementi ci potrebbe essere l'esigenza di mettere un po' di spazio tra queste icone e il resto del layout. È per questa ragione che ho inserito margin-bottom:10px;. Nel caso si dovesse creare un po' di spazio anche in alto si aggiunge il tag margin-top:10px; con il numero 10 che può essere modificato a seconda delle esigenze.

Se optassimo per un posizionamento sopra al contenuto del post il secondo codice dovrebbe essere incollato subito sopra o subito sotto una di queste righe

<data:post.body/>
<div class='post-body entry-content'...  
<div class='post-header-line-1'/>
<div class='post-header'>

dove il posizionamento va sempre più in alto quando si passa alle opzioni successive. I moduli precompilati nei vari social network avranno il seguente aspetto

Nel caso di Facebook, Google Plus e Linkedin si aprirà una seconda scheda mentre cliccando sull'icona di Twitter si aprirà una finestra popup precompilata. Nei primi tre social network si potranno selezionare anche le miniature delle immagini presenti nel post.