Pubblicato il 30/09/13e aggiornato il

Piccole icone sociali animate alla fine dei post di Blogger per condividere sui social network.

Come installare in tutti i post le icone animate di condivisione di Twitter, Facebook, Google Plus, Linkedin, Pinterest, Youtube e quella dei Feed RSS
Mi rendo conto che il titolo di questo post non è il massimo dal punto di vista SEO perché troppo lungo e, benché sia molto descrittivo, non rende immediatamente chiaro al lettore l'argomento del post. Si tratta in realtà di inserire in tutti gli articoli una serie di icone che si animano al passaggio del mouse e che permettono di condividere il contenuto del post con un solo click nei social network più importanti.

La novità di questa impostazione è che il lettore non viene mandato all'account dell'autore con un apposito link ma se clicca sopra a una icona si aprirà una pagina precompilata per la condivisione su Facebook, Twitter, Google+ e Linkedin. Ho anche aggiunto le icone di Pinterest, di Youtube e dei Feed RSS anche se in questo caso c'è solo il link all'account senza condivisione di contenuti.

Diciamo che queste prima 4 icone fanno il lavoro dei vari bottoni ufficiali essendo però molto meno invasive, esteticamente più valide e con un aspetto che si intona alla quasi totalità dei blog.
piccole-icone-sociali

Si possono inserire nella parte bassa del blog subito alla fine dell'articolo oppure anche nella parte alta subito sotto il titolo. In sostanza ho applicato a queste piccole icone colorate e animate i codici di condivisone dei social per immagini personalizzate. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin>. Subito sopra si incolla questo codice

