Come installare le icone sociali sotto il titolo e alla fine del post nelle versioni desktop e mobile di Blogger.

Come mostrare i pulsanti di condivisione nei social network nella versione mobile e in quella desktop di Blogger subito sotto al Titolo e alla fine del post.

Ho ricevuto diverse richieste per condividere il procedimento che mi ha permesso di mostrare le icone animate per la condivisione sociale sia nella versione desktop sia nella versione mobile di Blogger.

Le icone si animano e cambiano di aspetto quando ci si passa sopra con il mouse con un effetto hover. Ho utilizzato un CSS Sprite in modo da mostrare tutte le icone in una sola immagine. Per ciascuna icona sociale ci sono due immagini, la prima viene mostrata in condizioni normali mentre la seconda appare con una trasformazione dovuto al CSS3 quando si punta con il mouse.

C'è una notevole differenza tra icone di condivisione e icone di collegamento. Queste ultime inviano chi ci clicca sopra  al Profilo dell'autore in quel social mentre le icone di condivisione aprono una finestra con cui condividere il post nei rispettivi social network.

Al momento nella versione desktop di Blogger mostro le seguenti icone:

1. Condivisione: Facebook, Twitter, Google+, Linkedin, Feeedly, Gmail, PDF
2. Collegamento: Pinterest, Youtube, Instagram.

Invece nella versione mobile sto mostrando queste icone di condivisione:Facebook, Twitter, Google+, WhatsApp, Telegram, Gmail e PDF.

Nella versione desktop le icone sono visibili sia subito sotto il post prima della Descrizione di ricerca che alla fine dell'articolo. Nella versione mobile invece le icone sono visibili solo subito sotto il titolo del post.

Nella versione desktop c'è più spazio e si possono aggiungere più icone mentre in quella mobile sono state privilegiate le icone che potenzialmente portano maggiori condivisioni.

COME INSTALLARE LE ICONE SOCIALI

Dopo aver salvato il modello per un eventuale ripristino si va su Tema -> Modifica HTML quindi si cerca la sezione <b:skin>.  Si clicca sopra alla freccetta nera sulla sinistra per visualizzare tutto il codice della sezione. Con Ctrl+F si cerca la riga ]]></b:skin> quindi, subito sopra, si incolla questo codice

/* CSS ICONE SOCIALI INIZIO */
#facebookbutton a,#twitterbutton a,#googleplusbutton a,#linkedinbutton a,#feedlybutton a,#whatsapp_button1 a,#youtubebutton a,#pinterestbutton a,#instagrambutton a,#telegrambutton a,#emailbutton a,#printbutton a,#facebookbutton a:hover,#twitterbutton a:hover,#googleplusbutton a:hover,#linkedinbutton a:hover,#feedlybutton a:hover,#whatsapp_button1 a:hover,#youtubebutton a:hover,#pinterestbutton a:hover,#instagrambutton a:hover,#telegrambutton a:hover, #emailbutton a:hover,#printbutton a:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuqT1gb47Ia2AFweQbbV_X4LCuMB_8BcxysU8fosnsWeR5sS6pd6wJTPlqqoKK-_j9LmKPAmB8ZCo7lzMI8FdnP5bGVcRNij8y7aeuJ0G-AdcpjnLbtUKEWAjN5jotUvABHwQD5Tiek7g/s384/icone-sociali-6.png); no-repeat; transition:all 0.2s ease 0s;}
#facebookbutton a {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:0 0;}
#twitterbutton a {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-32px 0;}
#googleplusbutton a {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-64px 0;}
#linkedinbutton a {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-96px 0;}
#feedlybutton a {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-128px 0;}
#whatsapp_button1 a {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-160px 0px;}
#youtubebutton a {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-192px 0;}
#pinterestbutton a {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-224px 0;}
#instagrambutton a {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-256px 0;}
#telegrambutton a {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-288px 0;}
#emailbutton a {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-320px 0;}
#printbutton a {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-352px 0;}
#facebookbutton a:hover {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:0 -32px;}
#twitterbutton a:hover {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-32px -32px;}
#googleplusbutton a:hover {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-64px -32px;}
#linkedinbutton a:hover {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-96px -32px;}
#feedlybutton a:hover {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-128px -32px;}
#whatsapp_button1 a:hover {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-160px -32px;}
#youtubebutton a:hover {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-192px -32px;}
#pinterestbutton a:hover {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-224px -32px;}
#instagrambutton a:hover {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-256px -32px;}
#telegrambutton a:hover {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-288px -32px;}
#emailbutton a:hover {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-320px -32px;}
#printbutton a:hover {display: block; width: 32px; height: 32px; margin: 0 auto; background-position:-352px -32px;}
/* CSS ICONE SOCIALI FINE */

