Installare su Blogger i bottoni sociali di condivisione in 3D.

Come installare su Blogger i bottoni di condivisione sociale di Facebook, Twitter, Google+, ecc con effetto in tre dimensioni nella versione desktop e/o in quella mobile.

Ieri mi è stato chiesto se si potevano convertire i bottoni sociali in tre dimensioni, che servono per seguire l'amministratore del blog di Blogger nei vari social, in bottoni di condivisione con cui si possono condividere i post con un click. La differenza non è di poco conto. I bottoni di semplice collegamento aprono semplicemente il Profilo del proprietario del sito su Facebook, Twitter, Google+ mentre i bottoni di condivisione se cliccati aprono una pagina web o una finestra o una app del dispositivo mobile con cui pubblicare e quindi condividere la pagina web che si sta leggendo.

Il collegamento per aprire un profilo è semplicissimo mentre quello per la condivisione di una pagina web è più complesso e ha bisogno del javascript. In definitiva con questo articolo offrirò una alternativa ai pulsanti di condivisione con effetto hover con dei bottoni con effetto 3D.

Potranno essere aggiunti nella versione desktop e nella versione mobile. Anche per questi bottoni ho usato i CSS Sprite per minimizzare le richieste HTTP e rendere più veloce la pagina. 

COME AGGIUNGERE I CSS

Dopo aver salvato il modello si va su Modello -> Modifica HTML e si clicca a sinistra della sezione <b:skin> sulla freccetta nera per visualizzarne tutto il codice. Si cerca l'ultima riga della sezione con Ctrl+F e che è ]]></b:skin> quindi, subito sopra a questa, si incolla questo codice

/* CSS Bottoni 3D Inizio */
.icone-sociali {width: 300px;}
.bottone-rss, .bottone-twitter, .bottone-facebook, .bottone-google, .bottone-youtube, .bottone-twitter2, .bottone-pinterest, .bottone-instagram {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9WbP0QOn-NpYaTNHTWZ6Em_Gu5k5k2PWt9xm7SHlu9ymea7Sbc86siWOqRKhTQCSBLfCQUD7-4a2eBXaEXOkAGr4VwYDjOCKbAQZyvtSyhrLFnD24YaVoZ_ilfpxujQrbFFnCgxa4Svk/s590/social-ico-ottimizzate.png) no-repeat top left;
}
.bottone-facebook{ background-position: 0 0; width: 32px; height: 32px; float:left;}
.bottone-facebook:active{ background-position: -37px 0; width: 32px; height: 32px;}
.bottone-facebook:hover{ background-position: -37px 0; width: 32px; height: 32px;}
.bottone-google{ background-position: -74px 0; width: 32px; height: 32px;float:left;}
.bottone-google:active{ background-position: -111px 0; width: 32px; height: 32px;}
.bottone-google:hover{ background-position: -111px 0; width: 32px; height: 32px;}
.bottone-rss{ background-position: -148px 0; width: 32px; height: 32px; float:left;}
.bottone-rss:active{ background-position: -185px 0; width: 32px; height: 32px;}
.bottone-rss:hover{ background-position: -185px 0; width: 32px; height: 32px;}
.bottone-twitter{ background-position: -222px 0; width: 32px; height: 32px; float:left;}
.bottone-twitter:active{ background-position: -259px 0; width: 32px; height: 32px;}
.bottone-twitter:hover{ background-position: -259px 0; width: 32px; height: 32px;}
.bottone-youtube{ background-position: -296px 0; width: 32px; height: 32px; float:left;}
.bottone-youtube:active{ background-position: -333px 0; width: 32px; height: 32px;}
.bottone-youtube:hover{ background-position: -333px 0; width: 32px; height: 32px;}
.bottone-pinterest{ background-position: -444px 0; width: 32px; height: 32px; float:left;}
.bottone-pinterest:active{ background-position: -480px 0; width: 32px; height: 32px;}
.bottone-pinterest:hover{ background-position: -480px 0; width: 32px; height: 32px;}
.bottone-instagram{ background-position: -516px 0; width: 32px; height: 32px; float:left;}
.bottone-instagram:active{ background-position: -554px 0; width: 32px; height: 32px;}
.bottone-instagram:hover{ background-position: -554px 0; width: 32px; height: 32px;}
/* CSS Bottoni 3D Fine */

