Pubblicato il 10/03/12e aggiornato il

Icone sociali con effetto 3D.

Realizzare e installare dei bottoni in tre dimensioni per condividere i post sui social network.
Land of Web ha creato tutta una serie di icone sociali di diverse dimensioni che possono essere utilizzate per creare un effetto tridimensionale al passaggio del mouse oltre a inserire i bottoni per i collegamenti alla pagina Facebook, all'account Twitter, a quello Google Plus e altri ancora.

Se cliccate su Download scaricherete un file in formato ZIP con tutta una serie di icone a 32px, 64px, 128px e 256px. L'idea è quella di unire queste icone in una striscia di quelle che vogliamo visualizzare nel nostro sito in modo da metterne due per ciascun social come nella seguente immagine



La composizione precedente è stata realizzata da Pizcos.net. Come vedete ciascuna icona è stata affiancata a quella da visualizzare quando diventa attiva perché puntata con il mouse. La difficoltà sta nel configurare le distanze in modo da poter visualizzare l'icona giusta. Chi vuole aggiungere altri social deve quindi inserire i relativi CSS dopo essersi creata l'immagine complessiva di tutti i bottoni da inserire. Le icone a disposizione sono relative a Behance, Blogger, Deviantart, Digg, Dribbble, Facebook, Flickr, Forrst, Google+, RSS Feed, mStumbleupon, Tumblr, Twitter e Youtube. L'esempio seguente è relativo a icone da 64 pixel
piccole-icone-demo


L'installazione di questi bottoni diventa semplicissima dopo che si è fatto il lavoro grafico. Basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare il seguente codice

