Come inserire e separare le icone con collegamenti agli account dei vari social network in una sidebar di Blogger.
I social network più importanti ci mettono a disposizione i codici per inserire bottoni per condividere i post spesso insieme anche a contatori. Questi bottoni qualche volta non sono in linea con la grafica del blog e allora si potrebbe prendere in esame la possibilità di crearci da soli delle icone per poi inserire i collegamenti a nostro piacimento.
Ho pubblicato un articolo in cui ho postato anche i codici per far funzionare questi bottoni in modo simile a quelli ufficiali ma solo se vengono inseriti nel modello di Blogger.
Andiamo adesso a presentare una soluzione molto più minimalista che consiste semplicemente nel collegare ciascuna icona all'account di destinazione nel social network prescelto. Il risultato è questo
Il codice usato per queste icone è il seguente
<div align="center"><a href="https://www.facebook.com/parsifal32" target='_blank'><img alt='Condividi su Facebook' title='Condividi su Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgypoqS7IWsEUWB9PQIpXZzAbSz1Inc7F56NyEHSkDLUVBSPNhHyUQ-eONJaYd1rsTl36d0cesTehBd2HuV6i4LfFts4TfJROWsRKsb7cNhdt5u5_O7kXmNfMLsahpo2nZ7b5wWqsZMF84/s45/facebook.jpg'/></a>  
<a href="https://twitter.com/parsifal32" target="_blank"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJV-mFrJe40iV9suSHzTR4wbSGdXg-sAQaIAkZzR7yvIeX32j3KO9KOBIstTMcSUkPH8Jf9LI02qwgNueuXiQ0_Z-i8ALdRELn1DbmMNzMhOz9O-onrEI0fyT3OGdvrxzccUtT2_ZiUKM/s45/twitter.jpg" alt="Seguimi su Twitter" title="Seguimi su Twitter"/></a>  
<a href="https://plus.google.com/111056841635962157738" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcNSVhmDO85ycjiZLKHwEHlFXXCACj19WZMOrcynSWYshCT7H02ZptkHmcJYgMiC-W79XKttQoiMFxoYpTaUgioVx3vKGFKgDD5uBPFeVTuiPqJexQ3zlv5-oHYLPBj2yxvW8moag4mz8/s45/googleplus.jpg" alt="Seguimi su Google Plus" title="Seguimi su Google Plus" /></a>  
<a href="http://pinterest.com/parsifal32/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitePMJbt27EDdO0Kq0zzcunrypghZRUPyB2vEMIZ8w-3in5yTBxqQ-WFaHqyDEfPq_N2MdZnNOMsG77Q0SO8mJAJZL_IGwO-pnRnI-pDM7QEDFQKKL_mR5iyJgbOA9YDNDBbxPfelxLvg/s45/pinterest.jpg" alt="Seguimi su Pinterest" title="Seguimi su Pinterest" /></a></div>
<a href="https://twitter.com/parsifal32" target="_blank"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJV-mFrJe40iV9suSHzTR4wbSGdXg-sAQaIAkZzR7yvIeX32j3KO9KOBIstTMcSUkPH8Jf9LI02qwgNueuXiQ0_Z-i8ALdRELn1DbmMNzMhOz9O-onrEI0fyT3OGdvrxzccUtT2_ZiUKM/s45/twitter.jpg" alt="Seguimi su Twitter" title="Seguimi su Twitter"/></a>  
<a href="https://plus.google.com/111056841635962157738" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcNSVhmDO85ycjiZLKHwEHlFXXCACj19WZMOrcynSWYshCT7H02ZptkHmcJYgMiC-W79XKttQoiMFxoYpTaUgioVx3vKGFKgDD5uBPFeVTuiPqJexQ3zlv5-oHYLPBj2yxvW8moag4mz8/s45/googleplus.jpg" alt="Seguimi su Google Plus" title="Seguimi su Google Plus" /></a>  
<a href="http://pinterest.com/parsifal32/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitePMJbt27EDdO0Kq0zzcunrypghZRUPyB2vEMIZ8w-3in5yTBxqQ-WFaHqyDEfPq_N2MdZnNOMsG77Q0SO8mJAJZL_IGwO-pnRnI-pDM7QEDFQKKL_mR5iyJgbOA9YDNDBbxPfelxLvg/s45/pinterest.jpg" alt="Seguimi su Pinterest" title="Seguimi su Pinterest" /></a></div>
dove sono state inserite quattro icone collegate a Facebook, Twitter, Google+ e Pinterest. Gli URL in rosso sono gli indirizzi dei nostri account sui rispettivi social e devono essere personalizzati mentre quelli in blu sono gli URL delle icone che ho scelto come dimostrazione. Anche in questo caso si possono scegliere le immagini che si crede e caricarle su Picasa. Seguendo la stessa sintassi si possono aggiungere tutte le icone che si vogliono. Il tag <div align="center"> insieme alla sua chiusura serve per centrare le icone nella sidebar.
Un accenno lo merita il simbolo   che rappresenta uno spazio. Nel codice precedente ho quindi separato con due spazi una icona dall'altra. Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice in Sezioni del sito quindi si posiziona il widget con il cursore. Sempre su questo stesso argomento ho pubblicato articoli con i codici dei
ciao Ernesto, al post del bottone di G+ è possibile recuperare con lo stesso stile di icona anche quella di Youtube?
RispondiEliminagrazie
@GaiaVincenzi
EliminaQueste icone le ho ricavate da un sito di moda di cui adesso non mi ricordo neppure il nome e che mi era stato indicato come esempio ma la icona di Youtube non credo che ci sia stata.
peccato :( grazie lo stesso!
EliminaCiao, mi interesserebbe sapere come mettere in homepage, dei tasti share dei fari social (specialmente Fb e twitter), ma che quindi non rimandino ad una data pagina ma che consentano semplicemente di condividere il blog sulla propria bacheca. Mi sono spiegato? Credi sia possibile?
RispondiElimina@ Scanner
EliminaE' possibilissimo. Devi semplicemente aggiungere una riga all'inizio del codice e una riga alla fine. Si chiamano tag condizionali. Nel tuo caso devi scegliere quello per mostrare il bottone solo in homepage. I codici dei tag condizionali li puoi trovare qui
http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html
Grazie mille! Domani provo e vedo cosa combino :)
EliminaHey, grazie mille ancora, ma ho provato e dopo vari tentativi credi di aver fallito miseramente, per fortuna che avevo un backup! Sono ancora troppo poco esperto per mettere mano all'Html credo! Tu comunque sei stato gentilissimo e si ti andrà di fare un giro sul mio blog di racconti brevi, mi farebbe molto piacere sapere cosa ne pensi:)
EliminaCome mai, nonostante io copi il codice per come è, le icone non si centrano nella sidebar!?
RispondiEliminaciao! non so come fai ma le icone non stanno su un'unica fila ma due a due.. come posso fare?
RispondiElimina@ Giada
RispondiEliminaProva a mettere < center > all'inizio e < /center > alla fine al posto di < div align="center" > e < /div >
P.S Ho aggiunto degli spazi dopo il segno di minore e prima del segno di maggiore altrimenti non mi salvava il commento. Mi sembra però strano che non ti funzioni
@LaBorsaDiMaryPoppins
Se stanno su due righe è perché hai una sidebar molto stretta e le icone non c'entrano tutte. Per tutte le icone prova a mettere una larghezza più piccola in questo modo. Faccio l'esempio di quella di Facebook
src='https://lh4.googleusercontent.com/-tutkZx_njkw/UHkrNF2q4gI/AAAAAAAAbKg/ksbdkxVuIj4/s45/facebook.jpg' width="30px"
Se 30px non basta puoi mettere un numero più basso. Quello originale è 45px
Ciao, vorrei sapere se è possibile cambiare lo sfondo a queste icone. Grazie mille!
RispondiElimina@ RosEd
EliminaQueste icone non hanno sfondo. Il background viene ereditato dalle impostazioni del blog
In realtà chiedevo se si potesse cambiare il colore di base delle icone, ma immagino di no visto che sono delle immagini semplicemente caricate sul web. Grazie comunque per la risposta. :)
EliminaCiao Ernesto,
RispondiEliminaho copiato il tuo codice e tentato di sostituire le icone che hai usato nel post, con delle icone create da me.
Sembrerà strano, ma non riesco ad ottenere un link come il tuo dopo averle caricate su picasa. Io copio l'url quando ne sto visualizzando una e incollo nel codice, ma infatti non si visualizzano sul blog. Come posso fare per ottenere un link diretto all'icona che voglio usare? Grazie mille!
@# Devi cliccare sull'immagine quindi quando è la sola che si vede nella pagina andarci sopra con il destro del mouse e selezionare Copia URL Immagine
RispondiEliminahttp://www.ideepercomputeredinternet.com/2010/07/picasa-e-lo-strumento-piu-completo-per.html
Grazie mille per la tua spiegazione finalmente dopo mesi sono riuscita ad inserire i collegamenti al social network nel mio blog! Grazie mille!
RispondiEliminaGrazie, mi funzionano anche con Wordpress
RispondiEliminaCiao,mi sono iscritta a Pinterest dove voglio pubblicizzare un pò il mio blog. Ho anche un canale youtube.Ho visto che ci sono persone che hanno il simbolo di Pinetrest sulla loro pagina You tube,io no. Come faccio ad aggiungerla? Ho i simboli di Fb e di Blogger sul mio canale youtube senza averceli messi io ,non so come sono apparsi,ma non ho la P di Pinterest..Grazie e spero di essermi spiegata bene!!!!!
RispondiEliminaSeguimi domani. Salvo il commento e domani ci faccio un post
Elimina@#
ciao
RispondiEliminasono un pò tonta ma pian piano ci arrivo
potresti scrivermi il codice per usare una icona Instagram ......grazie mille
Le icone le puoi trovare qui
Eliminahttps://www.iconfinder.com/search/?q=instagram
Il codice da usare è
  