/* Piccole Icone Sociali Inizio */
ul.ipcei_icone_sociali {float:left; margin-bottom:10px;}
ul.ipcei_icone_sociali li {float:left;list-style: none outside none;border:none;}
ul.ipcei_icone_sociali li a{background-color:transparent;background-image:url('https://lh3.googleusercontent.com/-XEWbxrYCv4M/UkYJn3PRAJI/AAAAAAAAjoI/UOOY9IS_dso/s640/social-icons.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.ipcei_icone_sociali li a, .ie8 ul.ipcei_icone_sociali li a{background-image:url('https://lh3.googleusercontent.com/-XEWbxrYCv4M/UkYJn3PRAJI/AAAAAAAAjoI/UOOY9IS_dso/s640/social-icons.png' )}
ul.ipcei_icone_sociali li.facebook a{ background-position:0 0}
ul.ipcei_icone_sociali li.googleplus a{ background-position:-96px 0}
ul.ipcei_icone_sociali li.linkedin a{ background-position:-128px 0}
ul.ipcei_icone_sociali li.pinterest a{ background-position:-160px 0}
ul.ipcei_icone_sociali li.rss a{ background-position:-192px 0}
ul.ipcei_icone_sociali li.twitter a{ background-position:-256px 0}
ul.ipcei_icone_sociali li.youtube a{ background-position:-320px 0}
ul.ipcei_icone_sociali li.facebook a:hover, #sidebar ul.ipcei_icone_sociali li.facebook a:hover{ background-position:0 -32px}
ul.ipcei_icone_sociali li.googleplus a:hover, #sidebar ul.ipcei_icone_sociali li.googleplus a:hover{ background-position:-96px -32px}
ul.ipcei_icone_sociali li.linkedin a:hover, #sidebar ul.ipcei_icone_sociali li.linkedin a:hover{ background-position:-128px -32px}
ul.ipcei_icone_sociali li.pinterest a:hover, #sidebar ul.ipcei_icone_sociali li.pinterest a:hover{ background-position:-160px -32px}
ul.ipcei_icone_sociali li.rss a:hover, #sidebar ul.ipcei_icone_sociali li.rss a:hover{ background-position:-192px -32px}
ul.ipcei_icone_sociali li.twitter a:hover, #sidebar ul.ipcei_icone_sociali li.twitter a:hover{ background-position:-256px -32px}
ul.ipcei_icone_sociali li.youtube a:hover, #sidebar ul.ipcei_icone_sociali li.youtube a:hover{ background-position:-320px -32px}
/* Piccole Icone Sociali Fine */

poi si clicca su Vai al widget > Blog1

vai-al-widget-blogger

e si cerca la sezione <b:includable id='post' var='post'>. Si clicca sulla freccetta nera alla sua sinistra per visualizzare tutto il codice. Si scorre fino a trovare la riga <div class='post-footer'>. Subito sopra o subito sotto si incolla questo secondo codice

<!-- Piccole Icone Sociali Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='ipcei_icone_sociali'>
<li class='facebook'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Facebook'>
</a></li>
<li class='googleplus'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Google+'>
</a></li>
<li class='twitter'>
  <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Twitter'/>
</li>
<li class='linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Linkedin'>
</a></li>
<li class='youtube'>
<a href='http://www.youtube.com/user/parsifal32' rel='nofollow' target='_blank' title='youtube'>
</a></li>
<li class='pinterest'>
<a href='http://pinterest.com/parsifal32/' rel='nofollow' target='_blank' title='pinterest'>
</a></li>
<li class='rss'>
<a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</b:if>
<!-- Piccole Icone Sociali Fine -->

dove sono da modificare gli URL degli account di Youtube, di Pinterest e l'indirizzo dei feed. Si salva il modello. Visto che quella zona del template è infarcita di molti elementi ci potrebbe essere l'esigenza di mettere un po' di spazio tra queste icone e il resto del layout. È per questa ragione che ho inserito margin-bottom:10px;. Nel caso si dovesse creare un po' di spazio anche in alto si aggiunge il tag margin-top:10px; con il numero 10 che può essere modificato a seconda delle esigenze.

Se optassimo per un posizionamento sopra al contenuto del post il secondo codice dovrebbe essere incollato subito sopra o subito sotto una di queste righe

<data:post.body/>
<div class='post-body entry-content'...  
<div class='post-header-line-1'/>
<div class='post-header'>


dove il posizionamento va sempre più in alto quando si passa alle opzioni successive. I moduli precompilati nei vari social network avranno il seguente aspetto

condivisione-social-network

Nel caso di Facebook, Google Plus e Linkedin si aprirà una seconda scheda mentre cliccando sull'icona di Twitter si aprirà una finestra popup precompilata. Nei primi tre social network si potranno selezionare anche le miniature delle immagini presenti nel post.




47 commenti :

  1. grazie appena inserite ,sono uguali a quelle della mia sidebar ,perfette!

    RispondiElimina
    Risposte
    1. Caterina, scusa se mi inserisco, ma ho appena visto il tuo sito e lo trovo meraviglioso. Le foto poi...

      Elimina
  2. Ernesto, sono bellissime. Le voci YouTube e Pinterest posso eliminarle, no?
    Ecco, e adesso, sebbene abbia il blog da tre anni e mi vergogno a chiedertelo, potresti spiegarmi come si usa l'RSS? Una volta che lo clicco e mi si apre quella pagina grigia, cosa dovrebbe accadere? Non l'ho mai capito.

    RispondiElimina
    Risposte
    1. Puoi togliere i codici delle icone che non ti interessano. Basta farlo nel secondo codice da < li fino a /li >
      I feed sono fondamentali per essere informati in poco tempo sulle pubblicazioni di centinaia di siti. Ti linko alcuni post
      http://www.ideepercomputeredinternet.com/2009/11/cosa-sono-i-feed-e-come-si-usano-solo.html
      http://www.ideepercomputeredinternet.com/2010/11/come-iscrivere-il-blog-su-feedburner-e.html
      http://www.ideepercomputeredinternet.com/2013/03/feedly-reader.html
      @#

      Elimina
  3. Ernesto, non ci riesco. Ma il fatto che non si visualizzano a cosa è dovuto? Sbaglio col primo o col secondo codice?

    RispondiElimina
    Risposte
    1. Non posso saperlo ma è probabile che tu non abbia trovato la riga giusta in cui incollare il codice
      @#

      Elimina
  4. Scusami, ma hai messo i tag condizionali? no perché se no è un pomeriggio che mi spacco inutilmente la testa.

    RispondiElimina
  5. Certo che ci sono i tag condizionali. Nell'anteprima del modello ovviamente non le vedi ma solo alla fine dei post

    RispondiElimina
  6. noooooooo, ho appena visto!!!! Che errore madornale da parte mia!
    Però anche tu, Ernesto, pensare di stare coltivando dei piccoli webmaster e non specificarlo...
    Scherzo, sono io una morta di sonno.
    Grazie per la pazienza.

    RispondiElimina
  7. Belle! Proprio belle!
    Riuscissi a metterle, però..sarebbe il massimo! :-P

    Era da una vita che non mettevo il naso nel codice html di blogger e...è cambiato tutto :-(
    Non trovo nessuna singola voce di cui parli. Nemmeno con la funzione "cerca" di chrome.
    Questo è un segno chiaro e forte che non devo toccare più niente (???)

    RispondiElimina
    Risposte
    1. La funzione Cerca di Chrome non la devi usare!!!! Nel nuovo Editor si deve procedere così
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      @#

      Elimina
    2. Probabilmente il mio problema sta nel non riuscire a togliere gli attuali bottoni di condivisione fatti con sharethis.com che, forse, creano conflitto con questi qui?

      Teorie complottistiche per giustificare la mia incapacità :D

      Elimina
    3. Non dovrebbero avere nessuna interferenza con ShareThis
      @#

      Elimina
    4. Uff... Troppo difficile non ci riesco nemmeno io :-/

      Elimina
  8. Se le volessi mettere in un widget come potrei fare ?

    RispondiElimina
    Risposte
    1. Questo codice penso funzioni solo nel modello. Non ho testato in un widget
      @#

      Elimina
  9. Ciao Ernesto, grazie per le informazioni!!!
    Le icone sono bellissime!!!!
    Ho inserito le icone sociali di facebook, twitter e pinterest (in questo ordine) alla fine del post.
    Le icone sono allineate a destra nel post-footer (CSS-> ul.ipcei_icone_sociali {float:right; margin-top:-9px; margin-right: 10px;} )

    Ho un problema: quando passo il mouse sull’icona di facebook l’icona si colora di blu, quando clicco esce la scritta “condividi su pinterest” e il post viene condiviso su pinterest.
    Invece quando passo il mouse sull’icona di pinterest l’icona si colora di rosso, quando clicco esce la scritta “condividi su facebook” e il post viene condiviso su facebook.
    Mi puoi aiutare per favore?
    Grazie mille! Beba

    RispondiElimina
  10. Ah, ti scrivo la parte di codice che ho modificato.... riuscirai sicuramente a capire dove ho sbagliato. :-)
    ul.ipcei_icone_sociali li.facebook a{ background-position:-160px 0}
    ul.ipcei_icone_sociali li.twitter a{ background-position:-256px 0}
    ul.ipcei_icone_sociali li.pinterest a{ background-position:0 0}
    ul.ipcei_icone_sociali li.facebook a:hover, #sidebar ul.ipcei_icone_sociali li.facebook a:hover{ background-position: -160px -32px}
    ul.ipcei_icone_sociali li.twitter a:hover, #sidebar ul.ipcei_icone_sociali li.twitter a:hover{ background-position:-256px -32px}
    ul.ipcei_icone_sociali li.pinterest a:hover, #sidebar ul.ipcei_icone_sociali li.pinterest a:hover{ background-position: 0px -32px}
    /* Piccole Icone Sociali Fine */

    RispondiElimina
    Risposte
    1. Il primo codice non lo devi modificare. Al massimo puoi eliminare i CSS che non servono. Puoi modificare l'ordine delle righe del secondo codice e inserire solo i blocchi di codice di quelle icone che vuoi visualizzare e nell'ordine prescelto
      @#

      Elimina
  11. GRAZIE Ernesto!!!!!
    Missione compiuta!!!

    RispondiElimina
  12. Non so se puoi aiutarmi, dopo tanta fatica sono riuscita a mettere queste iconcine tanto belline, ma non ho risolto il mio problema. Ovvero: quando provo a condividere un mio post sui social network il link che si apre ha la foto e la descrizione di tutto il blog e non solo del post che voglio condividere. Fermo restando che l'indirizzamento poi è giusto. Ma graficamente è una vera schifezza, perchè sembra che posto sempre la stessa cosa.

    RispondiElimina
    Risposte
    1. Devi abilitare come minimo la descrizione di Google nella Preferenza di Ricerca. Leggi il post nella sezione EDITOR DI BLOGGER DESCRIZIONE E TAG IMMAGINI
      http://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html
      Se non bastasse devi abilitare anche l'Open Graph di Facebook
      http://www.ideepercomputeredinternet.com/2013/03/open-graph-facebook.html
      @#

      Elimina
    2. purtroppo ancora niente, quella maledetta descrizione è sempre sbagliata. Però sei stato molto gentile a darmi una risposta tanto celere

      Elimina
  13. Buona domenica Ernesto. Scusami di nuovo. Io ho centrato la data e il titolo dei post. Se volessi inserire in alto i bottoni, c'è un modo per centrarli nel post così da metterli in linea con la data e il titolo? Grazie ancora.

    Lucia Alocchi

    RispondiElimina
    Risposte
    1. Si tratta di icone incollate in un CSS Sprite
      http://www.ideepercomputeredinternet.com/2013/10/css-sprite-immagini-ottimizzare.html
      Non si può posizionarlo al centro ma solo a sinistra o a destra cambiando attributo a float:left;
      Per il posizionamento leggiti l'ultima parte del post
      @#

      Elimina
    2. Ok, grazie lo stesso. :)
      Lucia Alocchi

      Elimina
  14. Ciao Ernesto, ho provato le tue icone e vanno benissimo, solo che si sono messe accanto alle etichette, è il posto giusto?
    Questa è l'URL del blog "http://cercaunlavoro.blogspot.it/", riesci a dirmi se il posizionamneto è corretto?
    grazie

    RispondiElimina
  15. ciao Ernesto, intanto complimenti per i tuoi suggerimenti sempre preziosi. Dunque, io ho seguito tutta la procedura, incollando il secondo codice sotto la riga div class='post-footer'. Ho salvato il modello ma le icone non comparivano...poi è successa una cosa strana: preparo il post e lo controllo nell'anteprima. Sorpesa: le icone ci sono, anche se sovrapposte al nome dell'autore. Pubblicato il post, delle icone nessuna traccia, mentre compaiono solo se apro il post per visualizzare i commenti. L'altro problema è che sono comunque sovrapposte al nome dell'autore mentre io le vorrei sotto al footer: probabilmente le ho inserite nel blocco sbagliato, visto che il mio template ha tre linee del footer così div class='post-footer-line post-footer-line-1' etc. Hai qualche suggerimento per risolvere il problema? Grazie mille!

    RispondiElimina
  16. Ciao Ernesto, ti scrivo di nuovo perchè ho risolto il problema della posizione, spostando il codice (il secondo) dopo la terza linea del post footer. Solo che le icone continuano a comparire solo se apro il post per vedere i commenti :(
    Non capisco! Grazie ancora

    RispondiElimina
    Risposte
    1. Questo è voluto per la presenza dei tag condizionali
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
      Leggi il post e togli la seconda e la penultima riga però onestamente non te lo consiglio. Rendi la home più pesante
      @#

      Elimina
  17. Ciao, dove nel secondo codice scrivi che sono da modificare gli URL degli account di Youtube, di Pinterest e l'indirizzo dei feed (cioè sono da modificare le scritte da te messe in rosso immagino) cosa si deve mettere ? Scusa la domanda da grandissima dilettante. Un saluto

    RispondiElimina
    Risposte
    1. Apri la pagina del tuo profilo nei vari social e copi l'indirizzo nella barra del browser per poi sostituirlo agli indirizzi dei miei profili. Per l'indirizzo dei feed rss in questo momento non posso aiutarti perché sono al cellulare ma fai una ricerca su questo blog con le parole chiave " indirizzo feed blogger " e dovresti trovare il post giusto
      @#

      Elimina
    2. Apri la pagina del tuo profilo nei vari social e copi l'indirizzo nella barra del browser per poi sostituirlo agli indirizzi dei miei profili. Per l'indirizzo dei feed rss in questo momento non posso aiutarti perché sono al cellulare ma fai una ricerca su questo blog con le parole chiave " indirizzo feed blogger " e dovresti trovare il post giusto
      @#

      Elimina
  18. Ciao ! Ho provato ad iserire le icone e prima di salvare il modello ho provato a caricare l'anteprima Ma nell'anteprima non compaiono. Cioe' i post sono uguali a prima. Grazie

    RispondiElimina
    Risposte
    1. Non devono comparire nell'Anteprima. Si vedono solo nei post. Salva il modello e apri un articolo
      @#

      Elimina
  19. Ciao ! Ho salvato il modello e ho aperto il blog. Ma sotto al titolo di ciscun post (dove ho posizionato le icone) non si vedono. Grazie mille per il supporto

    RispondiElimina
    Risposte
    1. Significa che non le hai posizionate nel posto giusto.
      @#

      Elimina
  20. Riprovo, ma mi sembra di aver seguito bene le tue spigazioni. Ho incollato il secondo codice subito sopra a queste due righe

    post-header-line-1
    e post-header

    RispondiElimina
  21. Fantastico ! Icone favolose. Ciao e grazie

    RispondiElimina
  22. Una domanda. Per creare un po di spazio fra il titolo del post e le icone ho messo
    ul.ipcei_icone_sociali {float:left; margin-top:40px; margin-bottom:40px;}
    ma per la verita' non cambia nulla. Grazie

    RispondiElimina
    Risposte
    1. Incolla <br/> dopo le prime due righe del secondo codice. Se non basta mettici <br/><br/>

      @#

      Elimina
  23. Ciao, ti ringarzio e sono fantastiche...ho una domanda però...come si fanno a spostare a destra???

    RispondiElimina
  24. In questa riga
    ul.ipcei_icone_sociali li {float:left;list-style: none
    sostituisci left con right
    @#

    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.