Si salva il Tema. Questi sono i CSS per i bottoni. Come vedete c'è una sola immagine il cui URL è colorato di rosso. Per aggiungere altre icone bisogna seguire queste istruzioni. Ciascuna icona ha un suo posizionamento che viene richiamato nel background con le sue due coordinate.

INSERIRE LE ICONE NELLA VERSIONE DESKTOP DI BLOGGER

Per la versione desktop di Blogger si può decidere di mostrare le icone subito sotto il titolo e/o alla fine del post. In ogni caso si deve andare sempre su Bacheca -> Tema -> Modifica HTML e si cerca la riga

<b:includable id='post' var='post'>

MOSTRARE LE ICONE SUBITO SOTTO IL TITOLO

Si scorre  la pagina verso il basso fino a trovare la riga di codice

<data:post.body/>

quindi subito sopra si incolla questo codice

<!-- Icone sociali per il desktop parte alta inizio -->
                                   <b:if cond='data:blog.pageType == &quot;item&quot;'>
                                     <table cellpadding='0' cellspacing='0'>
                                       <tr>
                                         <td style='padding:10px 4px;'>
                                           <span id='facebookbutton'>
                                             <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'/>
                                           </span>
                                         </td>
                                         <td style='padding:10px 4px;'>
                                           <span id='twitterbutton'>
                                             <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Twitter'/>
                                           </span>
                                         </td>
                                         <td style='padding:10px 4px;'>
                                           <span id='googleplusbutton'>
                                             <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Google+'/>
                                           </span>
                                         </td>
                                         <td style='padding:10px 4px;'>
                                           <span id='linkedinbutton'>
                                             <a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Linkedin'/>
                                           </span>
                                         </td>
                                         <td style='padding:10px 4px;'>
                                           <span id='youtubebutton'>
                                             <a href='http://www.youtube.com/user/parsifal32' rel='nofollow' target='_blank' title='Iscriviti al Canale Youtube'/>
                                           </span>
                                         </td>
                                         <td style='padding:10px 4px;'>
                                           <span id='instagrambutton'>
                                             <a href='https://instagram.com/parsifal32/' rel='nofollow' target='_blank' title='Immagini su Instagram'/>
                                           </span>
                                         </td>
                                         <td style='padding:10px 4px;'>
                                           <span id='pinterestbutton'>
                                             <a href='http://pinterest.com/parsifal32/' rel='nofollow' target='_blank' title='Immagini su Pinterest'/>
                                           </span>
                                         </td>
                                         <td style='padding:10px 4px;'>
                                           <div id='feedlybutton'>
                                             <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Ffeeds.feedburner.com%2Fideepercomputeredinternet%2FzUQN' target='blank' title='Iscriviti ai Feed'/>
                                           </div>
                                         </td>
                                     <td style='padding:10px 4px;'>
<div id='telegrambutton'>
<a href='https://telegram.me/share/url?url=' onclick='window.open(&apos;https://telegram.me/share/url?url==&apos;+encodeURIComponent(location.href)+&apos;&amp;bodytext=&amp;tags=&amp;text=&apos;+encodeURIComponent(document.title));return false;' rel='nofollow' title='Invia con Telegram'/>
</div>    
     </td>
<td style='padding:10px 4px;'>
<span id='emailbutton'><a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi via Email'/></span>         
     </td> 
<td style='padding:10px 4px;'>
<span id='printbutton'><a href='javascript:window.print()'/></span>         
     </td>                                      </tr>                                    </table>
                                   </b:if>
                                   <!-- Icone sociali per il desktop parte alta fine -->

Ovviamente vanno personalizzati i link delle icone di collegamento che rimandano ai profili e che sono colorati di rosso. Per personalizzare l'icona di Feedly si devono seguire queste istruzioni.

Naturalmente se una icona non ci interessa si può tralasciare eliminando le righe che la riguardano dal tag <td...> al tag </td>. Si salva il Tema. Se avete la cattiva abitudine di guardare l'anteprima non vedrete nulla perché le icone saranno visibili solo nei post e non nella home e nelle pagine delle etichette. In taluni modelli potrebbero esserci due righe <data:post.body/>, in questo caso occorre incollare il codice due volte nella stessa sezione per il desktop.

