Come installare i bottoni di condivisione social sotto il titolo e alla fine dei post nei nuovi Temi di Blogger.

Come visualizzare i bottoni di condivisione di Facebook, Twitter, Google+, Linkedin, ecc sotto al titolo e/o alla fine del post nei Nuovi Temi di Blogger.

I Nuovi Temi di Blogger sono Responsive e quindi non c'è differenza tra il codice della versione desktop e quello della versione mobile.

Il metodo mostrato nel post su come mostrare le icone sociali nei modelli precedenti di Blogger può essere ugualmente usato anche per i Temi Responsive inserendo solo le icone per il desktop.

In questo articolo illustrerò come mostrare i pulsanti di condivisione sociale nei Temi Responsive di Blogger con alcune caratteristiche particolari. I pulsanti che collegano un sito a un social network possono essere sostanzialmente di due tipi. Ci sono i bottoni di collegamento che semplicemente aprono la pagina del Profilo dell'autore in quel social e ci sono i pulsanti che invece condividono automaticamente il post con un click aprendo una finestra di configurazione.

I pulsanti che vado a mostrare sono tutti di condivisione, possono essere tutti personalizzati individualmente nell'aspetto e possono essere mostrati subito sotto al titolo del post e/o alla fine dell'articolo.

I Nuovi Temi di Blogger hanno un sistema di condivisione ufficiale di default. Il lettore deve cliccare sulla icona di condivisione posta in alto a destra a lato del titolo. Successivamente si aprirà un popup per condividere su Facebook, Twitter, Pinterest e Google+.

Si tratta però di un metodo non immediato che può essere integrato aggiungendo altre icone più visibili. Insieme ai social network più utilizzati ho proposto anche una icona per inviare il post via email e un'altra per salvare la pagina in PDF o per stamparla. Ecco l'aspetto di un post di demo con queste icone

Ci sono icone dei social network Facebook, Twitter, Google+, LinkedIn, Telegram e WhatsApp.

Prima di procedere alla modifica del template si deve salvare il Tema per un eventuale ripristino andando su Tema -> Backup/Ripristino -> Scarica Tema. Si torna quindi su Tema -> Modifica HTML. Il codice per mostrare le icone di condivisione è il seguente:

<!-- Icone Social Network - Inizio -->
<table cellpadding='0' cellspacing='0'>
<tr> 
<td style='padding: 6px 8px'>
<a expr:href='&quot;http://m.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEhsfUUbVSbQBpYwxTjb_Vum2L85czwucwgkEQvq6Kgu-b33l2c5pFuDez918i2vTlumNB8rzUynS-FSfPK1y2hv3hXy9NiTMLPnCt29r6P1RNIC-5o-sf3SrOWokOv5p18tC98YGYMVo/s720/facebook.png' width='48'/></a>
</td>
<td style='padding: 6px 8px'>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMC-NbTFc20KHTsnVBk8GYLd2m1ae9n7F4QPkxmT_n-4PSq5LezZjblmI_-8iDionqVwv_ucIRhntVlnrhoIUuMy9onaHEoejTt-gHKVU07hdxsaJkmW-kifj_AD5Rx3q74Imoj79MjM/s720/twitter.png' width='48'/></a>
</td>
<td style='padding: 6px 8px'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6XOUwPNUJjvxhUZL5uKglWZlQKCUn6UGzrwn2gLlpLECpN1U-_aJM-MS0NS2h70BhBonxnErzqNfykpKj5Y36BDKGxuDBfdzEDr1KJt5tpi2EGbXfsKIavZll1I8GdAdTnoD3nmniH70/s720/googleplus.png' width='48'/></a>
</td>
<td style='padding: 6px 8px'>
  <a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Linkedin'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfyWCjH_MJEnCWvCSjdIxMFH0HXgSLJNfecZ1HOkeumfZVSntiA92yymGUEMmBwoBSXI-0G8jrF34IAW7dUb5Or4FYpA4cZwhUpsXYD1oewnv4TRv09qtz_aOdYH8WI1Z32plPXC9m1-A/s720/linkedin.png' width='48'/></a>
