Come inserire un bottone di condivisione su Google Buzz nei blog su Blogger passando per gli elementi condivisi di Google Reader.

Google Buzz è nato da due giorni e sono già in grado di presentare numerose opzioni di inserimento di bottoni di condivisione di post in questo servizio. Google per il momento non ha presentato nulla in merito quindi dobbiamo appoggiarsi al fatto che gli elementi condivisi in Google Reader vengono postati direttamente in Google Buzz. Presento due versioni di condivisione; una di queste può essere testata cliccando sull'icona seguente

Si aprirà una finestra popup che ci permetterà di aggiungere il post agli elementi condivisi di Google Reader e quindi di postarlo su Google Buzz. Ovviamente dovete prima esservi loggati con il vostro account Google


Nel caso che abbiate i bottoni di condivisione sui social network allineati nella parte bassa del post e li aveste inserite seguendo le indicazione del mio articolo

• Come inserire i bottoni di voto sui social network - 

allora dovete aggiungere il codice di Google Buzz agli altri già presenti, nella posizione che desiderate. L'icona in questo caso sarà di 20x16 pixel come le misure di quelle degli altri social. In questo blog attualmente l'ho posizionato all'inizio

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Condividi su Buzz' border='0' src='http://public.blu.livefilestore.com/y1plbtZ_PlpKlOfZsBX9x4gSDQv1_GA9QUJd7DAZrTkLvA8NH8WPLU6RhwCBo8BllqOKW6DspD3ZZXNDBEJvpc0bA/google-buzz-20.png'/></a>

questo nel caso vogliate aprire una nuova scheda del browser. Se invece volete aprire una finestra popup, come accade in questo blog, inserite il seguente codice

<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'>  <img alt='Condividi in Google Buzz' src='http://public.blu.livefilestore.com/y1plbtZ_PlpKlOfZsBX9x4gSDQv1_GA9QUJd7DAZrTkLvA8NH8WPLU6RhwCBo8BllqOKW6DspD3ZZXNDBEJvpc0bA/google-buzz-20.png' title='Condividi in Google Buzz'/></a>

Ecco come appare alla fine del post insieme a tutte le altre icone di condivisione

Nel caso in cui non abbiate nessun bottone di voto potete andare su Layout > Modifica HTML, cercare la riga

<div class='post-footer'>

e, immediatamente sopra, incollate il codice secondo questa sintassi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align:left;'>
Inserire quello dei due codici precedenti che preferite
</div>
</b:if>

Nel caso in cui vogliate mettere un bottone di condivisione più grande e disgiunto dagli altri, come per esempio quello mostrato all'inizio del post, allora dovete inserire questo codice

<!--GOOGLE BUZZ INIZIO-->
<div style='text-align:left;'>
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Condividi su Buzz' border='0' src='URL_immagine_bottone' title='Condividi in Google Buzz'/></a>
</div>
<!--GOOGLE BUZZ FINE-->

nel caso di apertura di scheda, mentre se si vuole una finestra popup dovrà essere quest'altro

<!--GOOGLE BUZZ INIZIO-->
<div style='text-align:left;'>
<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'>  <img alt='Condividi in Google Buzz' src='URL_Immagine_Bottone' title='Condividi in Google Buzz'/></a>
</div>
<!--GOOGLE BUZZ FINE-->

Per quanto riguarda la posizione per l'inserimento, una buona opzione potrebbe essere all'inizio del post, subito dopo la riga

<div class='post-body entry-content'>

o comunque una che inizi nello stesso modo (varia a seconda dei modelli). Alternativamente si può scegliere di inserirlo sopra la riga

<data:post.body/>

Le personalizzazioni da fare in questo caso riguardano

1. La posizione: left, center, right (sinistra, centro e destra) eventualmente da sostituire a left evidenziato di rosso. Si possono anche inserire dei margini. Ecco un esempio di come potrebbe diventare la prima riga <div style='text-align:right;margin-top:-40px;'>. Questo per metterla più in alto rispetto agli altri elementi
2. L'URL dell'immagine che si preferisce e che potrà essere scelta tra le seguenti

                    
Per acquisirne l'URL basta cliccare su di esse e copiare l'indirizzo della nuova scheda che viene aperta. Va sostituito a URL_Immagine_Bottone nei codici precedenti.
Se volete vedere questo bottone solo nei post e non in homepage inserite all'inizio e alla fine le due righe evidenziate di rosso nell'esempio seguente

<!--GOOGLE BUZZ INIZIO-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align:left;'>
<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'>  <img alt='Condividi in Google Buzz' src='http://rmf0kw.blu.livefilestore.com/y1pT2fS35Gs83bzO9VwNJ4wQIZlPEN6Is9l7oPuOFd4-fZq77mqvaaznSIXO2shhHH1g7KEnecgSbbNQgCMFMRW_CNyBXWaUONf/buzz-it-verticale.png' title='Condividi in Google Buzz'/></a>
</div>
</b:if>
<!--GOOGLE BUZZ FINE-->

Questo codice è stato inserito nel mio blog di demo, i bottoni non sono presenti in homepage ma possono essere visualizzati aprendo un post qualsiasi.