<a href="https://www.instagram.com/parsifal32/" target="_blank"><img src="URL_ICONA_INSTAGRAM" alt="Seguimi su Instagram" title="Seguimi su Instagram" /></a></div>
L'icona prescelta la devi caricare su Picasa e ottenerne il link diretto
http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
@#
grazie mille !!!!!!!
RispondiEliminasono riuscita pure io !!!!!!!
ciao, mi piacerebbe inserire tre bottoni social.
RispondiEliminatwitter.
pagina facebook
instagram.
E' possibile? grazie in anticipo.
Certo che è possibile però lo devi fare da solo. Ti posso indicare come procedere.
Elimina1) Vai su un sito specializzato in icone tipo Iconfinder per cercare le icone giuste
2)Carica le icone su un servizio tipo Google Foto o Imgur per poi avere il link diretto
3) Aggiungi al codice altre righe per i nuovi social con la stessa sintassi delle precedenti.
Per esempio dopo la riga
<a href="http://pinterest.com/parsifal32/" target="_blank"><img src="https://lh6.googleusercontent.com/-sBwxyyGar8M/UHkrQ_Cx3WI/AAAAAAAAbKw/So42fQWyfVQ/s45/pinterest.jpg" alt="Seguimi su Pinterest" title="Seguimi su Pinterest" /></a>
dovresti incollare
  <a href="URL_Profilo_Instagram" target="_blank"><img src="URL_ICONA_INSTAGRAM" alt="Seguimi su Instagram" title="Seguimi su Instagram" /></a>
