Pubblicato il 07/03/13e aggiornato il

Icone in 3 dimensioni con collegamento ai social network.

Come installare le icone sociali con effetto in 3 dimensioni su Blogger, Wordpress o altri CMS che supportano gli inserimenti di widget.
Molti lettori (soprattutto lettrici) mi hanno chiesto informazioni su come installare i bottoni con collegamento ai social network posizionati nella parte alta della sidebar di questo blog. Ho semplicemente usato le immagini in 3D che sono state messe in rete da un disegnatore con libera possibilità di riutilizzo. Ne avevo già parlato in un post dedicato alle icone con effetto in 3D. La difficoltà di realizzare un simile widget è esclusivamente grafica perché si tratta di utilizzare due diverse immagini per ogni collegamento e di metterle una accanto all'altra in una striscia orizzontale. Per mostrare ciascuna di queste icone bisogna settarne la distanza del background in modo che venga perfettamente centrata. Si tratta quindi di un lavoro certosino di grafica. Ho già dichiarato diverse volte che le realizzazioni di questo tipo non fanno per me e di non esservi molto portato. Visto però che avevo in animo di aggiungere anche i bottoni di Pinterest e di Instagram a quelli che già avevo, ho pensato di condividere il lavoro con voi lettori.

Se qualche pulsante non vi piace e lo volete sostituire con un altro non vi resta che operare sulla immagine complessiva delle icone che è la seguente


Alcuni bottoni li ho creati da solo e mi rendo conto non siano all'altezza degli altri. Vi posto quindi il codice con la preghiera di non chiedermi aiuto su come apportare ulteriori modifiche perché come detto trattasi di attività che mi scoccia particolarmente. L'aspetto dei pulsanti sarà tale da dare l'impressione che vengano effettivamente premuti quando ci si passa sopra con il mouse.

Per l'installazione si procede come al solito. Si va su Layout > Aggiungi un gadget > HTM/Javascript e si incolla il seguente codice in Sezioni del sito

