Come installare i pulsanti di condivisione sociale nella versione desktop e mobile di Blogger.

Come mostrare sia nella versione desktop sia nella versione mobile di Blogger i pulsanti per la condivisione su Facebook, Twitter, Google+, Linkedin, Feedly, WhatsApp, Youtube, Pinterest e Instagram.

Ritorno sul tema delle condivisioni sui social network che sono cosa diversa dai bottoni ufficiali con cui oltre a condividere si possono anche visualizzare i contatori del numero di tali azioni. In un post recente ho illustrato come si possano installare delle icone del tipo material design nella versione mobile di Blogger in questo articolo invece vedremo come si possa usare lo stesso CSS per mostrare le icone sia quando si visualizzi un post da mobile sia quando lo si visualizzi da desktop.

Benché il CSS sia comune le icone scelte per le due differenti valutazioni non coincidono. Il pulsante per la condivisione su WhatsApp ha senso mostrarlo solo nei dispositivi mobili in cui sono presenti delle applicazioni dell'omonimo servizio di messaggistica. Al contempo nella versione per il mobile è bene non abbondare con i pulsanti perché altrimenti potrebbero mostrarsi su due file nei cellulari con piccola risoluzione. Naturalmente si tratta di opinioni personali e ognuno può scegliersi la giusta configurazione per le proprie esigenze.

Dopo aver salvato il template si va su Modello > Modifica HTML e, mediante Ctrl+F, si cerca la riga ]]></b:skin> e, subito sopra a questa, si incolla questo codice

/* CSS ICONE SOCIALI INIZIO */
#facebookbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiayI_dEe-k6Vqv-ZDeoroDqJsNEGREaseGK2jYVGSqCkH8NM5g-KuOXgWO1dtXjnN5DDWn_m3WEmINZKqgGjr2s96xnymIhkYYAHPTptPQRGd-MYsDVUc-kQwnocAWUIJyzec_RbrhcwiR/s48-Ic42/facebook48.png);} 
#twitterbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirF0UHR1sCUWMq5h_-98Y83BcZaLdQijWhkRP9qhuZyebLlt8kFHC9guDQBErnFgvNiD47lSC3rMG2WmumnTO6HrGq6i2jXl0fp2kJyse2smiq4fYzlqZZ1KsacjK1e9dBymUhY6vNSTLR/s48-Ic42/twitter48.png);}
#googleplusbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheBw8y6__gLuN8LYOxO3q7_HrCLRx8KKqwgToVBxopiQoANUOQZSz8qLmiqxlpCai8b9lXVvdDG54jnh_VvjIOpbwSdbjrB67aFSgN5fQ6sCmCsXRzABcWksbqAd7I55L4acnWJvm4Rxd_/s48-Ic42/googleplus48.png);}
#linkedinbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW4dCb6gU6Z788Jenno9t-qPD9Ku-4pAPKD_E4RuHr7Vb08jNki2quCcjgVe8XbS6KlpjBTcfzN5mZ1fMywtCiewowlFyUFHalRmgcFVdrHUo7av2qKIDYrhAZfJHNDlz6deO6ga1xEGv4/s48-Ic42/linkedin48.png);}
#feedlybutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgkImeeu9DVrCNRL2WY48GME8qzeCp5jcmflA2GTCDCMgO5GxE9fCFnXI15RZMc6YR8wmnFs4v6BSkKnq00A-VlTuxLdxaLNClOOqh3zitW7RzK6z62tSHp0osM6wTHrsPkSo6mfWNPNK_/s48-Ic42/feedly56.png);}
#whatsapp_button1 a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxWuFWRGXCjVn6RnEAaOScXjE-dQrZ9sbRdRiGJajCo-YZbcTJL4NazZHZf6Qbh7TwrxhVFWBNP_iqBSbbT93mDWLWg_mOXo2vCg2-xLojzYny6yz2yPqrPy3_i9_9wf50-WpgLv10vlUA/s48-Ic42/whatsapp%25252048.png);}
#youtubebutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiujrqlgujA9Ld1Cize4VTono9NRa1yfHL0o8_ifgXrNVRE2x1CvZUzAMQF-A7gwGHgNhaQWg6e9VaJfsnSMdafDYvkv9xwXEUvLCrHqMFlGxFP8l13-xtbyCZG-JIXPgpczHmmGkVd8chh/s48-Ic42/youtube48.png);}
#pinterestbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAs-QapCG7YZWsYsTAMfOF8mFGGZJ2ZR5-qz5jp8QGVXCJeq4FHDJRJsfSB7IlnSEZRZe36MBpD22Oqi78icsx4Q2nRMsYsPKAOw9-JSattDAGvHc_vKVgRaalK6gwFRNQHgGcom0Jjfn0/s48-Ic42/pinterest48.png);}
#instagrambutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMe927eP8_n_U_RRDcMmIUgyzX0rmNAOSFpNSpMIkU0A6yCzdLKwRV3uTaCX8l2e2wNN5P7eQccaLOFEf9vhElAdbm08qOmt-tACd4ymqXew4cReMt-vd8twYpKFAgiEcqdFCEJCNGr_RF/s48-Ic42/instagram48.png);}
/* CSS ICONE SOCIALI FINE */

