Pubblicato il 13/06/12 - aggiornato il  | 16 commenti :

Come inserire i bottoni di condivisione animati su Blogger.

Pulsanti animati di condivisione sui social network per Blogger. Ci sono i bottoni per Facebook, LinkedIn, Stummbluupon, Twitter, Google Plus, OKNotizie e Digg.
Ecco un'altra interessante variante per l'inserimento di pulsanti di condivisione nei vari social network e social bookmarking. La novità è che stavolta si tratta di bottoni che si animano al passaggio del mouse con un movimento orizzontale che sfrutta la libreria JQuery.

Ho inserito i pulsanti di Facebook, Twitter, Google Plus, Digg, LinkedIn, OKNotizie e Stumbleupon. Alcuni di questi social possono però essere sostituiti da altri che ritenete più utili mantenendo la stessa sintassi e acquisendo il codice dall'articolo che illustra come crearsi da soli delle icone di condivisione.

Quando un navigatore passerà con il cursore sopra a queste icone provocherà un movimento laterale decisamente originale. Ovviamente quando si cliccherà sopra a un bottone si potrà condividere il post sul social network corrispondente


bottoni-condivizione-animati
La scritta visibile sopra ai bottoni può essere modificata anche nel colore oppure tolta del tutto. Prima di procedere con l'installazione occorre andare su Modello > Backup/Ripristino e salvare il modello completo. Si torna su Modello > Modifica HTML > Procedi e si espandono i modelli widget.
Pigiando su F3 o su Ctrl+F si cerca la riga </head> e subito sopra si incolla il codice seguente

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
  $(&quot;#bottoni tr td&quot;).hover(function(){
    $(this).find(&quot;img&quot;).animate({left:10},50);
    $(this).find(&quot;img&quot;).animate({left:-10},50);
    $(this).find(&quot;img&quot;).animate({left:0},50);
  });
});
</script>

Si cerca poi la riga ]]></b:skin> e, subito sopra, si incolla quest'altro codice

#bottoni  {
      width:100%px;
      height:50px;     
      position:relative;
      }
#bottoni tr td img {
      width:50px;
       height:50px;
       position:relative;
      }

Infine si posizionano i bottoni nel punto del layout che riteniamo più opportuno. Se li vogliamo visualizzare alla fine dei singoli post, basta cercare la riga <data:post.body/> e, immediatamente dopo di questa, incollare quest'ultimo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #F1F1F1;width:100%;position:relative;margin-top:13px;'> </div>
<div style='margin-left:auto;margin-right:auto; width:600px;position:relative;'><div style='color:#940F04;position:relative;top:12px;'><center>Se ti piace questo post ti bastano 3 secondi per condividerlo</center></div>
<table align='center' cellpadding='8' cellspacing='1' id='bottoni'>
<tr>
<td>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Facebook'><img src='https://lh6.googleusercontent.com/-xULLKjAi7ug/T9hPjk-z-dI/AAAAAAAAYp8/a91UjmZ9Cl0/s65/facebook-icon.PNG'/></a></td>
<td>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; @parsifal32&quot;' rel='nofollow' target='_blank' title='Twitta!'><img src='https://lh3.googleusercontent.com/-QjDXXtX8myQ/T9hPxVLVKPI/AAAAAAAAYqE/mIGbmNp66Pk/s100/twitter-icon.PNG'/></a></td>
<td>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img alt='Condividi su Google Plus' src='https://lh3.googleusercontent.com/-dHTPz3NMJMQ/T9hUKDr6WwI/AAAAAAAAYqw/hz4Fbom4pas/s79/googleplus-icon.png' title='Condividi su Google Plus'/></a>
</td>
<td>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Digg'><img src='https://lh4.googleusercontent.com/-ska2z3Tzw84/T9hQR790d_I/AAAAAAAAYqU/Lx5VYwv_DtQ/s79/digg-icon.PNG'/></a></td>
<td>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Linkedin'><img src='https://lh3.googleusercontent.com/-ffpDUo8q9qs/T9hQnOkeWuI/AAAAAAAAYqc/EO6BCuF2Moo/s79/linkedin-icon.PNG'/></a></td>
<td>
<a expr:href='&quot;http://oknotizie.alice.it/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Vota su OKNotizie' src='https://lh6.googleusercontent.com/-DwouePa74e8/T9hNlw4q6VI/AAAAAAAAYp0/nEHrNFLJQ9k/s79/oknotizie.png' title='Vota su OKNotizie'/></a></td>
<td>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Stumbleupon'><img src='https://lh5.googleusercontent.com/-QR7-lUvoFM8/T9hRBBhQDjI/AAAAAAAAYqk/ZYvnA9YOwfM/s79/stumbleupon-icon.PNG'/></a></td>
</tr>
</table>
</div>
</b:if>

