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


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.


48 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
  7. Ciao nel mio piccolo blog,sono riuscita a posizionare i pulsanti che si vedono sia su pc che su tablet. Sul cellulare si vedono solo scegliendo la visualizzazione web. Non è possibile vederli anche nella versione mobile??? Vorrei aggiungere anche la condivisione su Blogger, potresti scrivermi il codice. Grazie grazie grazie per tutto.

    RispondiElimina
    Risposte
    1. Si dovrebbero vedere anche sul cellulare. Se non è così significa che stai usando un browser diverso da Chrome o Firefox oppure che non hai impostato il modello personalizzato. Vai su Tema -> Cellulare -> Ruota dentata e scegli Personalizza
      @#

      Elimina
    2. Grazie sei stato gentilissimo. Ho provato: Tema -> Cellulare -> Ruota dentata e scegli Personalizza, ma non si vedono i bottoni, si vede solo autore e commenti, manca anche la categoria. No capisco proprio perché. Se puoi dammi una mano. Grazie

      Elimina
    3. Per visualizzarli anche nella versione mobile, oltre al codice che hai inserito in quel punto lo devi installare anche in un altro seguendo le istruzioni di questo post
      https://www.ideepercomputeredinternet.com/2016/03/blogger-icone-social-network-mobile-desktop.html
      In sostanza questo stesso codice lo devi installare come spiegato nel capitolo
      COME MOSTRARE LE ICONE SOCIALI NELLA VERSIONE MOBILE
      @#

      Elimina
  8. Ciao Ernesto desidero istallare i bottoni dei social come da post ma vorrei togliere i bottoni presenti già nel modello (semplice), potresti suggerirmi come fare? Si può eliminare il footer? Grazie anticipatamente.

    RispondiElimina
    Risposte
    1. Se hai il modello Semplice allora non e Responsive.
      Per eliminare i bottoni di condivisione ufficiali di Blogger basta andare su Layout -> Post del Blog -> Modifica. Poi si toglie la spunta agli elementi da non mostrare. Nella fattispecie ai bottoni di condivisione quindi si va su Salva
      @#

      Elimina
  9. Le ho inserite e si vedono ma sono troppo vicine, attacate come posso distanziariarle?

    RispondiElimina
    Risposte
    1. Le distanze tra i pulsanti sono impostate dai tag
      'padding: 6px 8px'
      6px è per la distanza verticale e 8px per quella orizzontale. Basta cambiare il valorte da 8px a 12px o anche di più. C'era però già scritto nel punto 3) delle Personalizzazioni.
      @#

      Elimina
  10. L'ho già fatto ma non si distanziano comunque li lascio così vanno bene uguale Grazie

    RispondiElimina
  11. Ernesto l'ultima cosa ma per inserire il pulsante avanti come quello che ha lei come faccio mi dai il link sei hai fatto un articolo su questo.

    RispondiElimina
    Risposte
    1. Per l'esattezza quello in Home page

      Elimina
    2. Non c'è nessun pulsante avanti nella home. Forse ti riferisci alla freccetta posta in basso che è una conseguenza delle freccette poste ai lati nei post. L'articolo è qui
      https://www.ideepercomputeredinternet.com/2018/08/blogger-floating-newer-older-link.html
      però non so se sia applicabile ai Temi Responsive, probabile di no
      @#

      Elimina
  12. Sto cercando di inserire nel modello Dynamic Views i bottoni social più diffusi. Di default ha solo twitter e un bruttissimo Fb. Ho provato a seguire qualche indicazione ma non trovo i riferimenti per poter inserire il codice. Probabilmente è la dannazione del modello (e mia che l'ho scelto) ma non riesco a credere che non sia possibile. Grazie

    RispondiElimina
    Risposte
    1. I modelli Dynamic Views sono particolarmente complessi da personalizzare come del resto gli ultimi modelli responsive che sono tutti diversi gli uni dagli altri. Qui c'è un elenco delle personalizzazioni che sono riuscito a introdurre ma non so se ti saranno utili anche perché sono post molto datati
      https://www.ideepercomputeredinternet.com/2013/08/blogger-template-visualizzazione-dinamica.html
      @#

      Elimina
  13. CIAO ERNESTO,COMPLIMENTI,MI HAI AIUTATO UN SACCO,MA HO DIFFICOLTà COL BOTTONE DI WHATSAPP.
    PER SPIEGARMI MEGLIO,IO NON H O MODIFICATO IL CODICE,DAL MODELLO HTML,MA HO AGGIUTO IL CODICE,DA AGGIUNGI GADGET HTML DA BLOGGER.
    HO MODIFICATO QUALCHE IMMAGINE,POI PER L RESTO FUNZIONANO TUTTI TRANNE LUI,COME MAI?
    GRAZIE MILLE ANNA

    RispondiElimina
    Risposte
    1. Il pulsante di WhatsApp è visibile
      https://lh3.googleusercontent.com/-BmtlU-Oppfc/WS0ciHvsMhI/AAAAAAAA80M/C7SBFFe-0rEk2yqZLTfpRi4toXP_iuCywCHM/s720/whatsapp.png
      quindi non lo vedi perché hai sbagliato qualcosa nel codice, basta uno spazio in più o una virgola in meno.
      P.S. Ti prego di non usare il maiuscolo. È contrario alla etichetta del web.
      @#

      Elimina
  14. Caro Ernesto, vorrei che i bottoni si vedessero (come succede a te) solo leggendo l'articolo intero e non in homepage. Cosa devo fare? Grazie e un caro saluto.

    RispondiElimina
    Risposte
    1. Devi usare i tag condizionali
      https://www.ideepercomputeredinternet.com/2016/08/blogger-conditional-tags.html
      Nella fattispecie prima di
      <table cellpadding='0' cellspacing='0'>
      devi incollare questa riga
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      e dopo la riga
      </table>
      questo altro tag
      </b:if>
      quindi salvi il Tema
      @#

      Elimina
  15. Salve, vorrei inserire anche un pulsante per condividere su Instagram. È possibile? Se sì quale sarebbe l'url per la condivisione da utilizzare?

    Per farla semplice vorrei che un articolo venga condiviso più o meno come avviene per una foto tramite il menù di condivisione dello smartphone.

    Grazie in anticipo

    RispondiElimina
    Risposte
    1. Non conosco un sistema per una condivisione automatica. Quello che si può fare è far aprire il proprio account su Instagram. Guarda se ti è utile questo post
      https://www.ideepercomputeredinternet.com/2017/01/blogger-3d-share-social-button-desktop-mobile.html

      @#

      Elimina
  16. Doverosi applausi a Ernesto Tirinnanzi per i bellissimi e peziosissimi tutorial. Ho provato a seguire il video per trasformare le foto alla Warhol con GIMP ma la mia versione 2.10.30 non presenta gli strumenti a colori come nel video tutorial. Esiste una versione diversa? Grazie

    RispondiElimina
    Risposte
    1. Ti ho risposto nel commento qui sotto. Per il tema della personalizzazione segui anche questo video tutorial
      https://youtu.be/ljxKY6HpBJM
      @#

      Elimina
  17. nel tutorial per trasformare foto alla Warhol su GIMP si vedono gli strumenti colorati e finestre diverse che non compaiono nella versione 2.10.30 (che pare sia l'ultima) che ho scaricato. Il pannello strumeni è in bianco e nero. Esiste una versione diversa di GIMP?
    Grazie per la risposta e applausi per la preziosissima e continua proposta di bei tutorial.

    RispondiElimina
    Risposte
    1. No. Si può personalizzare il layout del programma. Qui le istruzioni
      https://www.ideepercomputeredinternet.com/2020/01/gimp-temi-icone-colori-aspetto.html
      @#

      Elimina
    2. Grazie per la cortesia e la sollecitudine. Buon lavoro

      Elimina
  18. Buonasra Ernesto, da premettere che il mio blog è modello "Emporio", già dotato di finestra di condivisione social, che comprende facebook, twitter, Pinterest, il link ed e-mail, ti domando, e ti chiedo di aiutarmi per favore: è possibile aggiungere nella stessa finestra di condivisione altri social come Telegram Whatsapp o altro social, visto che a me piace molto questo tipo di condivisione invece che di aggiungere altre icone, a mio avviso, che rendono poco omogeneo tutto il complesso?....

    RispondiElimina
    Risposte
    1. Ho smesso di occuparmi dei modelli di Blogger da quando sono usciti i nuovi Temi Responsive, e Emporio è uno di questi, proprio perché la loro personalizzazione è difficile e poco utile perché i modelli hanno tutti codici diversi quindi bisognerebbe fare una personalizzazione per ogni Tema. Mi spiace non poterti aiutare 😒.
      @#

      Elimina
    2. Pazienza...grazie comunque Ernesto

      Elimina
  19. dal tuo commento del 22 gugno 2022 dici che per i nuovi Temi Responsive è difficile e poco utile inserire in modo personalizzato bottoni di condivisione social. Questo problema, che tu sappia, vale anche per il modello Dynamic Views Mosaic?

    RispondiElimina
    Risposte
    1. Anche i modelli Dynamic Views sono poco personalizzabili. Però qualcosa ho pubblicato in merito. Non so se ti può essere di aiuto
      https://www.ideepercomputeredinternet.com/2013/08/blogger-template-visualizzazione-dinamica.html
      @#

      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