MOSTRARE LE ICONE ALLA FINE DEL POST

Scorrendo ancora il codice verso il basso della stessa sezione

<b:includable id='post' var='post'>

si cerca adesso la riga

<div class='post-footer'>

e subito sopra si incolla lo stesso codice. Si salva nuovamente il modello.

INSTALLARE LE ICONE NELLA VERSIONE MOBILE DI BLOGGER

I CSS inseriti nel modello servono per la versione mobile e per la versione desktop. Dobbiamo però aggiungere il codice HTML anche nella sezione per il mobile per visualizzare le icone anche con lo smartphone.

MOSTRARE LE ICONE SUBITO SOTTO AL TITOLO DEL POST

Si va sempre su Tema -> Modifica HTML quindi si cerca la riga

<b:includable id='mobile-post' var='post'>

Si scorre il codice verso il basso fino a trovare questa riga

<data:post.body/>

quindi subito sopra si incolla questo codice

<!-- Icone sociali per il mobile inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div style='margin-top:-10px;'/>
<table cellpadding='0' cellspacing='0'>
<tr>   
     <td style='padding-top: 5px;'>   
<span id='facebookbutton'><a expr:href='&quot;http://m.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Facebook'/></span>
     </td>
     <td style='padding-top: 5px; padding-left: 3px;'>
<span id='twitterbutton'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Twitter'/></span>
     </td>
     <td style='padding-top: 5px; padding-left: 3px;'>
<span id='googleplusbutton'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Google+'/></span>
     </td>
     <td style='padding-top: 5px; padding-left: 3px;'>
<div id='whatsapp_button1'><a alt='WhatsApp-Button' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' title='Condividi su WhatsApp'/></div>    
     </td>
<td style='padding-top: 5px; padding-left: 3px;'>
<div id='telegrambutton'>
<a href='https://telegram.me/share/url?url=' onclick='window.open(&apos;https://telegram.me/share/url?url==&apos;+encodeURIComponent(location.href)+&apos;&amp;bodytext=&amp;tags=&amp;text=&apos;+encodeURIComponent(document.title));return false;' rel='nofollow' title='Invia con Telegram'/>
</div>    
     </td>
   <td style='padding-top: 5px; padding-left: 3px;'>
<span id='emailbutton'><a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi via Email'/></span>
     </td>
<td style='padding-top:5px;  padding-left: 3px;'>
<span id='printbutton'><a href='javascript:window.print()'/></span>         
     </td> 
   </tr>
</table>
</b:if>
<!-- Icone sociali per il mobile fine -->

Si salva il Tema.

MOSTRARE LE ICONE SUBITO SOTTO LA FINE DELL'ARTICOLO

Se volete mostrare le icone anche alla fine del post nella versione mobile di Blogger scorrete ancora il codice verso il basso fino a trovare la riga

<div class='post-footer-line post-footer-line-2'>

e subito sopra a questa incollate lo stesso codice di prima. Lo spazio di separazione tra le icone scelto per il mobile è di 3 pixel invece dei 4 pixel che avevamo scelto per il desktop. Si salva il Tema e si controlla il risultato aprendo un post qualsiasi. Anche per il mobile si possono selezionare solo le icone che ci interessano.

Considerazioni finali - Il posizionamento delle icone è comune a diversi altri oggetti HTML come la Descrizione di ricerca o i Banner pubblicitari quindi si dovrà incollare il codice tenendo presente quello degli altri oggetti. Infine il codice è testato per i Modelli Non Responsive. Per i Temi Responsive non c'è differenza tra versione mobile e desktop e i codici vanno incollati solo una volta. Non ho però avuto modo di testarne il funzionamento nei Nuovi Temi di Blogger.

Aggiornamento - Se volete mostrare anche il bottone del Mi Piace di Facebook accanto alle icone animate dovete aggiungere nel secondo codice per il mobile e/o per il desktop queste nuove righe

<td style='padding:5px;'>
<span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-size='small' expr:href='data:post.Url'>
    </span>      
    </td>

subito prima dei due tag finali della tabella </tr></table> . Il pulsante del Mi Piace sarà visibile solo se nel modello è stato già inserito il javascript SDK di Facebook.