Le icone sono state scelte quadrate in formato PNG da 48 pixel e i loro URL colorati di rosso possono essere sostituiti da quelli di altre immagini di vostra scelta. I social inseriti sono Facebook, Twitter, Google+, Linkedin, Feedly, WhatsApp, Youtube, Pinterest e Instagram.

MOSTRARE LE ICONE NELLA VERSIONE DESKTOP

Per visualizzare le icone di condivisione nella versione desktop si rimane su Modello > Modifica HTML e sempre con Ctrl+F si cerca la riga

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

quindi si scorre il codice verso il basso fino a trovare l'altra riga che segna l'inizio del footer

<div class='post-footer'>

Subito sopra a questa si incolla questo nuovo codice

<!-- Icone sociali per il desktop inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table cellpadding='0' cellspacing='0'>
<tr>   
    <td style='padding:10px;'>   
<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;'>
<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;'>
<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;'>
<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;'>
<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;'>
<span id='instagrambutton'><a href='https://instagram.com/parsifal32/' rel='nofollow' target='_blank' title='Immagini su Instagram'/></span>
    </td>
<td style='padding:10px;'>
<span id='pinterestbutton'><a href='http://pinterest.com/parsifal32/' rel='nofollow' target='_blank' title='Immagini su Pinterest'/></span>
    </td>
<td style='padding:10px;'>
<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>     
  </tr>
</table>
</b:if>
<!-- Icone sociali per il desktop fine -->

in cui come potete notare non è stata inserita la icona di WhatsApp per le ragioni illustrate sopra. Se il navigatore cliccherà sulle icone di Facebook, Twitter, Linkedin o Google Plus si aprirà una nuova finestra con la condivisione dell'articolo già impostata. Cliccando sul pulsante di Youtube, Instagram e Pinterest ci sarà semplicemente l'apertura del profilo dell'autore del sito. A questo proposito bisogna che sostituiate gli URL colorati di rosso dei miei profili.

Un discorso a parte lo merita Feedly per cui per modificare il codice dovete consultare il post sulla installazione del bottone di quel lettore di feed. Le icone saranno visualizzate solo nei post e non nella homepage o nelle pagine di etichette e di archivio visto che ci sono i tag condizionali appositi nella seconda e penultima riga. Si salva il modello e la fine degli articoli avrà questo aspetto

Ho scelto una separazione di 10 pixel (padding:10px;) identica in tutte le direzioni questo significa che i bottoni saranno separati da 20 pixel e che ci saranno 10 pixel di distanza con i contenuti posti sopra e sotto le icone. Questo valore potrà essere modificato secondo le proprie esigenze.

INSTALLARE LE ICONE DI CONDIVISIONE NELLA VERSIONE MOBILE

Fermo restando che il primo codice dei CSS vale sia per il desktop sia per il mobile adesso installiamo l'HTML che ci permetterà di mostrare le icone anche sul mobile. Si rimane sempre su Modello > Modifica HTML e si cerca la riga della sezione mobile che è la seguente

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

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

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

e subito sopra si incolla questo ultimo 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'/></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+'/></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'/></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'/></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 -->

con le stesse personalizzazioni per il desktop. La separazione scelta per le icone è di 5 pixel per la parte alta e per la parte sinistra. Le dimensioni delle icone, le distanze tra queste nonché il loro numero permette di visualizzarle tutte sulla stessa riga anche in dispositivi con risoluzione non alta

La condivisione tramite mobile funzionerà per Facebook, Twitter, Google+ e Linkedin mentre con Feedly e WhatsApp si apriranno le applicazioni omonime se presenti nel dispositivo.