Pubblicato il 07/03/12e aggiornato il

Come inserire bottoni animati con i link ai social network.

Dopo il cambio di template che ho fatto circa due settimane fa mi è stato chiesto come avevo fatto a inserire tutta una serie di icone con i collegamenti ai vari social network che hanno la particolarità di spostarsi leggermente quando vengono puntate dal mouse.
Si tratta in effetti di uno spostamento di un solo pixel in basso e a destra. La prima cosa da fare è procurarci i link delle pagine che vogliamo linkare mentre la seconda operazione consisterà nel trovare delle icone che soddisfino il nostro gusto estetico. Ricordo che ci sono set di icone gratuite per tutti i gusti. Basta fare delle ricerche su internet oppure andare su siti specializzati quali IconFinder o Iconza. In questo ultimo sito le icone possono essere personalizzate con una vasta gamma di colori. E' ovvio che dovranno essere scelte tutte della stessa dimensione.
Per inserirle nel blog bisogna andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare un codice come il seguente inserendo gli URL dei collegamenti e gli indirizzi delle icone presi da Picasa dove dovranno essere preventivamente caricate


<style> 
.bottonisociali a:hover { position:relative; top:1px; left:1px; } 
</style> 
<div class="bottonisociali"> 
<table cellspacing="0" cellpadding="0"> 
<tr>    
    <td style="padding-top: 0px;">     
<a href="URL_FEEDBURNER" target="_blank"/><img src="IMMAGINE_FEEDBURNER" alt="RSS" title="Iscriviti ai feed"/></a> 
    </td> 
    <td style="padding-left: 5px;"> 
<a href="http://feedburner.google.com/fb/a/mailverify?uri=ideepercomputeredinternet/zUQN" target="_blank"/><img src="URL_ISCRIZIONE-_EMAIL" alt="newsletter" title="Iscriviti alla 
newsletter"/></a> 
    </td> 
    <td style="padding-left: 5px;"> 
<a href="URL_PPAGINA_FAN" target="_blank"/><img src="ICONA_FACEBOOK" alt="facebook" title="Pagina Fan"/></a> 
    </td> 
    <td style="padding-left: 5px;"> 
<a rel="author" rel="me"  href="INDIRIZZO_PAGINA_BUSINESS_GOOGLE_PLUS" target="_blank"/><img src="ICONA_GOOGLE_PLUS" alt="googleplus-pagina" title="Pagina Google Plus"/></a>     
    </td> 
<td style="padding-left: 5px;"> 
<a href="INDIRIZZO_ACCOUNT_TWITTER" target="_blank"/><img src="ICONA_TWITTER" alt="twitter" title="Twitter"/></a> 
    </td> 
<td style="padding-left: 5px;"> 
<a href="URL_PROFILO_FACEBOOK" target="_blank"/><img src="ICONA_FACEBOOK" alt="facebook-profilo" title="Profilo Facebook"/></a> 
    </td> 
<td style="padding-left: 5px;"> 
<a href="URL_PROFILO_GOOGLE_PLUS" target="_blank"/><img src="ICONA_GOOGLE_PLUS" alt="googleplus-profilo" title="Profilo Google Plus"/></a> 
    </td> 
<td style="padding-left: 5px;"> 
<a href="URL_CANALE_YOUTUBE" target="_blank"/><img src="ICONA_YOUTUBE" alt="canale-youtube" title="Canale su Youtube"/></a>     </td> 
  </tr> 
</table></div>

Dovrà inoltre essere sostituito l'ID di questo blog su FeedBurner con quello del vostro in modo che si apra la pagina di sottoscrizione alla Newsletter. Tale dato può essere trovato accedendo al vostro account su Feedburner. Le espressioni in Title sono quelle che si visualizzeranno in un tooltip quando si passerà sopra alle icone con il cursore. Lo spostamento a destra e in basso di un pixel può essere modificato cambiando i parametri su  top:1px; left:1px;
Naturalmente si possono inserire altre icone con altri collegamenti o togliere quelle che non ci interessano. Possiamo anche posizionarle su due righe se non entrano nella sidebar. E' sufficiente inserire questo codice
</tr><tr>
esattamente dove si vuole che inizi la seconda riga delle icone e modificare la riga successiva inserendo la distanza dal margine superiore al posto di quella al margine sinistro cioè padding-top:0px; al posto di padding-left:5px; Concludo osservando che i numeri 0px e 5px sono puramente indicativi e possono essere modificati.