Come vedete c'è un solo URL di immagine  che servirà per tutte le icone modificando il posizionamento del background secondo le regole del CSS Sprite.

Si salva il modello. Questi CSS mostrano una icona diversa quando il mouse passa sulla stessa. L'effetto è quello di un bottone che si schiaccia.

AGGIUNGERE L'HTML PER LA VERSIONE DESKTOP

Si va sempre su Modello -> Modifica HTML, si cerca la riga

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

quindi si scorre il codice verso il basso fino a trovare la riga

<div class='post-footer'>

Subito sopra a questa si incolla questo codice

<!-- Icone 3D Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='icone-sociali'>
<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 class='bottone-facebook'></span></a>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Twitter'><span class='bottone-twitter'></span></a>
<a  expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Google+'><span class='bottone-google'></span></a>
<a href='http://www.youtube.com/user/parsifal32' target='_blank' title='Canale su YouTube' rel='nofollow'><span class='bottone-youtube'></span></a>
<a href='http://pinterest.com/parsifal32/' target='_blank' title='Seguimi su Pinterest' rel='nofollow'><span class='bottone-pinterest'></span></a>
<a href='http://instagram.com/parsifal32' target='_blank' title='Seguimi su Instagram' rel='nofollow'><span class='bottone-instagram'></span></a>
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Ffeeds.feedburner.com%2Fideepercomputeredinternet%2FzUQN' target='blank' title='Iscriviti ai Feed'><span class='bottone-rss'></span></a>
</div>
  <br/>
</b:if>
<!-- Icone 3D Fine -->

Si salva il modello. Il tag <br/> serve per separare i bottoni dal resto degli elementi del footer. Nel caso in cui ci fosse già dello spazio si può cancellare. Al posto degli indirizzi dei miei profili Youtube, Pinterest e Instagram vanno messi i vostri. Il discorso è più complesso per l'URL per iscriversi ai feed via Feedly. Vanno seguite le istruzioni del post su come installare il pulsante per iscriversi ai feed per avere l'URL generato dal nostro indirizzo dei feed.  Si salva nuovamente il modello. La condivisione funzionerà su Facebook, Twitter, Google+ e Feedly mentre cliccando sulla icona di Youtube, Pinterest e Instagram il lettore aprirà solo il profilo collegato. Se ci sono delle icone che non ci interessano si possono tralasciare cancellando la rispettiva riga tra <a href=...  fino a </a>.

Demo
Clicca qui

AGGIUNGERE L'HTML PER LA VERSIONE MOBILE

Si possono mostrare i bottoni anche nella versione mobile. Per poterlo fare occorre aver abilitato la versione mobile andando su Modello -> Cellulare  per poi scegliere il modello Personalizza tra quelli disponibili. I CSS saranno comuni a entrambe le versioni.

Su Modello -> Modifica HTML si cerca la riga

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

che è l'inizio delle sezione per la versione mobile. Si scorre il codice verso il basso fino a trovare la riga

<div class='post-footer'>

quindi, subito sopra, si incolla lo stesso codice della versione desktop quindi si salva il modello. Per differenziarlo da quello desktop si può aggiungere Mobile nei commenti iniziali e finali tipo

<!-- Icone 3D Mobile Fine -->

per non fare confusione nel template tra icone per il mobile e il desktop.

La differenza tra la condivisione da desktop e da mobile consiste che mentre nel desktop si apre un'altra scheda del browser, nel mobile si aprono le app di Facebook, Twitter, Google+ e Feedly.