Pubblicato il 30/05/17 - aggiornato il  | 15 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.




15 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
  3. Ciao,
    sto uscendo pazza ma nel mio HTLM in modifica non trovo questo
    come faccio a mettere le icone condividi sotto ai post se non trovo la riga dove inserirlo? ps ho dovuto scrivere la x che sta per v perche' non mi accettava il commento

    RispondiElimina
    Risposte
    1. Questa riga
      <data:post.body/>
      ci deve essere per forza. Si tratta del tag che inserisce il contenuto del post. Alternativamente cerca soltanto post.body e dovresti trovare la riga giusta. Ricordati di salvare il template
      @#

      Elimina
    2. L'ho trovato grazie ma ora quale codice devo mettere se voglio condividere il mio post solo su Facebook Twitter e Instagram?
      Mi riferisco a questo

      ecc ecc''

      poi vorrei sapere se verra' sotto la fine di ogni post e non sopra sotto il titolo.
      Grazie

      Elimina
    3. Se incolli il codice prima di < data:post.body / > i pulsanti verranno mostrati sotto il titolo prima del contenuto. Se li metti dopo < data:post.body / > i bottoni li vedrai alla fine del contenuto del post.
      Per avere solo i bottoni di Facebook Twitter e Instagram devi incollare solo i blocchi di codice che vanno da <td style='padding: 6px 8px'> a ... </td> che contengono appunto il codice di Facebook, Twitter e Instagram. Il resto del codice lo lasci uguale
      @#

      Elimina
  4. Se volessi mostrare le icone all'altezza del titolo del blog, nella parte opposta, come dovrei fare?

    RispondiElimina
  5. Ciao, grazie mille, la tua guida e i codici mi hanno aiutato tantissimo e sono riuscito a inserirli nel blog!

    RispondiElimina
  6. Ciao, grazie mille per tutti i tuoi consigli. Volevo chiederti un'informazione in merito ai bottoni social su mobile. Ho seguito questa guida ma al momento i bottoni social su mobile non mi appaiono, o meglio l'immagine rimane un quadrato con l'interno bianco sia sopra che sotto il post. Potresti aiutarmi?

    RispondiElimina
    Risposte
    1. Hai modificato in qualche modo il codice? Questo codice l'ho testato nel Tema Contempo, forse hai installato un altro Tema in cui non funziona. Comunque è una cosa strana perché le immagini dovrebbero vedersi comunque
      @#

      Elimina
    2. Ciao grazie per la pronta risposta. Guarda io uso il tema soho e ho cercato di lasciare inalterato il codice. Posso dirti che i pulsanti sono posizionati bene e si vedono sia su pc che su tablet. L'unico problema ce l'ho sul cellulare, dove si vede il riquadro, posizionato correttamente, ma è completamente bianco, senza quindi lìimmagine da me impostata. Ho provato a seguire anche un altro tuo post https://www.ideepercomputeredinternet.com/2015/07/icone-sociali-blogger-mobile.html ma per paura di incasinare il codice ho preferito prima chiederti un consiglio.

      Elimina
    3. Forse il problema risiede nel browser del tuo cellulare che non supporta le immagini inserite in quel modo. Prova a aprire la pagina con Chrome per cellulari per poi andare in basso e scegliere la visualizzazione web. Se si vedono da PC e da tablet significa che il codice funziona. Questo è certo.
      @#

      Elimina
    4. Guarda ho provato ora da Chrome per cellulare ed effettivamente si vedono benissimo. Quindi il problema era safari. Grazie mille per l'aiuto e complimenti. I tuoi consigli sono sempre utilissimi.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy