Pubblicato il 13/10/12e aggiornato il

Icone con collegamenti ai social network da mettere nella sidebar.

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

Condividi su Facebook   Seguimi su Twitter   Seguimi su Google Plus   Seguimi su Pinterest

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://lh4.googleusercontent.com/-tutkZx_njkw/UHkrNF2q4gI/AAAAAAAAbKg/ksbdkxVuIj4/s45/facebook.jpg'/></a>&#160;&#160;
<a href="https://twitter.com/parsifal32" target="_blank"/><img src="https://lh3.googleusercontent.com/-eUO3hVxixtM/UHkrSghfDiI/AAAAAAAAbK4/YxXDdaTC53Y/s45/twitter.jpg" alt="Seguimi su Twitter" title="Seguimi su Twitter"/></a>&#160;&#160;
<a href="https://plus.google.com/111056841635962157738" target="_blank"><img src="https://lh6.googleusercontent.com/-sKNZ1bZ3wpk/UHkrPH8IoCI/AAAAAAAAbKo/ME2rwpbV_yY/s45/googleplus.jpg" alt="Seguimi su Google Plus" title="Seguimi su Google Plus" /></a>&#160;&#160;
<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></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 &#160; 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




22 commenti :

  1. ciao Ernesto, al post del bottone di G+ è possibile recuperare con lo stesso stile di icona anche quella di Youtube?
    grazie

    RispondiElimina
    Risposte
    1. @GaiaVincenzi
      Queste 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.

      Elimina
    2. peccato :( grazie lo stesso!

      Elimina
  2. Ciao, 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
    Risposte
    1. @ Scanner
      E' 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

      Elimina
    2. Grazie mille! Domani provo e vedo cosa combino :)

      Elimina
    3. Hey, 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:)

      Elimina
  3. Come mai, nonostante io copi il codice per come è, le icone non si centrano nella sidebar!?

    RispondiElimina
  4. ciao! non so come fai ma le icone non stanno su un'unica fila ma due a due.. come posso fare?

    RispondiElimina
  5. @ Giada
    Prova 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

    RispondiElimina
  6. Ciao, vorrei sapere se è possibile cambiare lo sfondo a queste icone. Grazie mille!

    RispondiElimina
    Risposte
    1. @ RosEd
      Queste icone non hanno sfondo. Il background viene ereditato dalle impostazioni del blog

      Elimina
    2. 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. :)

      Elimina
  7. Ciao Ernesto,
    ho 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!

    RispondiElimina
  8. @# 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
    http://www.ideepercomputeredinternet.com/2010/07/picasa-e-lo-strumento-piu-completo-per.html

    RispondiElimina
  9. Grazie mille per la tua spiegazione finalmente dopo mesi sono riuscita ad inserire i collegamenti al social network nel mio blog! Grazie mille!

    RispondiElimina
  10. Grazie, mi funzionano anche con Wordpress

    RispondiElimina
  11. Ciao,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!!!!!

    RispondiElimina
    Risposte
    1. Seguimi domani. Salvo il commento e domani ci faccio un post
      @#

      Elimina
  12. ciao
    sono un pò tonta ma pian piano ci arrivo
    potresti scrivermi il codice per usare una icona Instagram ......grazie mille

    RispondiElimina
    Risposte
    1. Le icone le puoi trovare qui
      https://www.iconfinder.com/search/?q=instagram
      Il codice da usare è
      &#160;&#160;
      <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
      @#

      Elimina
  13. grazie mille !!!!!!!
    sono riuscita pure io !!!!!!!

    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.