<style type="text/css">
/* Bottoni Social Network in 3D - by http://www.ideepercomputeredinternet.com */
.icone-sociali {width: 300px;}
.bottone-rss, .bottone-twitter, .bottone-facebook, .bottone-google, .bottone-youtube, .bottone-twitter2, .bottone-pinterest, .bottone-instagram { background: url(https://lh5.googleusercontent.com/-t88d4CnmepQ/UTiYcGaUWKI/AAAAAAAAguI/kiAnqbj26UY/s590/social-ico-32-8.png) no-repeat top left; }
.bottone-facebook{ background-position: 0 0; width: 32px; height: 32px; float:left;}
.bottone-facebook:active{ background-position: -37px 0; width: 32px; height: 32px;}
.bottone-facebook:hover{ background-position: -37px 0; width: 32px; height: 32px;}
.bottone-google{ background-position: -74px 0; width: 32px; height: 32px;float:left;}
.bottone-google:active{ background-position: -111px 0; width: 32px; height: 32px;}
.bottone-google:hover{ background-position: -111px 0; width: 32px; height: 32px;}
.bottone-rss{ background-position: -148px 0; width: 32px; height: 32px; float:left;}
.bottone-rss:active{ background-position: -185px 0; width: 32px; height: 32px;}
.bottone-rss:hover{ background-position: -185px 0; width: 32px; height: 32px;}
.bottone-twitter{ background-position: -222px 0; width: 32px; height: 32px; float:left;}
.bottone-twitter:active{ background-position: -259px 0; width: 32px; height: 32px;}
.bottone-twitter:hover{ background-position: -259px 0; width: 32px; height: 32px;}
.bottone-youtube{ background-position: -296px 0; width: 32px; height: 32px; float:left;}
.bottone-youtube:active{ background-position: -333px 0; width: 32px; height: 32px;}
.bottone-youtube:hover{ background-position: -333px 0; width: 32px; height: 32px;}
.bottone-twitter2{ background-position: -371px 0; width: 32px; height: 32px; float:left;}
.bottone-twitter2:active{ background-position: -408px 0; width: 32px; height: 32px;}
.bottone-twitter2:hover{ background-position: -408px 0; width: 32px; height: 32px;}
.bottone-pinterest{ background-position: -444px 0; width: 32px; height: 32px; float:left;}
.bottone-pinterest:active{ background-position: -480px 0; width: 32px; height: 32px;}
.bottone-pinterest:hover{ background-position: -480px 0; width: 32px; height: 32px;}
.bottone-instagram{ background-position: -516px 0; width: 32px; height: 32px; float:left;}
.bottone-instagram:active{ background-position: -554px 0; width: 32px; height: 32px;}
.bottone-instagram:hover{ background-position: -554px 0; width: 32px; height: 32px;}
</style>
<div class="icone-sociali">
<a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank" title="Sottoscrivi il feed" rel="nofollow"><span class="bottone-rss"></span></a>
<a href="http://twitter.com/parsifal32" target="_blank" title="Seguimi su Twitter" rel="nofollow"><span class="bottone-twitter"></span></a>
<a href="http://www.facebook.com/parsifal32" target="_blank" title="Aggiungimi su Facebook" rel="nofollow"><span class="bottone-facebook"></span></a>
<a rel="author" href="https://plus.google.com/111056841635962157738/about" target="_blank" title="Seguimi su Google Plus" rel="nofollow"><span class="bottone-google"></span></a>
<a href="http://www.youtube.com/user/parsifal32" target="_blank" title="Canale su YouTube" rel="nofollow"><span class="bottone-youtube"></span></a>
<a href="https://twitter.com/IPCEI" target="_blank" title="IPCEI su Twitter" rel="nofollow"><span class="bottone-twitter2"></span></a>
<a href="http://pinterest.com/parsifal32/" target="_blank" title="Seguimi su Pinterest" rel="nofollow"><span class="bottone-pinterest"></span></a>
<a href="http://instagram.com/parsifal32" target="_blank" title="Seguimi su Instagram" rel="nofollow"><span class="bottone-instagram"></span></a>
</div>

Andate su Salva e posizionate il widget a piacere nella sidebar. Bisogna avere una colonna larga almeno 300 pixel altrimenti le icone si disporranno su due file. Dovrete sostituire gli URL in rosso con gli indirizzi dei vostri social e opzionalmente personalizzare le scritte in viola. Questi bottoni possono anche essere installati su un sito Wordpress andando su Widget > Testo e incollando il codice. Enjoy.





11 commenti :

  1. ciao ernesto come si fa per fare aprire i link del blog nella pagina stessa e non in un'altra scheda? grazie mille

    RispondiElimina
    Risposte
    1. @# Devi togliere questi tag target="_blank"

      Elimina
  2. Che dire..non ho parole, veramente GRAZIE ^^

    Ps. stavo già inziando l'esaurimento!

    RispondiElimina
  3. Ciao Ernesto, leggendo questo post mi è sorto un dubbio, notando il rel="nofollow" per ogni link ai social ed io non l'ho mai inserito nei miei, me lo consigli? o_o

    RispondiElimina
    Risposte
    1. @# Si tratta di una sottigliezza. In questo modo non si trasferisce il nostro Page Rank a siti quali Twitter, Facebook, ecc ma lo si fa con le pagine linkate nei vari articoli e che quindi possono essere più pertinenti ai nostri contenuti. Diciamo che si può anche non mettere il nofollow e non succede nulla.

      Elimina
    2. ok tutto chiaro, grazie ^_^

      Elimina
  4. Grazie mille...ho prelevato il codice stavo proprio cercando dei bottoni così!!

    RispondiElimina
  5. *_* ti ho scoperto grazie ad una blogger e dannazione, cercavo queste icone da sempre! Credevo di non riuscirci mai ed invece..! Ho fatto qualche modifica non avendo diversi social, e li amo! grazie grazie grazie :)

    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.