<style type="text/css">
/* Bottoni Social Network */
.icone-sociali {width: 300px;}
.bottone-rss, .bottone-twitter, .bottone-facebook, .bottone-google{ background: url(https://lh4.googleusercontent.com/-Dooal0sIMK8/T1sZczq182I/AAAAAAAAWzc/yFfpbGfyP24/s582/socialico.png) no-repeat top left; }
.bottone-facebook{ background-position: 0 0; width: 64px; height: 64px; float:left;}
.bottone-facebook:active{ background-position: -74px 0; width: 64px; height: 64px;}
.bottone-facebook:hover{ background-position: -74px 0; width: 64px; height: 64px;}
.bottone-google{ background-position: -148px 0; width: 64px; height: 64px;float:left;}
.bottone-google:active{ background-position: -222px 0; width: 64px; height: 64px;}
.bottone-google:hover{ background-position: -222px 0; width: 64px; height: 64px;}
.bottone-rss{ background-position: -296px 0; width: 64px; height: 64px; float:left;}
.bottone-rss:active{ background-position: -370px 0; width: 64px; height: 64px;}
.bottone-rss:hover{ background-position: -370px 0; width: 64px; height: 64px;}
.bottone-twitter{ background-position: -444px 0; width: 64px; height: 64px; float:left;}
.bottone-twitter:active{ background-position: -518px 0; width: 64px; height: 64px;}
.bottone-twitter:hover{ background-position: -518px 0; width: 64px; height: 64px;}
</style>
<div class="icone-sociali">
<a href="URL DEI FEED" target="_blank" title="Sottoscrivi il feed" rel="nofollow"><span class="bottone-rss"></span></a> <a href="URL DI TWITTER" target="_blank" title="Seguimi su Twitter" rel="nofollow"><span class="bottone-twitter"></span></a> <a href="URL DI FACEBOOK" target="_blank" title="Segui su Facebook" rel="nofollow"><span class="bottone-facebook"></span></a> <a href="URL DI GOOGLE PLUS" target="_blank" title="Seguimi su Google Plus" rel="nofollow"><span class="bottone-google"></span></a>
</div>

Si salva e si posiziona a piacere. Le altezze delle icone sono tutte di 64 pixel visto che è stata scelta quella misura. Essendo in questo caso in numero di 4 è stata scelta la larghezza di 300 pixel che ha permesso di inserire dello spazio tra icona e icona. Nel CSS del codice si può vedere che ciascun bottone ha l'opzione normale e quella active e hover che hanno gli stessi parametri. A seconda di come si è creata l'immagine il cui URL è visualizzato in rosso nelle prime righe, dobbiamo configurare le distanze dello sfondo in modo che appaia l'icona corrispondente quando si punta con il mouse. Questi numeri però possono benissimo essere calibrati al meglio in fase di test dei bottoni. Ovviamente dobbiamo inserire gli URL dei Feed e dei nostri account nei vari social. Se si vuole inserire un altro bottone dobbiamo modificare l'immagine e mettere altre due icone. Mettiamo che si voglia aggiungere Youtube, dobbiamo allora inserire .bottone-youtube  prima di { background: url(https ….  e .bottone-youtube, .bottone-youtube:acrtive, e .bottone-youtube:hover con i relativi parametri del posizionamento.

Aggiornamento: Domenico Leonardi, un lettore del blog, ha realizzato una immagine che consente anche di visualizzare il bottone di Youtube in tre dimensioni accanto agli altri quattro. Se interessati consultate il lavoro di Domenico in questo post della pagina fan del blog





42 commenti :

  1. Oh no, Ernesto, proprio adesso che ho appena inserito i bottoni animati del tuo recente articolo mi presenti questa meraviglia?... ^^

    RispondiElimina
  2. Ciao Ernesto, il mio modello di blog inserisce la cornice alle immagini, secondo te l'effetto 3d sarebbe rovinato o posso fare un tentativo?

    RispondiElimina
  3. @Giuliana
    Sono piaciuti molto anche a me

    @Silvia
    I bottoni non vengono inseriti nei post ma in un widget quindi non penso che il tuo modello inserisca il bordo automaticamente anche nelle immagini delle sidebar. Comunque puoi provare incollando anche il codice così com'è senza collegamenti. Per testare ci vuole meno di un minuto.

    RispondiElimina
    Risposte
    1. Funziona, avevi ragione! ^_^ Grazie mille!

      Elimina
  4. Ernesto non c'è quello anche con la busta da lettera? Così li sostituivo da me :)

    RispondiElimina
    Risposte
    1. @SoffioDiDea
      Quelli che ci sono sono nel file ZIP ... A creare i due pulsanti da soli è un lavoro di grafica mica da ridere ;)

      Elimina
  5. Bello l'effetto.
    Ma se dovessi inserire altri "bottoni" presenti nella serie Land of Web
    come faccio ad inserirli in https://lh4.googleusercontent.com/-Dooal0sIMK8..."?

    Grazie

    RispondiElimina
    Risposte
    1. @pier
      ci vuole un grosso lavoro di grafica, si devono aggiungere due nuove icone per ogni social e inserire i relativi fogli di stile. E' accennato nel post

      Elimina
  6. Grazie ... mi sa che lascio perdere.
    Però se c'era Youtube ...

    RispondiElimina
  7. Semplicemente spettacolare già inseriti nel mio blog

    Grazie per tutte le preziosissime guide che pubblichi

    RispondiElimina
  8. Ciao Ernesto, ho inserito il codice, le icone si vedono ma non danno segni di vita, mi sai dire dove sbaglio, questo è il blog..www.mioiphonex.com

    RispondiElimina
  9. @Antonio
    Non ti saprei dire. Mi sembra che la seno funzioni.

    RispondiElimina
  10. grazie! bellissimo. ho solo cambiato i titoli traducendoli in inglese per il mio blog.

    RispondiElimina
  11. Non è che potresti pubblicare il codice delle icone sociali
    esattamente come sono presenti in questo tuo blog?
    Grazie

    RispondiElimina
    Risposte
    1. @pier
      Ho semplicemente ridimensionato il tutto con la regola delle proporzioni che si impara alle elementari. Comunque può essere una idea per un prossimo post anche se sarebbe un doppione di questo.

      Elimina
  12. ciao ho messo questi pulsanti che sono magnifici, unico problema io ho messo solo icone e vorrei centrarle ho messo i center all'inizio e alla fine del codice ma niente non mi viene centrato!

    RispondiElimina
    Risposte
    1. @CaterinaPili
      L'immagine è una soltanto. E' il background che cambia. Con center dovrebbe centrarsi nella sidebar.

      Elimina
  13. Ciao Ernesto,
    è possibile cambiare la composizione di questi bottoni con un'altra?(Ovvero un'altra immagine)

    RispondiElimina
    Risposte
    1. @Paolo58
      Certamente. Se hai una infarinatura di grafica puoi fare quello che vuoi.

      Elimina
  14. Sono troppo grandi quelle del codice standard, e così ho fatto il download delle icone più piccole, nel nostro caso di 32px.
    Adesso non ho capito che devo fare per sostituirle a quelle attuali di 64px.
    Modificando questi parametri ho solamente affettato l'immagine 64px; height: 64px;
    Soluzioni?

    RispondiElimina
    Risposte
    1. @Andrea
      Devi imparare la grafica e non fare come me :)

      Elimina
    2. ho capito solo adesso che l'immagine fosse una xD

      Elimina
  15. Ciao,
    ho creato l'immagine per le icone a 32 px, ma una volta inserita nel blog è tutto un casino..credo sia un problema dei parametri, non è che potresti aiutarmi? non so regolarmi.

    RispondiElimina
    Risposte
    1. @# Mi ci è voluto un sacco di tempo per fare i miei bottoni :) purtroppo non posso aiutarti, devi modificare le distanze del background facendo dei test

      Elimina
    2. Capisco perfettamente, spero però che puoi darmi almeno qualche delucidazione per capire come devo inserire i parametri, cioè il primo bottone devo sempre consideralro con valore 0 0? e tutti gli altri li devo sempre scalare della stessa misura? ad esempio se al secondo bottone inserisco -74, tale cifra deve essere ripetura per tutte e tre le funzioni?
      Un'ultima cosa, in questo post parli della distanza a cui hai inserito 300..questo valore è da modificare per le icone a 32px?

      Scusa..ma voglio mettermi sotto e vedere se ci riesco!

      :)

      Elimina
    3. @# Sì il primo bottone ha distanza orizzontale 0 mentre quella verticale è sempre 0 per tutti. Forse ti può aiutare questo lavoro fatto per inserire un'altra icona
      https://www.facebook.com/ideepercomputeredinternet/posts/223611324413721

      Elimina
    4. Ok, vedrò cosa mi esce!
      Grazie.

      Elimina
  16. Ho una domanda veramente cretina..ho sempre lavorato con blogger ma adesso mi è stato chiesto di modificare un tema di wordpress.com..è possibile inserire questo widget? nella sezione widget di wordpress.com ce n'è uno che dice testo o html libero ma non funzia..

    RispondiElimina
    Risposte
    1. @# Nel widget Testo dovrebbe funzionare. Non capisco perché per te non sia così. Si tratta di un codice indipendente dalla piattaforma utilizzata.

      Elimina
    2. @# Ma ti riferisci a un sito sulla piattaforma gratuita Wordpress? Cioè con un URL del tipo mioblog.wordpress.com? Se è così allora non si può fare nulla. E' una piattaforma con non consente personalizzazioni o plugin. In un sito wordpress self-hosted cioè con URL del tipo www.esempio.com non ci sarebbero stati problemi.

      Elimina
  17. Grazie Ernesto per i tuoi consigli utilissimi,ho inserito senza problemi i bottoni solo che volevo inserire anche quello di flickr...come faccio???
    ciao e grazie

    RispondiElimina
    Risposte
    1. @# E' un grosso lavoro. Leggiti questo post
      https://www.facebook.com/ideepercomputeredinternet/posts/223611324413721?notif_t=share_wall_create
      e quest'altro
      http://www.ideepercomputeredinternet.com/2013/03/3d-social-icons.html
      però se vuoi aggiungere Flickr ti aspetta un grande lavoro di grafica

      Elimina
  18. Ciao complimenti sei bravissimo!
    Mi sono unita come tua lettrice!
    Buona serata
    Antonella.

    RispondiElimina
  19. Non riesco ad inserire il pulsante per farmi seguire su Tumblr, vengono visualizzati solo quelli di Twitter e Google+ (ho tolto io quello di Facebook). Qual è il procedimento corretto?

    RispondiElimina
  20. È piuttosto complicato. Leggiti questo post su Facebook
    https://www.facebook.com/ideepercomputeredinternet/posts/223611324413721?notif_t=share_wall_create
    e quest'altro articolo del blog
    http://www.ideepercomputeredinternet.com/2013/03/3d-social-icons.html
    @#

    RispondiElimina
  21. Ciao Ernesto,
    ho inserito nel mio blog in alto a destra i tre pulsanti che mi interessavano.
    Come puoi vedere però avevo già posizionato quella di instagram sotto a quelle.
    Come faccio a spostarla in modo da posizionarla a fianco delle altre?
    Grazie
    http://runnerinvenice.blogspot.it/

    RispondiElimina
    Risposte
    1. @# Prova a usare il codice di una riga e due colonne

      <table cellspacing="2" cellpadding="2" width="300" border="0">
      <tbody>
      <tr>
      <td valign="top" width="200">Codice icone sociali</td>
      <td valign="top" width="100">Codice icona Istagram</td>
      </tr>
      </tbody>
      </table>

      Elimina
    2. ok grazie ma dove lo devo inserire? Scusa ma sono inesperto.

      Elimina
    3. Ho provato casualmente ad incollare il codice html dell''icona instagram di seguito al codice che hai fornito tu e ho ottenuto questo effetto. Come vedi l'icona si e spostata al piano superiore ma non riesco a posizionarla bene e alla stessa distanza delle altre. Come posso fare?
      https://www.blogger.com/home

      Elimina
    4. Cercherò di essere più chiaro. Vai su Layout > Aggiungi un gadget > Base > HTML/Javascript e incolla il codice che ti ho postato nel commento 21.a.
      Al posto di Codice icone sociali devi incollare il codice delle icone 3d e al posto di Codice icona Istagram il codice della tua icona Instagram quindi salvi. Ho calcolato 200 pixel per le icone 3d e 100 pixel per l'icona instagram ma puoi mettere anche 220 e 80 a seconda di come vedi che viene
      @#

      Elimina
    5. @# Ti consiglio però questa soluzione che è più semplice e che contiene anche Instagram in 3d
      http://www.ideepercomputeredinternet.com/2013/03/3d-social-icons.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. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.