Come inserire in Blogger un bottone di condivisione su FriendFeed.

FriendFeed è un servizio per la acquisizione di feed da blog o altra origine e per ripubblicarli su Twitter tramite dei tweet automatici. Qualche tempo fa fu acquistato da Facebook ma il suo sviluppo si è arrestato. Forse erano interessati più alla loro tecnologia che al loro modello di business. Sono iscritto su FriendFeed da diverso tempo ma confesso di aprirlo veramente poco. Oltre alla ripubblicazione automatica dei feed, su FriendFeed si sviluppano delle conversazioni tal volta molto interessanti che sono spesso riprese in molti post.
Specialmente in Italia la comunità di FriendFeed è molto attiva e ci sono diversi autori che si occupano di informatica, web design, web marketing o di internet in generale che lo usano come strumento di elezione per coltivare i propri contatti. Vediamo come fare, attraverso le API e i Tool messici a disposizione, a implementare un bottone di condivisione su FriendFeed all'interno di un blog sulla piattaforma Blogger. Ho preso in esame tre possibili opzioni.

Inserimento del pulsante di FriendFeed in una sidebar

In questo caso si va su Design > Aggiungi un gadget > HTML/Javascript (Layout > Aggiungi un gadget > HTML/Javascript nella nuova Bacheca), si incolla il seguente codice, si salva l'elemento e si posiziona a piacere con il drag & drop del mouse 

<a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://friendfeed.com/share/bookmarklet/javascript');document.body.appendChild(e)})())" onclick="return clicked(event)"><img style="margin-bottom:-5px" src="https://lh4.googleusercontent.com/-n__ainErox0/TjmOWRBtFFI/AAAAAAAAUHM/spjb5FmMWuw/friendfeed.png" alt="Condividi su FriendFeed" /></a>   

Dove l'icona del bottone FriendFeed è data dall'URL colorato di rosso e può essere cambiata con un'altra più grande, più piccola o di diverso aspetto.

Inserimento del bottone di FriendFeed in modo flottante come immagine statica

Se si desidera avere il pulsante di FriendFeed sempre nello stesso punto dello schermo e che rimanga immobile durante lo scorrimento della pagina, dobbiamo sempre andare su Design > Aggiungi un gadget > HTML/Javascript e incollare quest'altro codice

<div style="position:fixed;top:150px;right:280px;">
<a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://friendfeed.com/share/bookmarklet/javascript');document.body.appendChild(e)})())" onclick="return clicked(event)"><img style="margin-bottom:-5px" src="https://lh4.googleusercontent.com/-n__ainErox0/TjmOWRBtFFI/AAAAAAAAUHM/spjb5FmMWuw/friendfeed.png" alt="Condividi su FriendFeed" /></a>
</div>

Anche in questo caso si può modificare l'icona il cui URL è colorato di rosso. Con questa opzione è importante determinare la posizione che dovrà assumere il bottone nel browser quando si aprirà il blog. Si devono quindi configurare i pixel di distanza da due lati a scelta tra bottom e top e right e left. Quando si cliccherà su questo pulsante verrà automaticamente condivisa la pagina corrispondente all'URL del browser.

Inserimento del pulsante di FriendFeed insieme a quelli di Facebook, Twitter e Google Plusone
Utilizzando il tutorial su come si possano allineare più bottoni di condivisione possiamo per esempio inserire i bottoni di condivisione di questi quattro social network subito prima del contenuto del post in modo da creare una tabella con questo aspetto

Questa volta il codice deve essere incollato nel modello. Bisogna quindi andare su Design > Modifica HTML oppure su Modello > Modifica Modello. Dopo aver messo la spunta a espandi modelli widget, si cerca la riga <data:post.body/> e subito sopra si incolla questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table cellpadding='0' cellspacing='0'>
<tr>   
    <td style='padding-top: 17px;'>   
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;&lt;fb:like expr:href=&#39;data:post.url&#39; send=&quot;false&quot; width=&quot;430&quot; show_faces=&quot;true&quot; colorscheme=&quot;light&quot;/&gt;&lt;/fb:like&gt;
    </td>
    <td style='padding-left: 10px;'> 
<a class='twitter-share-button' data-count='vertical' data-via='parsifal32' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
    </td>
    <td style='padding-left: 10px;'>
     <g:plusone size='tall'/>
    </td>
  <td style='padding-left: 10px;'>
&lt;a href=&#039;javascript:void((function(){var%20e=document.createElement(&amp;apos;script&amp;apos;);e.setAttribute(&amp;apos;type&amp;apos;,&amp;apos;text/javascript&amp;apos;);e.setAttribute(&amp;apos;src&amp;apos;,&amp;apos;http://friendfeed.com/share/bookmarklet/javascript&amp;apos;);document.body.appendChild(e)})())&#039; onclick=&#039;return clicked(event)&#039;&gt;&lt;img alt=&#039;Condividi su FriendFeed&#039; src=&#039;https://lh4.googleusercontent.com/-n__ainErox0/TjmOWRBtFFI/AAAAAAAAUHM/spjb5FmMWuw/friendfeed.png&#039; style=&#039;margin-bottom:-5px&#039;/&gt;&lt;/a&gt;</td>
  </tr>
</table><br/>
</b:if>

Si salva il modello. Le personalizzazioni riguardano

1. L'URL della icona di FriendFeed
2. La distanza dalla parte alta del layout: padding-top: 17px
3. La distanza dal precedente bottone: padding-left: 10px
4. L'username di Twitter: parsifal32 va cambiato con il vostro nick
5. La larghezza del Mi Piace di Facebook: 430 pixel da adattare a quella del blog

Quando un lettore cliccherà sulla icona di FriendFeed, se si è già loggato a questo servizio, visualizzerà una finestra popup come questa

da cui si potrà pubblicare la pagina corrente su FriendFeed aggiungendovi un commento e in cui sarà visualizzato automaticamente il titolo del post. Si può pubblicare contestualmente anche su Twitter mettendo la spunta alla relativa opzione. Ho postato in un mio blog di prova una

• Demo del pulsante di FriendFeed per Blogger -

in cui sono visibili tre bottoni nelle differenti configurazioni appena illustrate. Concludo ricordando che, per visualizzare il bottone Google Plusone, non è sufficiente questo codice ma occorre inserire nel modello un altro script sopra a </head> oppure sopra a </body> se si vuole che il pulsante del +1 si carichi più velocemente.