Pubblicato il 29/03/16e aggiornato il

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://lh3.googleusercontent.com/-nNIKQ2dx0Ew/VbVwSZ943SI/AAAAAAAAviM/lSyQfZbmh6U/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.




Nessun commento :

Posta un commento

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.