Come vedete sono presenti due tag condizionali per mostrare i pulsanti solo nei post. Le varie icone possono anche essere sostituite da altre di vostro gradimento cambiando gli URL dopo averle caricate su Picasa. Se intendete aggiungere altri bottoni potete aumentare la larghezza del widget (600 pixel). Si possono anche modificare le dimensioni delle singole icone per eventualmente renderle più piccole. Basta mettere per esempio 40 al posto di 50. In questo modo si potranno inserire ancora più bottoni se si ha un layout non troppo largo.

Si possono modificare anche altri parametri che però lascio alla fantasia del lettore. L'unico necessario è il vostro l'username su Twitter che deve essere sostituito a @parsifal32. Si salva il modello


16 commenti :

  1. @evelin
    Il primo e il secondo codice deve inserirlo subito sopra la riga indicata mentre il terzo subito dopo. In tutti e tre i casi devi solo incollare e non sostituire.

    RispondiElimina
    Risposte
    1. @Evelin
      Mi avevi messo un dubbio e ho appena controllato a installare il widget nel modello "Semplice" e funziona. Se a te non va vuol dire che hai nel tuo modello una libreria JQuery più vecchia della versione 1.7.2 oppure hai un'altra libreria javascript incompatibile tipo Prototype e Scriptaculous.

      Elimina
  2. Innanzitutto complimenti per il blog,ho provato ad installare anche io con questa guida ma non mi ha funzionato ma sicuramente e colpa del modello,
    per sbaglio ho trovato una guida in inglese (che ho trovato dalle tue fonti) e ci sono riuscito,solo che ho un problema sulla home non mi funziona però se clicco su un singolo post mi compaiono e funzionano.come faccio per farli vedere nella home page in ogni post? ho provato anche con questa guida ma per via del modello non va.
    se mi da il permesso di inserire il link della fonte gli può dare un occhiata?
    grazie in anticipo qualunque sia la risposta e mi scuso per avergli rubato questo tempo,grazie

    RispondiElimina
    Risposte
    1. @Pietro.76
      Si possono incollare i link della fonte se non lo si fa per pura pubblicità. Non si possono inserire collegamenti attivi. La tua richiesta però è semplice. Nel codice che hai trovato nel sito di lingua inglese ci sarà certamente questa riga all'inizio
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      e questa riga alla fine
      </b:if>
      non devi fare altro che cancellarle. Ti avverto però che ci sarà un forte rallentamento nel caricamento della homepage.

      Elimina
    2. grazie per avermi risposto,adesso mi compaiono anche sulla home page,non è cosi' pesante può andare,grazie di cuore,troppo gentile ancora grazie.

      Elimina
  3. Ciao Parsifal,
    a me nel themplate di Dante Araujo non mi funziona, come mai?
    Non è compatibile forse?
    Ciao

    RispondiElimina
    Risposte
    1. @GiacomoTesta
      Come ripeto spesso, con i modelli personalizzati non si può mai dire che una personalizzazione funzioni finché non si prova.

      Elimina
  4. Ottimo Ernesto, ho caricato qualche tempo fa questi codici sul mio blog di blogger e tutto funziona alla grande. Ora però avevo necessità di inserire questi bottoni non solo alla fine dei post, ma anche alla fine del testo relativo alla pagine. Come devo fare? Grazie anticipatamente !

    RispondiElimina
    Risposte
    1. @# Comb Workout
      Devi sostituire la prima riga del secondo codice con un altro o altri due tag condizionali
      http://www.ideepercomputeredinternet.com/2012/06/i-tag-condizionali-e-i-domini.html
      Non c'è però un tag che serva per inserire un oggetto nei post e nelle pagine puoi optare per quello che serve per escludere la homepage

      Elimina
    2. Grazie Ernesto, ho visto solo oggi la tua risposta! Ho fatto come mi hai detto e sono riuscito in quello che volevo, grazie 1000 mille per la velocità di intervento. Sei troppo forte!!!

      Elimina
  5. Ciao,
    se volessi aggiungere pinterest come faccio? si può fare, conq uesto tipo di pulsanti?

    RispondiElimina
    Risposte
    1. @# Il bottone di Pinterest al momento non è omologabile agli altri pulsanti
      http://www.ideepercomputeredinternet.com/2013/03/pinterest-button-hover-effect.html
      http://www.ideepercomputeredinternet.com/2013/02/pinterest-button-dynamic-views.html
      http://www.ideepercomputeredinternet.com/2012/12/pinterest-blogger-count-button.html

      Elimina
  6. Veramente molto bello, era quello che cercavo. Complimenti, e complimenti per il blog e i tanti e ottimi post.
    Avrei solo una cosa da chiedere: come posso fare in modo che le finestre di condivisione si aprano in una pop up?

    RispondiElimina
    Risposte
    1. Le finestre popup si aprono quando si condivide con i bottoni ufficiali di Facebook. Le altre condivisioni è difficile impostarle in quel modo (non impossibile)
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy