Pubblicato il 29/03/16 - aggiornato il  | 15 commenti :

Come installare in Blogger i bottoni dei social nella versione desktop e in quella mobile.

Come installare su Blogger i pulsanti per la condivisione su Facebook, Twitter, Google+, WhatsApp, ecc visibili nella versione desktop e in quella mobile.
Con questo post ho intenzione di fare un riassunto che faccia un po' di ordine sul tema della installazione dei pulsanti di condivisione sociale da mostrare sia nella versione desktop sia nella versione mobile di Blogger. Questo tema l'ho affrontato più volte e le risorse sono suddivise in più post che è difficile reperire con la ricerca del sito.

L'obiettivo è quello di mostrare alla fine dell'articolo tutta una serie di icone sociali che permettano la condivisione del post o l'apertura del profilo dell'autore nei vari social network come Facebook, Twitter, Google+, WhatsApp, Youtube, Instagram, ecc. Alcuni pulsanti sono utili in entrambe le versioni mentre altri sono importanti solo nel mobile (WhatsApp) o solo nel desktop (Youtube).

Per ottimizzare al meglio il sito occorre unificare tutte le icone sociali in una sola immagine creando un CSS Sprite in modo che venga richiesto dalla pagina del blog un solo indirizzo HTTP per caricare le varie immagini. La selezione di una immagine rispetto a un'altra viene fatta tramite le loro coordinate di ascisse e ordinate. È anche utile inserire una seconda riga di icone per mostrare un effetto hover al passaggio del cursore. L'immagine che utilizzeremo sarà la seguente

icone-sociali-css-sprite

e che ci permetterà di richiamare una determinata icona aggiungendo il tag background-position.

COME NASCONDERE IL PULSANTE DI GOOGLE+ NEL MOBILE


Se si vogliono mostrare le icone sociali anche nella versione mobile bisogna fare un po' di pulizia e eliminare sia il bottone di Google+ sia il link all'autore del post. Per la prima operazione vi rimando all'articolo in cui è illustrato come nascondere il bottone con contatore di Google Plus mentre per nascondere il nome dell'autore bisogna andare su Modello > Modifica HTML, cercare il tag </head> e, subito sopra, incollare questo codice

<b:if cond='data:blog.isMobile'>
<style>
span.post-author.vcard &gt; span &gt; a {display:none;}
</style>
</b:if>

per poi salvare il modello. Il risultato sarà quello di eliminare entrambi gli elementi

nascondere-bottone-google-plus-link-profilo

come si potrà constatare tramite lo strumento Screenfly.

COME INSERIRE I CSS PER MOBILE E DESKTOP


Se su Modello > Cellulare si è impostata sul l'opzione per la visualizzazione della versione mobile e se si è scelto il modello Personalizza allora potranno essere caricati i CSS sia per il mobile sia per il desktop con uno stesso codice. Si va su Modello > Modifica HTML, si clicca sulla freccetta nera a sinistra della sezione <b:skin> che si trova nelle prime 10-20 righe per visualizzarne tutto il codice quindi tramite Ctrl+F si cerca la riga ]]></b:skin> e, subito sopra, ci 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,#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{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZaf-8QphS4X3zz5RYQvlgNTAUmoRqIrm6ef1hzzdPp225x330H2fp4bbeAATA84R5IhKtfuTClexo-c718uzu2QqvjMnVWann1upJoYuKB-s2iRIvGsnZH9mnVUTK9Gay8Ml8D0T4Ion/s432-Ic42/icone-sociali-2.png); no-repeat; transition:all 0.2s ease 0s;}
#facebookbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:0 0;}
#twitterbutton a {display: block; width: 47px; height: 48px; margin: 0 auto; background-position:-47.6px 0;}
#googleplusbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-95.5px 0;}
#linkedinbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-143.5px 0;}
#feedlybutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-191.5px 0;}
#whatsapp_button1 a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-239.5px 0px;}
#youtubebutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-287.5px 0;}
#pinterestbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-335.5px 0;}
#instagrambutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-383.5px 0;}
#facebookbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:0 -48px;}
#twitterbutton a:hover {display: block; width: 47px; height: 48px; margin: 0 auto; background-position:-47.6px -48px;}
#googleplusbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-95.5px -48px;}
#linkedinbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-143.5px -48px;}
#feedlybutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-191.5px -48px;}
#whatsapp_button1 a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-239.5px -48px;}
#youtubebutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-287.5px -48px;}
#pinterestbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-335.5px -48px;}
#instagrambutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-383.5px -48px;}
/* CSS ICONE SOCIALI FINE */

Si salva il modello. L'unica immagine caricata nel template è quella con l'URL colorato di rosso.

COME MOSTRARE LE ICONE SOCIALI NELLA VERSIONE DESKTOP


Per visualizzare le icone nelle due versioni mobile e desktop dobbiamo incollare per due volte il codice HTML delle icone che sono state allineate usando i tag di una tabella. Dopo aver salvato il template si torna su Modello > Modifica HTML e si cerca la riga

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

Si scorre lentamente il codice verso il basso fino a trovare la riga

<div class='post-footer'>

Subito sopra a questa si incolla questo 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 -->

