Pubblicato il 26/07/15e aggiornato il

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://lh3.googleusercontent.com/-EF27dRdHa_E/VbOiqFG4MmI/AAAAAAAAvfU/g0dDPKC2_pQ/s48-Ic42/facebook48.png);} 
#twitterbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://lh3.googleusercontent.com/-ZK_A8gelKS0/VbOkgez8k-I/AAAAAAAAvgI/fgozjEi_Wk0/s48-Ic42/twitter48.png);}
#googleplusbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://lh3.googleusercontent.com/-Rxo0wToRATU/VbOisnY1oMI/AAAAAAAAvfc/iLpk-2F1RNw/s48-Ic42/googleplus48.png);}
#linkedinbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://lh3.googleusercontent.com/-SDxPP_SjBkM/VbOivAJP1YI/AAAAAAAAvfk/cG1cKXNzpI8/s48-Ic42/linkedin48.png);}
#feedlybutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://lh3.googleusercontent.com/-Lgn6uXg1BIs/VbOi4yl2BMI/AAAAAAAAvf8/osTePkzwKxE/s48-Ic42/feedly56.png);}
#whatsapp_button1 a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://lh3.googleusercontent.com/-mlLxJ2Hmrdg/VbOi1HxA1II/AAAAAAAAvf0/KokRdkv8mT8/s48-Ic42/whatsapp%25252048.png);}
#youtubebutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://lh3.googleusercontent.com/-5SRtWOrv1gY/VbPVDJYGCbI/AAAAAAAAvgs/o6U6HganNRk/s48-Ic42/youtube48.png);}
#pinterestbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://lh3.googleusercontent.com/-wSdsRLa8Gaw/VbPVBJUG_jI/AAAAAAAAvgk/Bq4J73WWAvw/s48-Ic42/pinterest48.png);}
#instagrambutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://lh3.googleusercontent.com/-c-SAPOXZxzs/VbPU_mAhJEI/AAAAAAAAvgc/ut1hRjekLc4/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

icone-sociali-desktop

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

visualizzazione-icone-dispositivi-mobili

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.




17 commenti :

  1. Utilissimo! seguo sempre i tuoi consigli, non finirò mai di ringraziarti!

    RispondiElimina
  2. Grazie mille per i tuoi suggerimenti. Ho seguito la procedura in questa pagina ma i pulsanti non sono comparsi. C'è qualcosa che va fatto prima di quanto qui riportato? grazie!

    RispondiElimina
    Risposte
    1. Sì. Devi andare su Modello > Cellulare > Ruota dentata e tra i modelli disponibili selezionare Personalizza quindi salvare le impostazioni
      @#

      Elimina
    2. ok. mentre per il modello desktop non serve altro? purtroppo nonostante abbia copiato i tuoi html non compaiono i pulsanti. grazie per il tuo tempo

      Elimina
    3. ecco.. ho risolto.. grazie ancora!

      Elimina
    4. come hai risolto? a me non si vedono ...

      Elimina
    5. Segui le indicazioni del commento 2.a
      @#

      Elimina
    6. come hai risolto? a me non si vedono ...

      Elimina
    7. ma il cell funziona il desktop no...

      Elimina
  3. Ottimo, appena inserite con successo sul mio blog, sia per Desktop che per Mobile. Mi serviva proprio, specie sulla versione Mobile
    Solo una piccolissima cosa: si può inserire una frase tipo "Condividi l'articolo su:" appena sopra i tasti, in modo da indirizzare in modo più chiaro i lettori ? Grazie in anticipo e ovviamente grazie per questa Idea :)

    RispondiElimina
    Risposte
    1. Dopo la riga
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      puoi provare a incollare una cosa di questo tipo
      <p style='font-size:14px; color:#036 !important;'>Condividi l'articolo su:</p>
      dove puoi modificare codice del colore e dimensione del carattere
      @#

      Elimina
  4. non c'è nulla da fare.. ho provato la versione desk e non appaiono, sicuramente sbaglio io.
    Ho modificato i codici perchè voglio solo fb, tw, link e google+ (e wa su mobile) forse ho sbagliato qualcosa.
    non importa, grazie comunque! ;)

    RispondiElimina
    Risposte
    1. Segui questo post che ho appena pubblicato
      http://www.ideepercomputeredinternet.com/2016/03/blogger-icone-social-network-mobile-desktop.html
      e che fa ordine proprio in questo argomento
      @#

      Elimina
    2. provo e ti faccio sapere. grazie

      Elimina
    3. Ti consiglio di lasciare il codice così com'è in prima battuta per verificare che funzioni nel tuo modello per poi modificarlo successivamente
      @#

      Elimina
  5. Ciao Ernesto,c'è la possibilità dalla versione mobile, che il post attraverso questi pulsanti siano condiviso tramite app e non dal browser, come accade se clicchi. Grazie e sempre complimenti

    RispondiElimina
    Risposte
    1. Al momento questo accade solo per WhatsApp. È una funzionalità che interesserebbe tutti e se ci fossero novità di cui venissi a conoscenza ci farei sicuramente un post
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.