Pubblicato il 17/04/12e aggiornato il

ShareThis Egg, l'uovo per condividere i post sui social network.

Share Egg di Share This, il pulsante universale a forma di uovo per condividere i post su tutti i social network e social bookmarking.
ShareThis è un servizio leader per la realizzazione di spettacolari widget atti a condividere gli articoli del proprio blog nei vari social network. In questo senso è molto simile a AddThis e da pochi giorni ha messo a disposizione degli utenti un nuovo look per i bottoni che sono sicuro incontrerà il favore di molti di voi.

Per ottenere il codice da ShareThis occorre iscriversi andando su Register. Bisogna mettere la spunta a Publisher acccount, inserire un indirizzo email e una password ripetuta due volte. In realtà il codice creato da un qualsiasi utente poi funzionerebbe anche per altri che lo copiassero nel loro sito ma è presente un ID che riporta all'account e quindi è meglio procedere alla generazione del codice in modo individuale. Nella homepage di ShareThis sono già predisposti tre possibili layout per bottoni di condivisione ma, se si vuole qualcosa di veramente originale, bisogna andare su More Options >> 


share-this-egg

Nella seconda schermata è possibile selezionare la piattaforma del nostro sito tra Wordpress, Blogger, Drupal, Typepad, Joomla, Tumblr e Posterous. In questo modo però l'installazione diventa automatica e si presta a minori personalizzazioni. Conviene quindi scegliere il generico Website

sharethis-bottoni-condivisione

e passare allo Step 2 in cui selezionare lo Share Egg prima di andare allo Step 3


share-egg-personalizzazione
Con il drag & drop del mouse si possono trascinare i vari servizi presenti sulla destra tra quelli selezionati di default e visualizzati invece sulla sinistra. Sempre con il cursore, si possono ordinare in modo diverso e si possono anche togliere anche quelli che non ci interessano


share-this-egg[5]

Infine si clicca su Finish: Get the Code per acquisire il codice che sarà suddiviso in tre parti


codice-share-this-egg

Si apre un'altra scheda del browser e si va su Modello > Backup/Ripristino per salvare una copia di sicurezza del template. Si torna su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca la riga </head> e, subito sopra, si incolla il terzo codice che potrebbe essere così

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "9900249f-10bd-4218-9962-6eb51859a787", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

La sequenza di numeri colorata di rosso è l'ID del publisher ed è per questa ragione che è consigliabile crearsi il codice da soli. Il primo e il secondo codice devono invece essere incollati esattamente nel punto in cui si vuole che appaia l'uovo di condivisione che ha la particolarità di aprirsi al passaggio del cursore e di mostrare tutti le icone dei social network selezionati

share-this-egg[7]
Quando si clicca su una icona di un social vi si condivide la pagina che si è aperta. Esiste anche l'icona per inviare l'articolo per email e quella verde di condivisione generica


condivisione-generica
che permette ai lettori di condividere il post praticamente su tutti i social network e social bookmarking esistenti. Il secondo e il terzo codice devono essere invece riuniti. Il primo codice è lo stesso per tutti ed è formato da una sola riga

<div class='shareEgg' id='shareThisShareEgg'/>

Il secondo codice è funzione dei servizi scelti e del loro ordine . Poniamo per esempio che sia così

<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','oknotizie','pinterest','sharethis','email'], {title:'ShareThis Rocks!!!',url:'http://www.sharethis.com',theme:'shareegg'});</script>

Vanno allora riuniti secondo questo schema

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class='shareEgg' id='shareThisShareEgg'/>

<script type='text/javascript'>
//<![CDATA[
 
stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','oknotizie','pinterest','sharethis','email'], {title:'ShareThis Rocks!!!',url:'http://www.sharethis.com',theme:'shareegg'});
//]]>

</script>

</b:if>


dove la riga colorata di verde è il primo codice, le righe colorate di blu sono il secondo codice, le righe colorate di rosso servono per evitare che Blogger modifichi il codice convertendolo in XML e le due righe colorate di viola sono dei tag condizionali che servono per mostrare il widget solo negli articoli.
Se volessimo mostrare questo widget alla fine di ciascun post, il codice precedente va incollato subito sopra alla riga  <div class='post-footer'>. Se lo volessimo mostrare all'inizio dell'articolo si può incollare subito sopra la riga   <data:post.body/>. Finalmente si salva il modello


demo-share-egg




3 commenti :

  1. ahahhahah pure l ovo......questa è bella!!!!

    Caro Ernesto il mio problema GFC permane, così come l'orario sballato nei commenti incorporati, non è che hai avuto qualche illuminazione' for me'?

    RispondiElimina
  2. Ciao Ernesto... grazie per l'articolo!
    Avrei una domanda da farti... se volessi centrare questo widget che codice aggiuntivo dovrei usare?

    RispondiElimina
    Risposte
    1. @MicheleCanevari
      I metodi consueti quali quelli di inserire il tag center e /center non funzionano. Così come quello illustrato in questo post
      http://www.ideepercomputeredinternet.com/2011/04/come-centrare-l-dell-o-header-in.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.