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 >> 

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

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



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




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

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

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



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