Pubblicato il 26/07/15 - aggiornato il  | 39 commenti :

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

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.


39 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. come hai risolto? a me non si vedono ...

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

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

      Elimina
    6. 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
    2. Provato anche questo, e su Mobile funziona bene :) Su Desktop invece come posso inserire la frase?

      Elimina
    3. "Condividi l'articolo su:", appena sopra i tasti per la condivisione sui vari social network. Il comando che mi hai scritto su funziona bene sulla versione Mobile, ma su Desktop non ho visto cambiamenti e quindi ho dedotto che ci volesse qualche altra modifica.
      Chiedo scusa se non mi sono spiegato bene

      Elimina
    4. Si dovrebbe vedere passando con il mouse sopra all'icona e lasciandocelo sopra per almeno un paio di secondi
      @#

      Elimina
    5. Intendo proprio una scritta "statica", per far capire ai lettori che si tratta di pulsanti di condivisione. Il codice che mi hai scritto su, in risposta al mio commento originale, funziona bene su Mobile, ma su Desktop no. Ho sbagliato qualcosa?

      Elimina
    6. Ti avevo già risposto nel commento 3.a!
      La stessa riga che ti ho indicato la puoi inserire inserire anche nel codice del desktop nella stessa posizione modificando eventualmente la dimensione dei caratteri
      @#

      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. 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
  6. scusami per il disturbo io tra i miei codici html non riesco a trovare nessuno tra quelli che mi indichi . riusciresti ad aiutarmi ?
    grazie mille

    RispondiElimina
    Risposte
    1. Se hai dei problemi nel trovare le righe di codice ti consiglio di leggere questo post
      http://www.ideepercomputeredinternet.com/2016/11/blogger-template-manage.html
      e eventualmente guardati anche il video esplicativo
      @#

      Elimina
  7. Salve, avevo un'altra domanda da fare:
    Vorrei "rinfrescare" un po i pulsanti con alcuni personalizzati da me, ma solo nella versione Desktop.
    In pratica vorrei lasciare i pulsanti quadrati sulla versione Mobile, mentre vorrei usare dei pulsanti rettangolari sulla versione Desktop.
    Spero di aver spiegato bene, intanto ti ringrazi :)

    RispondiElimina
    Risposte
    1. Devi creare altri CSS per ciascun bottone da mostrare nel mobile. Per esempio
      #facebookbuttondesktop a {display: block; width: 60px; height: 40px; margin: 0 auto; background: url(URL_ICONA)
      .....
      per poi modificare anche la seonda parte del codice in questo modo
      span id='facebookbuttondesktop'...
      e questo per tutte le icone da visualizzare nella versione desktop

      @#

      Elimina
  8. Salve, molto interessante il post, però non riesco a capire perché dopo aver inserito i codice nell'HTML nel mio blog, non mi salva l'aggiornamento. Ho modificato altre volte il codice HTML del mio blog, é mi ha sempre salvato tutto. Questa volta, quando clicco sul pulsante "salva tema" non succede nulla. Non capisco se sono i codici o il mio blog che è andato in tilt. Mi sapresti aiutare?
    Grazie buona giornata

    RispondiElimina
  9. Non succede nulla in che senso? Il Tema dà errore? Guardi l'anteprima e non vedi nulla? Oppure dopo aver salvato il template aprendo un post qualsiasi non vedi i bottoni?
    Solo nel terzo caso si può parlare di non funzionamento dei bottoni
    @#

    RispondiElimina
    Risposte
    1. Grazie per la risposta immediata.
      Deduco allora che sia un mio problema. Quando clicco sul pulsante per salvare i codici, non mi esce una volta finito di caricare "impostazioni salvate, visualizza tema"
      Vado ugualmente a guardare l'anteprima e i pulsanti non escono. Torno indietro a guardare i codici nell'HTML e non ci sono più. Mah! Vabbè grazie lo stesso, anzi scusa per il disturbo

      Elimina
  10. Come sospettavo. Tu non salvi il Tema, guardi solo l'anteprima. Nella anteprima ovviamente non si vede nulla perché i bottoni vengono aggiunti nei post e non nella homepage che è quella che si vede nell'anteprima.
    Se riprovi ricordati sempre di salvare il tema per un eventuale ripristino. Quello conta, non l'anteprima, io quella non la guardo mai
    @#

    RispondiElimina
  11. Ciao Ernesto vorrei inserire nel mio blog le icone di condivisione per fb, pint, g+ e posta elet. le vorrei piccole, in orizzontale nel layout di dx. Come posso fare? Grazie e buon Anno.

    RispondiElimina
    Risposte
    1. Purtroppo non c'è un sistema in cui uno può scegliere le icone da inserire à la carte. Prova a seguire questo post
      http://www.ideepercomputeredinternet.com/2017/05/blogger-bottoni-animati-desktop-mobile.html
      poi potrai eliminare le icone che non ti servono e scegliere se mostrarle sotto il titolo e/o alla fine del post, nella versione desktop e/o in quella mobile
      @#

      Elimina
  12. Salve, per motivi di "restyling" del mio blog ho deciso di rimuovere questi pulsanti di condivisione eliminando i codici di riferimento, ma nel momento di salvare il Modello spunta il seguente errore:

    Errore di analisi XML, riga XXXX, colonna X : The element type "b:skin" must be terminated by the matching end-tag ""

    Come potrei fare per risolvere? Grazie in anticipo

    RispondiElimina
    Risposte
    1. Hai selezionato male il codice. Dall'avviso sembra che tu abbia selezionato anche la riga finale della sezione b:skin cioè ]] > < /b:skin > (senza spazi)
      @#

      Elimina
    2. Tutto perfetto, non mi ero accorto in effetti che selezionavo male il codice. Grazie, prezioso come sempre ;)

      Elimina
  13. Salve Ernesto, i pulsanti di condivisione su Fb e Whatsapp funzionano solo parzialmente,poichè aprono l'app ma non condividono l'url del link. Grazie mille in anticipo e complimenti per il sito!

    RispondiElimina
    Risposte
    1. Intendi da mobile?
      Ho appena controllato. Se la pagina viene aperta con Chrome tutto funziona perfettamente. Con WhatsApp si apre l'app in cui scegliere il contatto. Con Facebook si apre la pagina relativa e per condividere occorre effettuare l'accesso. Il link viene aggiunto automaticamente in entrambi i casi
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy