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='"http://m.facebook.com/sharer.php?u=" + data:post.url + "&title=" + 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='"https://twitter.com/intent/tweet?url=" + 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='"https://plus.google.com/share?url=" + 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='"http://www.linkedin.com/shareArticle?url=" + 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('https://telegram.me/share/url?url=='+encodeURIComponent(location.href)+'&bodytext=&tags=&text='+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='"whatsapp://send?text=" + data:post.title + "-" + 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='"mailto:?subject=" + data:post.title + "&body=" + 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 -->
<table cellpadding='0' cellspacing='0'>
<tr>
<td style='padding: 6px 8px'>
<a expr:href='"http://m.facebook.com/sharer.php?u=" + data:post.url + "&title=" + 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='"https://twitter.com/intent/tweet?url=" + 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='"https://plus.google.com/share?url=" + 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='"http://www.linkedin.com/shareArticle?url=" + 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('https://telegram.me/share/url?url=='+encodeURIComponent(location.href)+'&bodytext=&tags=&text='+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='"whatsapp://send?text=" + data:post.title + "-" + 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='"mailto:?subject=" + data:post.title + "&body=" + 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
- 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.
- 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.
- 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.
- Il bottone di WhatsApp funzionerà solo se il post viene aperto con un dispositivo mobile mentre quello di Telegram funzionerà anche da desktop.
- Il bottone Email aprirà automaticamente il programma predefinito per la posta elettronica.
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.
RispondiEliminaCome sempre, grazie!
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...
RispondiEliminaCiao,
RispondiEliminasto 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
Questa riga
Elimina<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
@#
L'ho trovato grazie ma ora quale codice devo mettere se voglio condividere il mio post solo su Facebook Twitter e Instagram?
EliminaMi riferisco a questo
ecc ecc''
poi vorrei sapere se verra' sotto la fine di ogni post e non sopra sotto il titolo.
Grazie
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.
EliminaPer 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
@#
senza
EliminaSe volessi mostrare le icone all'altezza del titolo del blog, nella parte opposta, come dovrei fare?
RispondiEliminaMolto complicato
RispondiElimina@#
Ciao, grazie mille, la tua guida e i codici mi hanno aiutato tantissimo e sono riuscito a inserirli nel blog!
RispondiEliminaCiao, 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?
RispondiEliminaHai 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@#
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.
EliminaForse 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@#
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.
EliminaCiao 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.
RispondiEliminaSi 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@#
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
EliminaPer 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
Eliminahttps://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
@#
Grazie ci sono riuscita.
EliminaCiao 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.
RispondiEliminaSe hai il modello Semplice allora non e Responsive.
EliminaPer 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
@#
Le ho inserite e si vedono ma sono troppo vicine, attacate come posso distanziariarle?
RispondiEliminaLe distanze tra i pulsanti sono impostate dai tag
Elimina'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.
@#
L'ho già fatto ma non si distanziano comunque li lascio così vanno bene uguale Grazie
RispondiEliminaErnesto 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.
RispondiEliminaPer l'esattezza quello in Home page
EliminaNon 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
Eliminahttps://www.ideepercomputeredinternet.com/2018/08/blogger-floating-newer-older-link.html
però non so se sia applicabile ai Temi Responsive, probabile di no
@#
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
RispondiEliminaI 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
Eliminahttps://www.ideepercomputeredinternet.com/2013/08/blogger-template-visualizzazione-dinamica.html
@#
Grazie!
EliminaCIAO ERNESTO,COMPLIMENTI,MI HAI AIUTATO UN SACCO,MA HO DIFFICOLTà COL BOTTONE DI WHATSAPP.
RispondiEliminaPER 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
Il pulsante di WhatsApp è visibile
Eliminahttps://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.
@#
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.
RispondiEliminaDevi usare i tag condizionali
Eliminahttps://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 == "item"'>
e dopo la riga
</table>
questo altro tag
</b:if>
quindi salvi il Tema
@#
Grazie. Fatto
RispondiEliminaSalve, vorrei inserire anche un pulsante per condividere su Instagram. È possibile? Se sì quale sarebbe l'url per la condivisione da utilizzare?
RispondiEliminaPer 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
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
Eliminahttps://www.ideepercomputeredinternet.com/2017/01/blogger-3d-share-social-button-desktop-mobile.html
@#
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
RispondiEliminaTi ho risposto nel commento qui sotto. Per il tema della personalizzazione segui anche questo video tutorial
Eliminahttps://youtu.be/ljxKY6HpBJM
@#
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?
RispondiEliminaGrazie per la risposta e applausi per la preziosissima e continua proposta di bei tutorial.
No. Si può personalizzare il layout del programma. Qui le istruzioni
Eliminahttps://www.ideepercomputeredinternet.com/2020/01/gimp-temi-icone-colori-aspetto.html
@#
Grazie per la cortesia e la sollecitudine. Buon lavoro
EliminaBuonasra 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?....
RispondiEliminaHo 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@#
Pazienza...grazie comunque Ernesto
Eliminadal 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?
RispondiEliminaAnche i modelli Dynamic Views sono poco personalizzabili. Però qualcosa ho pubblicato in merito. Non so se ti può essere di aiuto
Eliminahttps://www.ideepercomputeredinternet.com/2013/08/blogger-template-visualizzazione-dinamica.html
@#