50 commenti :

  1. Eh eh eh, lo aspettavo questo post ;)

    RispondiElimina
  2. Lo aspettavo anche io, ma ho agito da autodidatta! Che premio ho vinto per le zero domande? :-)

    RispondiElimina
    Risposte
    1. Ma guarda che ad Ernesto piacciono le domande :)
      Vero Ernesto?...

      Elimina
  3. @AlfonsoRusso
    Nessun premio ma bravo comunque

    @Giuliana
    Mi piacciono soprattutto le domande a cui so come rispondere ^^

    RispondiElimina
  4. Giusto per tua conoscenza, quando provi a cliccare sull'icona del libro a destra per acquistarlo, esce il messaggio di non disponibilità.
    Giuliana

    RispondiElimina
    Risposte
    1. @Giuliana
      Sto revisionandolo, non tornano i numeri delle pagine dell'indice

      Elimina
  5. Ernesto ho una domanda un pò fuori luogo circa l'argomento però mi hai sempre aiutato alla grande e credo che anche questa volta non mi deluderai. Questo è il mio blog: http://symphonyilblog.myblog.it/

    e questo è di una mia amica, ho cercato su internet scervellandomi senza fine ma non sono riuscito a trovare risposta a 2 mie domande.

    1)Vedi scritto Annunci Google
    Ricette Di Pasta
    Dolci Ricette
    Ricetta X Dolci
    Ricette Torta

    bene vorrei inserirlo anche io questa opzione ma nel mio account adsense non ho trovato niente a riguardo come diamine si fa ad inserire una cosa del genere??? con temi differenti ovviamente!

    2)Vedi i margini a sinistra e destra sono un pò nascosti dai gadget io vorrei togliere quella striscia tendente al grigio che mi fa da cornice rendendo tutto bianco ma non ho idea di come riuscire in questa impresa, centra l'html sicuramente ma non so cosa eliminare!!! scusa ancora il post fuori luogo :)

    RispondiElimina
    Risposte
    1. @Andrea
      Non vedo l'URL del blog della tua amica ma credo di aver capito che ti riferisci agli "Insiemi di link" Sono dei formati di annunci che possono essere messi in orizzontale o verticale (mi sembra il tuo caso) che mostrano delle parole chiave relative al contesto della pagina che è stata aperta.
      Ho dato uno sguardo al tuo blog ma non ho visto strisce tendenti al grigio :)

      Elimina
    2. http://dentroilweb.myblog.it/ questo è il sito della mia amica ed hai capito perfettamente in quanto mi riferisco a questi che hai anche tu sopra esattamente ora -> Annunci google Style Blog Google Cloud Facebook Blog e tu vedo che li hai orizzontalmente proprio come li voglio io. Mi sai dire come si inserisco che io non ho proprio capito come si fa grazie ernesto, le strisce erano ai lati ed erano i margini del precedente template che ho dovuto estrapolare modificandolo e solo adesso ci sono riuscito ad eliminarle non so neanche come ho fatto ho tolto dei codici nel body e si sono tolte quelle maledette strisce erano sul lato sinistro forse non ci hai fatto caso. Comunque adesso mi preme inserire questi annunci se mi spieghi te ne sarei immensamente grato :) se hai qualche suggerimento per il blog che hai visto dimmi pure eh, le tue critiche sono sempre molto costruttive

      Elimina
    3. @Andrea
      Vai su I miei annunci > Contenuti > Nuova unità pubblicitaria e in Dimensioni degli annunci ci metti Unità di link 468x15 oppure 728x15, generi il codice e poi lo incolli su Aggiungi un gadget > HTML/Javascript e lo posizioni a piacere.

      Elimina
    4. Ci sono riuscito perfettamente...SEI GRANDE!!! Ernesto una domanda hai qualche suggerimento per la grafica? :)

      Elimina
    5. @Andrea
      Per carità, sono assolutamente negato per la grafica ^^^

      Elimina
    6. Vabbè fa nulla mi chiedevo se ti piaceva il mio blog, comunque ho notato che quest'altra mia amica ha nella sua pagina 4 annunci adsense (http://emozioniparole.myblog.it/) ma è legale che tu sappia?

      Elimina
    7. @Andrea
      In una pagina si possono inserire fino a tre annunci del tipo banner e tre annunci di tipo Unità di link come da commento numero 5.c. Inoltre si possono mettere due caselle di ricerca.

      Elimina
    8. 1)Quindi lei è in errore visto che ha 4 banner giusto? Perchè non capisco lei ha questi banner da più di una settimana ed essendo illegale adesense non le dice nulla!!! Vorrei capire meglio se è possibile

      2)Ernesto io vorrei farti una domanda un pò particolare, se io volessi creare un sito mio, tu hai visto il mio blog symphony però io avrei intenzione di creare un dominio www.rossovermiglio.com sapresti dirmi di cosa si necessita? visto che anche tu sei passato da un blog su blogspot ad un sito vero e proprio mi sapresti dire i passaggi che bisogna fare? Possiamo parlare anche su facebook se ti fa piacere mi chiamo Andrea Cerrone (non so perchè prima eri tra i miei amici ma adesso non ci sei più)

      spero di non disturbarti a farti queste domande ovviamente :)

      Elimina
    9. @Andrea
      Non c'entra l'illegalità. Se si mettono più di tre annunci Adsense di tipo banner per pagina semplicemente si visualizzano solo i primi tre mentre negli altri si vedono spazi vuoti. E' una cosa automatica. Se la tua amica ha quattro banner significa che uno di questi non è di Adsense ma di un altro circuito pubblicitario come potrebbe essere Sprintrade, Heyos, Simply, ecc...
      Per creare un sito del tipo www.miosito.com puoi seguire questo tutorial
      http://www.ideepercomputeredinternet.com/2009/09/come-creare-un-blog-con-un-dominio-di.html
      E' un po' vecchio ma il metodo è ancora valido, cambia solo l'interfaccia.
      Io non ti ho tolto dagli amici di FB, non tolgo mai nessuno, però non ho il tempo di interagire su Facebook per questioni inerenti al blog.
      Mi spiego meglio. Due o tre volte al giorno apro il sito e rispondo ai commenti che sono stati pubblicati. Se lo facessi anche con i messaggi su Facebook sarei sommerso visto che sono connesso tramite cellulare 24 ore su 24. Facebook mi serve solo per gestire la pagina fan e per intrattenere rapporti personali.

      Elimina
    10. Ernesto io li vedo tutti e 4 i suoi banner non ci sono spazi vuoi puoi provare tu stesso a vedere nel suo sito, sono tutti annunci di google già ho controllato per bene. Guarda anche tu e renditi conto che non sto dicendo una cavolata :)

      tu mi consiglieresti di fare questo dominio oppure continuare appoggiandomi a myblog? tuo parere personale! :)

      Elimina
    11. @Andrea
      Guarda che il blog non è su Blogger e che è possibile che uno o due annunci siano stati inseriti dal servizio, tramite accordo con Google, e non siano del proprietario del sito. Oppure può darsi che siano di un circuito pubblicitario che abbia fatto un accordo con Google stesso. Una cosa è certa "non si possono visualizzare più di tre unità pubblicitarie A. per ciascuna pagina web."
      Poi se sei anche tu su Myblog come la tua amica perché chiedi a me del dominio personalizzato che sono esperto soprattutto di Blogger?
      E' una scelta personale che aumenta la autorità del sito in cambio di qualche euro l'anno. Non aumentano le visite.

      Elimina
  6. ciao,
    volevo chiederti 2 cose:
    1)non ho capito bene cosa devo fare con picasa e con il codice html
    2)come hai fatto a mettere l'opzione risposta ai commenti.
    grazie

    RispondiElimina
  7. @Sairos
    Su Picasa devi caricare le immagini che hai scelto come icone e ne devi acquisire l'indirizzo da mettere nel codice.
    Per la risposta ai commenti ho attivato una funzione di Blogger. Se si ha un modello personalizzato si può provare con questo metodo
    http://www.ideepercomputeredinternet.com/2012/01/come-attivare-le-risposte-nidificate-ai.html

    RispondiElimina
  8. ciao ho provato ma come puoi vedere nel mio blog: www.sairosmix.blogspot.com
    le icone non si vedono.
    Cosa faccio?

    RispondiElimina
    Risposte
    1. @Sairos
      La chiave del widget è la position:relative; che può darsi non sia compatibile con alcuni modelli.

      Elimina
  9. e quindi non posso mettere icone ??

    RispondiElimina
    Risposte
    1. @Sairos
      La mia impressione è che ci siano queste possibilità
      1)Tu non abbia caricato le icone su Picasa
      2)Non abbia acquisito il loro indirizzo in modo corretto
      3)Abbia caricato le icone su un album che non hai reso pubblico

      Elimina
  10. con le modifiche che ho fatto oggi potresti (quasi) essere fiero di me, ma soprattutto di te stesso! ^_^

    RispondiElimina
  11. Ciao Ernesto, io ho una sola domanda, c'è un modo per diminuire o annullare lo spazio bianco e vuoto che compare delle icone?
    Ad esempio se posiziono le icone sotto la mia fotografia sul blog, compare prima la mia foto, poi un grande spazio vuoto e poi le icone!
    Grazie mille!!!
    Fabrizia

    RispondiElimina
    Risposte
    1. @Fabrizia
      Prova a seguire queste istruzioni
      http://www.ideepercomputeredinternet.com/2011/05/come-diminuire-lo-spazio-tra-post-e.html

      Elimina
    2. Se ti riferisci alla immagine presente sulla destra del tuo sito, se vuoi diminuire lo spazio in basso devi incollare questo codice

      #HTML35 {
      margin-bottom:-30px;
      }

      se invece vuoi diminuire lo spazio in alto bisogna incollare quest'altro codice

      #HTML35 {
      margin-top:-30px;
      }

      questo sempre sopra la riga

      ]]></b:skin>

      in Modello > Modifica HTML

      Elimina
  12. Ciao Ernesto, grazie per la tua risposta velocissima, purtroppo però ho provato ad inserire il codice html che mi hai dato, ma lo spazio prima dei pulsanti dei social network rimane li :(
    se dovesse venirti in mente qualche altro metodo fammi sapere! Grazie mille!!!

    RispondiElimina
    Risposte
    1. Sono riuscita a modificarlo inserendo il codice html invece che in modello modifica html nel widget stesso! Grazie mille!!!!

      Elimina
  13. Ciao Ernesto.. non ci crederai mai, ma per sbaglio ho cancellato tutti i bottoni che avevo creato l'ultima volta, e adesso, ho creato da zero il codice html ma ho lo stesso problema dell'altra volta! Rimane lo spazio sopra ai bottoni. Non sono non riesco a toglierlo copiando il codice che mi hai dato tu in modello> modifica HTML, ma nemmeno come avevo fatto io copiandolo nel widget!!!
    ;(
    C'è qualche altra soluzione?
    Grazie
    Fabrizia

    RispondiElimina
    Risposte
    1. @Fabrizia+-+-
      Nei commenti ne ho sentite così tante che non mi stupisco più di nulla :D
      Il codice dell'altra volta non funziona perché è cambiato l'ID del widget.
      Prova mettendo dentro l'elemento prima del codice dei bottoni la riga
      <div style="margin-top:-80px;">
      e alla fine del codice quest'altra riga
      </div>

      puoi naturalmente calibrare un numero diverso da -80

      Elimina
  14. Funziona! Grazie mille per l'aiuto!!!!

    RispondiElimina
  15. ps. visto che sei così bravo e gentile approfitto e ti chiedo un'altra cosa..: hai visto che sul mio blog dopo ogni post ho installato il widget linkwithin che mi da 5 anteprime di altri post; c'è un modo per riuscire a centrarlo?
    Grazie

    RispondiElimina
    Risposte
    1. @Fabrizia+-+-
      La classe distile di LinkWithin è linkwithin_outer quindi potresti provare a incollare nel modello prima di

      ]]></b:skin>

      il codice

      .linkwithin_outer {
      text-align:center;
      }

      Alternativamente se riesci a andare su Layout e modificare l'elemento pagina di Linkwithin puoi provare a incollare questo codice


      <div class="linkwithin_outer" style="text-align:center;">

      all'inizio e

      </div> alla fine

      Elimina
  16. Ciao Ernesto!!! Grazie mille!!!
    Purtroppo non riesco a far funzionare nessuno dei due, ma sono sicuramente io che sbaglio qualcosa!
    Buona giornata!

    RispondiElimina
  17. Ciao Ernesto, ho seguito tutto il procedimento indicato sopra, visualizzo i vari pulsanti e se ci clicco vanno al link che ho inserito, ma non visualizzo le immagini dei vari bottoni! Come posso fare???

    Grazie, gentile come sempre!

    RispondiElimina
    Risposte
    1. (vedo dei punti interrogativi!) Grazie

      Elimina
    2. @AmmPadova
      Se non vedi le immagini ma dei punti esclamativi (penso) significa che hai dei problemi con il tuo account Picasa. Prova a caricare le immagini da altra parte come ImageShack, Dropbox o altro.

      Elimina
    3. Guarda tu stesso... ecco il mio blog... (adesso ho tolto i collegamenti, ma le immagini le ho inserite!)

      http://padova24news.blogspot.it

      Elimina
    4. In pratica ho copiate il tuo codice e ho modificato solo le immagini mettendo il loro link al posto di "ICONA TWITTER", per esempio.... ma appaiono quei punti interrogativi... eppure le ho prese da Iconfinder e caricate su Picasa, come detto da te...! :(

      Elimina
    5. Queste sono le tre immagini che vorrei utilizzare e che ho caricato su Picasa... (le ho prese da Iconfinder)

      adesso le vedrai da Google+ poiché mi è più semplice fartele vedere...

      Elimina
    6. @AmmPadova
      Il problema credo che consista nel fatto che tu hai inserito i bottoni in un elemento pagina del tipo menù invece che in una sidebar.

      Elimina
    7. Niente non riesco... Non è che gentilmente, se hai tempo, potresti farmi tu il codice? Mi basterebbero tre immagini: facebook, twitter e youtube... Poi io inserirei i link... Se hai tempo e voglia ovviamente, non voglio darti lavoro... ;)

      Fammi sapere... Grazie comunque intanto! :)

      Elimina
  18. @AmmPadova
    Prova a incollare gli Url delle icone del browser in modalità in Incognito

    RispondiElimina
  19. Se si vedono correttamente allora prova a inserire il widget in una sidebar per vedere se il problema fosse quello

    RispondiElimina
  20. Errata Corrige: "nel browser" e non "del browser"

    RispondiElimina
  21. aiuto Ernesto, ho seguito il tuo articolo ma non mi appaiono le icone che ho caricato su Picasa in formato png, questa è la pagina dove ho inserito il codice

    http://ivabellini.blogspot.it/p/seguimi-con.html

    RispondiElimina
    Risposte
    1. @IvanoBellini
      Non hai acquisito i Link Diretti delle immagini in modo corretto. Una immagine l'hai inserita con questo URL
      https://picasaweb.google.com/110062990984149954475/IconeSocialNetwork#5831088143562400066
      che è sbagliato. Devi cliccare con il destro del mouse sulla immagine e poi andare su Copia URL immagine (OS Windows). Gli URL delle foto hanno questa struttura
      https://lh3.googleusercontent.com/-QhnBeZJtEo8/UMOsteiaPsI/AAAAAAAAdWc/FPeNhsihciY/s240/baia.jpg
      e se si incollano nel browser si devono vedere nella scheda

      Elimina
    2. Ho capito, ora ho corretto, grazie! :)

      Elimina

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.