quindi si salva il modello. Queste icone saranno visibili solo nei post e non nella homepage e quindi non nella Anteprima che si può aprire opzionalmente prima del salvataggio del template. Non è stata inserita la icona di WhatsApp perché non funzionante da desktop. Se il navigatore cliccherà sulle icone di Facebook, Twitter, Linkedin o Google Plus si aprirà una finestra popup con la condivisione dell'articolo già predisposta. Cliccando sul pulsante di Youtube, Instagram e Pinterest ci sarà semplicemente l'apertura del profilo dell'autore del sito. Bisognerà quindi sostituire gli URL colorati di rosso che si riferiscono ai miei profili.
icone-sociali-effetto-hover
Per quello che riguarda Feedly bisogna che consultiate il post sulla installazione del pulsante di Feedly per la sua personalizzazione. Ciascuna icona sarà distanziata di 10 pixel dal contenuto che si trova sopra o sotto di essa e di 20 pixel (10+10) dalla icona adiacente. Se si desiderano eliminare delle singole icone va individuato il corrispondente blocco di codice e cancellarlo tutto a partire dall'inizio della cella  <td style='padding:10px;'> fino alla sua chiusura </td>.

 

COME MOSTRARE LE ICONE SOCIALI  NELLA VERSIONE MOBILE


Si torna su Modello > Modifica HTML e si cerca la riga della sezione mobile che è la seguente

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

Si scorre lentamente il codice verso il basso fino a trovare la riga

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

e, subito sopra a questa, si incolla il 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 -->

Si salva il modello. Lo spazio di separazione tra le icone scelto per il mobile è di 5 pixel invece dei 10 pixel che avevamo scelto per il desktop. Le icone mostrate nel mobile sono quelle di Facebook, Twitter, Google+, Linkedin, Feedly e WhatsApp. Le sei icone potranno essere visibili su una stessa linea anche nei cellulari oltre che nei tablet con una risoluzione superiore ai 300 pixel

icone-dispositivi-mobili-blogger

La condivisione da mobile funzionerà per Facebook, Twitter, Google+ e Linkedin mentre con Feedly e WhatsApp si apriranno le app omonime se presenti nel dispositivo di chi condivide.


15 commenti :

  1. ciao! ho provato ma le icone non compaiono. Eppure in passato ero riuscita ad inserirle e poi inspiegabilmente mi sono sparite.
    Che può essere successo????
    Grazie

    RispondiElimina
    Risposte
    1. Le icone sono presenti. Eccole qua
      https://lh3.googleusercontent.com/-nNIKQ2dx0Ew/VbVwSZ943SI/AAAAAAAAviM/lSyQfZbmh6U/s432-Ic42/icone-sociali-2.png
      Forse le hai installate in una sezione sbagliata. Magari le hai messe per il mobile e hai guardato la versione desktop o viceversa
      @#

      Elimina
  2. Dunque, ho eliminato il bottone del contatore Google plus e il nome dell'autore (controllato ed andato a buon fine), incollato i CSS sopra la riga ]]> , incollato il codice nella sezione mobile (salvato ed effettivamente presente), ma i pulsanti non si vedono. Cos'ho sbagliato?

    RispondiElimina
  3. Se sei sicura di averlo incollato nella sezione giusta prova a modificare la posizione incollandolo sotto la riga indicata invece che sopra. Oppure prova con un altra riga simile con 1 o 3 al posto del 2
    @#

    RispondiElimina
    Risposte
    1. La sezione è giusta, ho copiato e incollato quella qui presente. Ho provato con la riga simile con l'1 (col 3 non c'è), sia incollando sopra che incollando sotto, ma non si vedono nemmeno così.. :-/

      Elimina
    2. Allora forse su Modello -> Cellulare -> Sì. Mostra... non hai scelto il Modello Personalizza ma un altro standard che quindi non permette le personalizzazioni
      @#

      Elimina
  4. Si, ho anche il modello personalizzato..

    RispondiElimina
  5. Io ho inserito il codice sopra al tag "post-footer", il problema e che le icone social vengono visualizzate sotto ad ogni post nella homepage quando in realtà dovrebbero essere visualizzate solo nei singoli post

    RispondiElimina
    Risposte
    1. Non ti funziona questa riga di codice
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      che aggiunge le condizionalità. Controlla che sia stata copiata bene
      @#

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. Ho risolto lo stesso, grazie mille

      Elimina
  6. Ciao Ernesto. Sti provando a mettere le icone social nel footer del mio layout, ma sto riscontrando alcune difficoltà. Ho provato ad inserire icone svg ma dal cellulare escono sfocate e inoltre non riesco a centrarle. Ho provato ad usare div align="center" ma non funziona. Sapresti darmi qualche dritta? Ti ringrazio.

    RispondiElimina
    Risposte
    1. Su questo tema il post più recente che ho pubblicato è questo. Sono poi le icone che sono ancora presenti in questo blog. Non vedo la necessità di usare immagini SVG che potrebbero anche non essere supportate da Blogger. Credo che nei post non vengano accettate.
      @#

      Elimina
  7. Ho provato a caricarle in PNG ma da mobile escono sgranate. Ora ho inserito queste in HTML (https://sprock-anastacia.blogspot.com/), ma così come per quelle in PNG non so come centrarle e spaziarle.

    RispondiElimina
  8. Sono riuscito a spaziarle, ma non a centrarle :( Quando inserisco div align center non mi fa poi salvare il modello

    RispondiElimina

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