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
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 > span > a {display:none;}
</style>
</b:if>
<style>
span.post-author.vcard > span > a {display:none;}
</style>
</b:if>
per poi salvare il modello. Il risultato sarà quello di eliminare entrambi gli elementi
come si potrà constatare tramite lo strumento Screenfly.
COME INSERIRE I CSS PER MOBILE E DESKTOP
Se su Modello > Cellulare si è impostata sul Sì 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 */
#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 == "item"'>
<table cellpadding='0' cellspacing='0'>
<tr>
<td style='padding:10px;'>
<span id='facebookbutton'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Condividi su Facebook'/></span>
</td>
<td style='padding:10px;'>
<span id='twitterbutton'><a expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url' rel='nofollow' target='_blank' title='Condividi su Twitter'/></span>
</td>
<td style='padding:10px;'>
<span id='googleplusbutton'><a expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Condividi su Google+'/></span>
</td>
<td style='padding:10px;'>
<span id='linkedinbutton'><a expr:href='"http://www.linkedin.com/shareArticle?url=" + 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 -->
<b:if cond='data:blog.pageType == "item"'>
<table cellpadding='0' cellspacing='0'>
<tr>
<td style='padding:10px;'>
<span id='facebookbutton'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Condividi su Facebook'/></span>
</td>
<td style='padding:10px;'>
<span id='twitterbutton'><a expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url' rel='nofollow' target='_blank' title='Condividi su Twitter'/></span>
</td>
<td style='padding:10px;'>
<span id='googleplusbutton'><a expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Condividi su Google+'/></span>
</td>
<td style='padding:10px;'>
<span id='linkedinbutton'><a expr:href='"http://www.linkedin.com/shareArticle?url=" + 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.
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 == "item"'>
<table cellpadding='0' cellspacing='0'>
<tr>
<td style='padding-top: 5px;'>
<span id='facebookbutton'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + 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='"https://twitter.com/intent/tweet?url=" + 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='"https://plus.google.com/share?url=" + 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='"http://www.linkedin.com/shareArticle?url=" + 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='"whatsapp://send?text=" + data:post.title + "-" + data:post.url' title='Condividi su WhatsApp'/></div>
</td>
</tr>
</table>
</b:if>
<!-- Icone sociali per il mobile fine -->
<b:if cond='data:blog.pageType == "item"'>
<table cellpadding='0' cellspacing='0'>
<tr>
<td style='padding-top: 5px;'>
<span id='facebookbutton'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + 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='"https://twitter.com/intent/tweet?url=" + 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='"https://plus.google.com/share?url=" + 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='"http://www.linkedin.com/shareArticle?url=" + 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='"whatsapp://send?text=" + data:post.title + "-" + 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
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.
ciao! ho provato ma le icone non compaiono. Eppure in passato ero riuscita ad inserirle e poi inspiegabilmente mi sono sparite.
RispondiEliminaChe può essere successo????
Grazie
Le icone sono presenti. Eccole qua
Eliminahttps://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
@#
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?
RispondiEliminaSe 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@#
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ì.. :-/
EliminaAllora forse su Modello -> Cellulare -> Sì. Mostra... non hai scelto il Modello Personalizza ma un altro standard che quindi non permette le personalizzazioni
Elimina@#
Si, ho anche il modello personalizzato..
RispondiEliminaIo 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
RispondiEliminaNon ti funziona questa riga di codice
Elimina<b:if cond='data:blog.pageType == "item"'>
che aggiunge le condizionalità. Controlla che sia stata copiata bene
@#
Questo commento è stato eliminato dall'autore.
EliminaHo risolto lo stesso, grazie mille
EliminaCiao 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.
RispondiEliminaSu 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@#
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.
RispondiEliminaSono riuscito a spaziarle, ma non a centrarle :( Quando inserisco div align center non mi fa poi salvare il modello
RispondiElimina