</td>
<td style='padding: 6px 8px'>
<a href='https://telegram.me/share/url?url=' onclick='window.open(&apos;https://telegram.me/share/url?url==&apos;+encodeURIComponent(location.href)+&apos;&amp;bodytext=&amp;tags=&amp;text=&apos;+encodeURIComponent(document.title));return false;' rel='nofollow' title='Invia con Telegram'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhINqFPxjgfCuB8bYqhFh5vCqQw96NOSEN64YoiLru-vhxbuFzOH-SnWhxqIN0HTEABUSpaA_I81BJbsQWY_B-f7sY4Q9VkXGwBOg-xsJ16M-vHlWGHI1D94w0hfnp20_Sqqx7PT2EPzQk/s720/telegram.png' width='48'/></a>
</td>
<td style='padding: 6px 8px'>
<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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSdkOQxVna3a3-Sp-ib5BON1uFTjgGSNLHO7Bv9rwm7Qt5ZvQQAHUkYo1bwpxry-S_9bRtlmHzikKDfLsOYuNcBICZJeInHyT2zJ-cyX-4HLwM6gjuya2WiTRhNHsh43x_gAbGp93-C_Y/s720/whatsapp.png' width='48'/></a>
</td>
<td style='padding: 6px 8px'>
<a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi via Email'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx8A_EW3zMIgstm-5I7t4BhuXQ5g3jQH-FvkynetVeM7ddZCAtajDUONSOHM1EgBaOSQADHo5QaC-Yu6ggV4Y_D3GKKyl58tbxsDY64uF0j80DuN0C9VOV9RMkjrpTMSx91Cf2DtgxaP0/s720/gmail.png' width='48'/></a>
</td>
<td style='padding: 6px 8px'>
<a href='javascript:window.print();'><img alt='stampa la pagina' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsYGgTUu-qJ5iriIAaJOZFQd_wp3foB-FqKWPLe_W9tqTmehRF47ez_FSa2BtXMoxMIYVdbU3rWf2L2Q7ewNweO7kxChV2DPBgC4INl8Un0giKB8BEL0d3ALyLZMf1Mxjf9cj7IAcF2xA/s720/stampa.png' title='stampa la pagina' width='48'/></a>
</td>
</tr>
</table>
<!-- Icone Social Network - Fine -->

POSIZIONAMENTO DEI BOTTONI SOTTO IL TITOLO DEL POST

Per visualizzare i bottoni subito sotto il titolo del post il codice precedente si incolla subito sopra a questo tag

<data:post.body/>

che è presente con una sola occorrenza nei Nuovi Temi di Blogger e che indica il contenuto dell'articolo.

Demo
Clicca qui

POSIZIONAMENTO DEI BOTTONI ALLA FINE DELL'ARTICOLO

Per posizionare i bottoni alla fine del post si cerca questa riga di codice

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

che indica il footer del blog. Si scorre il codice verso il basso fino a trovare il tag

<div class='post-bottom'>

Il codice dei bottoni va incollato subito sotto a questa riga.

PERSONALIZZAZIONI

1. Si possono modificare tutte le immagini dei bottoni sostituendone gli URL colorati di rosso. Ovviamente tali immagini debbono essere caricate su Google Foto per poi ottenerne il link diretto.
2. La dimensione delle icone è impostata a 48 pixel ma le immagini originali sono di 128 pixel. Si possono quindi scegliere  dimensioni diverse anche maggiori se lo si desidera.
3. Il tag padding fissa la distanza di separazione tra due oggetti HTML. Il tag 'padding: 6px 8px' introduce una distanza di 6 pixel per le direzioni in alto e in basso e una distanza di 8 pixel per la destra e la sinistra.
4. Il bottone di WhatsApp funzionerà solo se il post viene aperto con un dispositivo mobile mentre quello di Telegram funzionerà anche da desktop.
5. Il bottone Email aprirà automaticamente il programma predefinito per la posta elettronica.