Pubblicato il 26/09/12e aggiornato il

Icone sociali Touch Me per RSS, Twitter, Facebook e Google+.

Icone sociali Touch Me per Feed RSS, Google Plus, Twitter e Facebook.
Credo che non esista sito che non abbia collegamenti con i vari social network. Le interazioni degli utenti sono infatti fondamentali per aumentare il volume del traffico. La più o meno naturale selezione che è avvenuta in questo come in altri campi ha portato all'emergere di tre network che si suddividono presumo più del 90% delle condivisioni globali, almeno per quello che riguarda l'Italia, l'Europa e il Nord America.

Si tratta naturalmente di Twitter, Facebook e Google Plus. Le loro icone insieme a quella per la sottoscrizione dei feed le ho già presentate in moltissimi widget. Ricordo i bottoni animati e le icone in tre dimensioni. E' la volta del widget che è stato chiamato "Touch Me" dai suoi ideatori che non so chi siano ma che hanno usato le icone di Design Kindle.

L'effetto è molto bello con Chrome e Firefox e non è disprezzabile neppure con Internet Explorer anche se in questo caso resta solo l'effetto colorazione e manca l'effetto movimento


touchme-icone

L'installazione è molto semplice visto che basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare in Sezioni del sito questo codice

<style type="text/css">
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://lh5.googleusercontent.com/-EyI3HRgzCA4/UGL4eDmOVmI/AAAAAAAAa5A/RB7oum3nxgk/s454/social-touchme.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<a class='rss' href="URL DEI FEED" rel='nofollow' target='_blank'></a>
<a class='googleplus' href="PROFILO GOOGLE PLUS" rel='nofollow' target='_blank'></a>
<a class='facebook' href="PROFILO FACEBOOK" rel='nofollow' target='_blank'></a>
<a class='twitter' href="PROFILO TWITTER" rel='nofollow' target='_blank' ></a>
</div>

Si salva e si posiziona con il trascinamento del mouse. Le icone sono state inserite verticalmente in una sola immagine il cui URL è colorato di viola. Al passaggio del mouse si avrà l'effetto hover che mostrerà l'icona corrispondente colorata. I valori in pixel sono stati calibrati appositamente per questo effetto. I più bravi nella grafica possono inserire anche nuove icone scaricate da Design Kindlle, modificando l'immagine e creando altri CSS. Si devono anche incollare l'URL dei Feed, quello del Profilo di Facebook, del Profilo di Google Plus e del Profilo di Twitter. Si può anche velocizzare o rallentare la transizione CSS3 modificando i parametri di durata della transizione stessa (0.2s).




18 commenti :

  1. Una miniera di preziosi (e utili) abbellimenti per i blog, come al solito.Ci vizi.Grazie

    RispondiElimina
  2. ma se il colore lo volessi sempre visibile invece che solo alla selezione???

    RispondiElimina
    Risposte
    1. @IvanDeFelice
      Questa è la particolarità di questo widget. Poi se sei bravo con la grafica e ti interessa, puoi modificare questa immagine
      https://lh5.googleusercontent.com/-EyI3HRgzCA4/UGL4eDmOVmI/AAAAAAAAa5A/RB7oum3nxgk/s454/social-touchme.png
      come ti pare modificando le icone, aggiungendone altre, ecc

      Elimina
    2. a me piacciono i 3 pulsanti voto sopra il tuo like box...vorrei inserirli come li hai tu ma 1 sotto l'altro nei post...è un po provo,ma mi sa FBK non lo vede piu...o mi sa ora accetta solo Fan page...mi sai dire qualcosa...

      Elimina
    3. @IvanDeFelice
      Per metterli uno sotto l'altro prova a usare una tabella di tre righe e una sola colonna usando questo metodo
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html

      Elimina
  3. Mitico! ottime soluzioni per rendere un blog bello e versatile!
    Grazie da stefano.

    RispondiElimina
  4. Ottimo articolo! Cortesemente volevo chiederti se era possibile centrare le icone, poichè le ho inserite in una sezione del blog ma vanno tutte a sinistra...grazie anticipatamente

    RispondiElimina
    Risposte
    1. @ Apparentemente potrebbe sembrare facile ma non è così perché c'è una sola immagine che contiene tutte e otto le icone che vengono visualizzate inserendo un background con un margine personalizzato. Per visualizzarle al centro bisognerebbe modificare l'immagine di sfondo e tutti i numeri dei background.

      Elimina
  5. Ciao, io le inserite ma se poi ci clicco sopra mi compare il messaggio "Spiacenti la pagina del blog che cerchi non esiste"!
    come faccio a creare il collegamento?
    Se vuoi ti lascio la url del mio blog così vedi direttamente cosa accade! io sono un pò imbranata... :)
    www.lov-eat.blogspot.it
    Grazie

    RispondiElimina
    Risposte
    1. @# Al posto di URL DEI FEED, PROFILO GOOGLE PLUS, ecc nel codice precedente devi mettere gli indirizzi relativi. Per esempio per i feed di questo blog, il mio profilo google plus, il mio profilo twitter e quello facebook sono i seguenti
      http://feeds.feedburner.com/ideepercomputeredinternet/zUQN
      https://plus.google.com/111056841635962157738
      https://twitter.com/parsifal32
      https://www.facebook.com/parsifal32

      Elimina
    2. Grazie. Domanda: dove trovo la url del per i feed del blog? :)
      te l'ho detto che sono alle prime armi....

      Elimina
    3. e altra domanda....da questo set manca l'icona pinterest...c'è un codice anche per questa (mettendola assieme alle altre 4).
      grazie1000

      Elimina
    4. @# Si potrebbe aggiungere anche Pinterest. Se sei un grafico in gamba potresti farlo modificando questa immagine
      https://lh5.googleusercontent.com/-EyI3HRgzCA4/UGL4eDmOVmI/AAAAAAAAa5A/RB7oum3nxgk/s454/social-touchme.png
      inserendo anche un pulsante di Pinterest. poi bisognerebbe aggiungere anche i CSS.
      L'URL dei feed di un blog su Blogger li puoi trovare qui
      http://www.ideepercomputeredinternet.com/2013/03/blogger-feed-url.html
      per un blog gratuito è
      http://nomedelblog.blogspot.com/feeds/posts/default
      dove al posto di nomedelblog metti quello del tuo sito

      Elimina
  6. purtroppo non sono una grafica!
    e per i feed, ho inserito "http://lov-eat.blogspot.com/feeds/posts/defaul" nella sezione del codice delle icone dedicata al feed:

    ...class='rss' href="URL DEI FEED" rel='nofollow'.....

    quindi:

    ..class='rss' href="http://lov-eat.blogspot.com/feeds/posts/defaul" rel='....

    però facendo così, cliccando sull'icona dei feed mi compare un elenco di codice/parole...
    :(

    RispondiElimina
    Risposte
    1. @# Se ci metti una t alla fine così
      http://lov-eat.blogspot.com/feeds/posts/default
      va bene. Se lo apri con Chrome vedi i codici ma con Firefox sono visibili gli ultimi 25 post

      Elimina
  7. Grazie!
    la t nel codice l'avevo inserita correttamente ...me l'ero persa nel post!

    ma come mai da google si vede il codice mentre sugli altri browser funziona? :)
    grazie

    RispondiElimina
    Risposte
    1. @# E' un browser webkit con un altra struttura

      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.