Come installare i pulsanti di condivisione sui social network nella versione mobile di Blogger.

Come mostrare le icone per la condivisione sui social Facebook, Twitter, Google+, Linkedin, Feedly e WhatsApp nella versione mobile di Blogger.

La condivisione di articoli sui social network è un modo di attirare traffico sempre molto importante ma è anche un sistema per dare autorevolezza al post e al sito stesso. Molti fattori di ranking di Google dipendono proprio dal numero e dalla qualità delle condivisioni sociali.

Le condivisioni poi avvengono sempre di più da mobile visto che le persone stanno sempre di più preferendo questi dispositivi ai classici computer per una maggiore usabilità e perché possono navigare su internet stando in treno come alle poste, in una sala di attesa come in spiaggia sotto l'ombrellone. In questo articolo vi propongo una serie di icone da visualizzare nella versione mobile di Blogger da mostrare alla fine del post. Nell'articolo precedente abbiamo visto come nascondere l'icona di Google+ che dava appunto fastidio per questa installazione.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca questa riga

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

Se sulla sua sinistra fosse visibile una freccetta nera bisogna cliccarci sopra per visualizzare tutto il codice di questa sezione. Si scorre il template verso il basso fino a trovare questa nuova riga

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

Subito sotto a questa o meglio subito sopra si incolla questo codice

<!-- Icone sociali per il mobile inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table cellpadding='0' cellspacing='0'>
<tr>   
    <td style='padding-top: 5px;'>   
<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'></a></span>
    </td>
    <td style='padding-top: 5px; padding-left: 5px;'>
<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: 5px;'>
<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+'></a></span>
    </td>
<td style='padding-top: 5px; padding-left: 5px;'>
<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'></a></span>
    </td>
<td style='padding-top: 5px; padding-left: 5px;'>
<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'></a></div>    
    </td>
    <td style='padding-top: 5px; padding-left: 5px;'>
<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>
  </tr>
</table>
</b:if>
<!-- Icone sociali per il mobile fine -->

Successivamente si cerca la riga ]]></b:skin> e, subito sopra, si incolla questo secondo codice

/* CSS ICONE MD INIZIO */
#facebookbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_wSBg_IjYGmeBANwDuO_cpp5pYu9Xph5pzeX9gpxoo_vKFep7tvW_WBV4d1GPKSWS8YHc8elw169iETsk11e4u5VAUN3dD1b3kqADZtgSzsfUeTvGQLxgbN4rqW8lA5o5OPL2wTi-fo5t/s48-Ic42/facebook-box.png);} 
#twitterbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ODWdyPRUrmWHpFuqjbHiGbmjL9eAdZc2EfBA6KupBqYwcwLhsxOG7Sis8qlZ3KlepKAUTEsw2M1X1lW1mAIfjE6xhFFIZirvOPtiLahp1Zik8eRTbghEK4gDy0yUDzWCQuGjnk6dJ8HC/s48-Ic42/twitter-box.png);}
#googleplusbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMAE5nhjqrLgsGBDQikg5CfNUJxPg_GKtO4EfBkCuNzFPxI6wy7ehxYtztqf40Kah0KtPep-rwyzmpzFYoyus0ssX9mKl4KzENxNXyLHD1oE_1Niq_FpAWwfMKZmoTrOyToGKEQtCJitgZ/s48-Ic42/google-plus-box.png);}
#linkedinbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMfnVKye0NPH4YQAD-3WxCfwblAqPZQW547zGtybSfuub54Nr2tZpoY8JHsCIoqksXUOJFVq98v5siCS3IwznhLBIi3OppFHC3RuPCi6tX_KiIYEOnZgU72BQ10zh5dq1yLhKrP0eiImqW/s48-Ic42/linkedin-box.png);}
#feedlybutton a {display: block; width: 41px; height: 41px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilJ0pAds9MNF_aAZ_-pYEvyt7PGehzovT05WFRfLD6U_QOiIMbFnKJM-bIOpYOh5SCm1TKBZ8gnTP0UuveFMkNZBiej4zcDv1VQparxWG_J0Hq1iSUneATOA0vIM6LETElX1J3zsbnxGUl/s41-Ic42/feedly.png);}
#whatsapp_button1 a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWzGaydwnV_WJUM5AXMn_7aonI6bkHki6WImok59p_-ZwKT-BOdfN8vQRe9QF1dccL0Op3LXxPFM7M07EHp50hUxpm7-g01RaRycImBwSvXaJG9EHVxbNfcnKX4Ve1jVduNT4cbVkWoO8S/s48-Ic42/Whatsapp.png);}
/* CSS ICONE MD FINE */

Si salva il modello. Ho usato delle icone del tipo Material Design ma si possono scegliere le immagini che si vogliono. I social network che ho scelto sono stati Facebook, Twitter, Google Plus e Linkedin. Poi ho aggiunto anche il pulsante per iscriversi ai feed con Feedly e quello per condividere il post su WhatsApp. A parte l'URL delle icone si possono modificare le loro dimensioni e il loro posizionamento. Ho scelto di mostrarle con dimensioni di 48x48 pixel con un margine di 5 pixel verso l'alto e sempre con 5 pixel di margine da lasciare a sinistra.

Per il resto si deve intervenire sul codice solo per quello che riguarda Feedly. Nel primo blocco è stato colorato di viola il codice che permette di iscriversi a questo blog. Per modificarlo dovete consultare il post linkato qui sopra, recarvi nella pagina Feedly Button e usare il tool apposito per sostituirlo con l'URL dei vostri feed.  

Quando un utente cliccherà su una icona di Facebook, Twitter, Google+ o Linkedin si aprirà una scheda per la condivisione del post. Può anche aprirsi la applicazione relativa al social se l'utente ha configurato questa opzione sul suo telefonino o tablet. Quando cliccherà sulla icona di Feedly si aprirà la omonima applicazione per iscriversi ai feed se installata. Mentre chi cliccherà sulla icona di WhatsApp potrà scegliere il contatto su questa applicazione con cui condividere il post.

MOSTRARE QUESTE ICONE ANCHE NELLA VERSIONE DESKTOP

Se vogliamo mostrare queste icone non solo nella versione mobile ma anche in quella desktop dobbiamo incollare il primo codice anche in un'altra posizione mentre il secondo codice che è quello dei CSS servirà sia per il mobile sia per il desktop.  Dopo il salvataggio del template si va sempre su Modello > Modifica HTML e si cerca questa riga

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

che indica l'inizio della sezione per il desktop. Si scorre il codice fino a trovare l'altra riga 

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

e subito sotto a questa si incolla il primo blocco di codice di questo post. Il secondo si incolla con le modalità già illustrate se non lo si fosse già fatto in precedenza. Si salva il modello.