Bellissimo widget di Blogger per condividere i post su tutti i social network.

Il widget per blog sulla piattaforma Blogger che vado a presentare potrebbe sembrare lento, quando ne aprirete la pagina demo di cui il link più in basso. In realtà non è così e non è meno rapido di altri dello stesso genere. Nel blog che uso come test e come dimostrazioni ho ormai inserito tali e tanti widget, effetti, bottoni, personalizzazioni e quant'altro che è diventato lentissimo di suo a prescindere da altre aggiunte. D'altra parte non potrebbe essere altrimenti.
Per i doverosi crediti relativi al gadget vi rimando a fondo pagina e passo subito al codice da inserire in un elemento HTML

<style type="text/css">
  #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
  #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
  .dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivwukYo5_2JEBGvXnuV7MfkzunrcpCDrgLDFhYmkXXOt8MSSSRrcmvCj9ReWmj2b3DrSVlifse8JiYwPw0MIpZxyr-PhTcBjWm3tCEmo1LSajG27Li1PuLqeuYhmX8vBz-x03-2canHrs/) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
  .dock-container .custom_images a { display: block;  position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
  .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
  .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
  </style>
<div id="sharedock">
  <div id="dock">
  <div class="dock-container">
<div class="addthis_toolbox">
<div class="custom_images">
<a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Condividi su Facebook" /></a>
  <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Condividi su Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Condividi su MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Posta su StumbleUpon" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Condividi su Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Condividi su Delicious" /></a>
  <a class="addthis_button_more"><span>Altri...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="Altri..." /></a>
  </div>
  </div>
  </div>
  </div>
  </div>
  <script type="text/javascript" src="http://sites.google.com/site/ideepercomputeredinternet/script-1/addthis_widget.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
  <script type="text/javascript">
  $(function () {
  // Dock initialize
  $('#dock').Fisheye(
  {
  maxWidth: 30,
  items: 'a',
  itemsText: 'span',
  container: '.dock-container',
  itemWidth: 50,
  proximity: 60,
  alignment : 'left',
  valign: 'bottom',
  halign : 'center'
  }
  );
  });
  </script>

Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla e si clicca su Salva. Non c'è niente da personalizzare anche se si potrebbe farlo modificando per esempio le dimensioni dei bottoni o altri parametri. Il widget dovrà essere posizionato nella parte centrale bassa della pagina subito sotto al post e dovremo dargli un Titolo (p.e. "Condividi")

Nella parte centrale bassa della pagina saranno visualizzati sette bottoni di condivisione che si ingrandiranno al passaggio del mouse con un effetto molto particolare

I pulsanti riguardano i servizi Facebook, Twitter, MySpace, StumbleUpon, Reddit, Delicious e il pulsante con l'icona a forma di "più" che permetterà di postare praticamente ovunque come vedremo.
Senza modifiche questa serie di bottoni sarà visibile in tutte le pagine. Noi vogliamo però che lo sia solo nei post in quanto sono quelli che si condividono e non certo le pagine di archivio o la homepage.
Dobbiamo procedere quindi in questo modo. Andare su Layout > Modifica HTML e mettere la spunta a espandi modelli widget; quindi attraverso il pulsante F3 o Ctrl+F cercare il nome che abbiamo dato al widget (p.e. Condividi)

Dobbiamo quindi incollare la riga di codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>

immediatamente sotto a

<b:includable id='main'>

e l'altra riga

</b:if>

immediatamente sopra a

</b:includable>

come mostrato nello screenshot precedente. Salvare il modello, riaprire l'elemento pagina e eliminare il titolo (p.e. Condividi) che avevamo inserito esclusivamente per l'individuazione certa del codice del widget.
A questo punto i bottoni di condivisione saranno visibili solo nei post. Come detto in precedenza si possono condividere gli articoli praticamente in tutti i servizi più importanti del mondo andando sull'ultima icona sulla destra (tipo bandiera svizzera). Se ci si clicca sopra si aprirà una finestra di dialogo di questo tipo
                              
nella piccola barra di ricerca posta in alto digitando "di" si accede immediatamente a Digg o Diggita mentre inserendo "ok" si trova subito l'icona di OKNotizie. Per un qualsiasi altro sito è sufficiente digitarne le due lettere iniziali per trovarlo immediatamente.
I servizi a disposizione sono un'enormità e vengono visualizzati sfruttando le API di AddThis. Per postare un articolo nel social network o social bookmarking che si è selezionato basta cliccare sulla sua icona. Nel caso dei sei servizi principali il procedimento è ancora più rapido. Ovviamente per la riuscita occorre essere registrati.
Ho tradotto il widget in italiano per la parte che mi era possibile e agevole fare. Per vederlo in azione andate su

• Demo widget di condivisione per Blogger - 

e divertitevi a passare il mouse vicino alle icone poste in basso e a fare delle prove di funzionamento. Altri metodi di condivisione possono essere trovati nell'articolo che ho dedicato ai bottoni di voto o al Sexy Widget.
Fonti :| Zurb | Tutsplus | Addthis | Allblogtools -