per poi aggiungere le altre righe
@#
Ciao, grazie mille ci sono riuscito!
Eliminaora sto pensando a come inserire un icona e-email con la mia e-mail e una icona cellulare col mio numero. Tu hai qualche consiglio?
Grazie in anticipo
Per la email leggi qui
Eliminahttp://www.ideepercomputeredinternet.com/2016/11/blogger-share-via-email-button.html
che comunque serve per inviare i post per email. Per mostrare un indirizzo o un numero di telefono non vede perché usare dei bottoni.
@#
ho capito grazie mille.
Eliminahttps://glb-myfashion.blogspot.it/
Ti lascio il mio blog, se ti va dagli un'occhiata.
grazie ancora
Ciao, sono neofita e sto trovando davvero utili i tuoi articoli, grazie. Mi chiedevo se ci fosse possibilità di inserire icone in slidebar dei nuovi social come insta e tiktok , non per condividere ma solo per essere reindirizzati alla homepage degli stessi. Grazie
RispondiEliminaIl post è del 2012. Adesso non mi occupo più di Blogger. Però ho pubblicato molti articoli al riguardo. Puoi cercarli con la casella di ricerca o nella Mappa del sito qui
Eliminahttps://www.ideepercomputeredinternet.com/p/mappa-del-sito-per-categorie-in-ordine.html
dove puoi cercarli anche per categorie o per parole chiave. Puoi anche consultare tutte le raccolte che ho dedicato a Blogger
https://www.ideepercomputeredinternet.com/2018/03/blogger-tutorial.html
Sono più di 2100 post che però ho interrotto circa 5 anni fa quando hanno rilasciato i nuovi modelli responsive che non sono personalizzabili.
@#