Pubblicato il 30/05/17 - aggiornato il  | 2 commenti :

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






pulsanti-condivisione-sociale

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://lh3.googleusercontent.com/-RSUcXlDOlJw/WS0ciCGtDoI/AAAAAAAA80M/yTi-TKJqfOEpMigNI9a01KUEsEFDZjZmQCHM/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://lh3.googleusercontent.com/-jwcz1pI-t0w/WS0ciAdGzYI/AAAAAAAA80M/-BJ3NZomRRoMs2VJzAT7HhCGbNcyItIUwCHM/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://lh3.googleusercontent.com/-6xyavm_zn8E/WS0ciDwkHoI/AAAAAAAA80M/X1zGroa5xHEQCE3cE5R7tZgqjgzHik2bwCHM/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://lh3.googleusercontent.com/-eLpnLWToHiY/WS0knHpljmI/AAAAAAAA80w/PyiMi2x04Ts7NhOPwzkX3cgEasXIwoxXgCHM/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://lh3.googleusercontent.com/-0kgphg6b_Ro/WS0ciDWH-MI/AAAAAAAA80M/9sExNcNsrGEx97R6e3TXapjT31wk_DClACHM/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://lh3.googleusercontent.com/-BmtlU-Oppfc/WS0ciHvsMhI/AAAAAAAA80M/C7SBFFe-0rEk2yqZLTfpRi4toXP_iuCywCHM/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://lh3.googleusercontent.com/-JM8vxgiM02o/WS0tDuiYlOI/AAAAAAAA81g/HewyYuonFbgLjVroe3h8UTmnE_g32mEKACHM/s720/gmail.png' width='48'/></a>
</td>
<td style='padding: 6px 8px'>
<a href='javascript:window.print();'><img alt='stampa la pagina' src='https://lh3.googleusercontent.com/-VCo_IlDH-ZQ/WS0ciFvSMGI/AAAAAAAA80M/pSs5yGMxMdsdoFt37JmEanRiNTtHjz3mQCHM/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.


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.




2 commenti :

  1. Ce l'ho fatta! L'ho inserito su uno dei blog a cui ho cambiato il tema, al fondo del post. Non sono riuscita a trovare la seconda stringa che hai citato ma sono riuscita comunque a inserirlo subito dopo la prima, a questo punto era visibile ma me lo proponeva anche in tutte le miniature in hp, ma grazie ai tuoi mille post e in particolare questo http://www.ideepercomputeredinternet.com/2016/11/blogger-share-via-email-button.html sono riuscita anche a nasconderlo dalla hp.
    Come sempre, grazie!

    RispondiElimina
  2. Sempre io. Questa sera ho avuto numerose difficoltà per modificare proprio il mio blog principale. I codici proprio non li recepiva, non salvava le modifiche. Sul blog di prova però riuscivo a inserirlo. Non avevo messaggi di errore, però non funzionava. Poi mi sono resa conto che se chiedevo l'anteprima del modello mi segnalava degli errori nei gadget migrati dal vecchio blog, tipo il badge g+ o gli ads. Ho tolto tutto quello che potevo dal layout e sono riuscita a salvare. Lo scrivo nel caso possa accadere anche a qualcun altro perchè io ci ho perso due ore prima di capire il problema...

    RispondiElimina

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.