Pubblicato il 13/02/10 - aggiornato il  | 9 commenti :

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
Condividi in Google Buzz
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
google-buzz-1

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
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
google-buzz-icona
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

buzz-it               buzz-it-2      buzz-it-3
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.


9 commenti :

  1. ciao Pars,
    prossimamente lo inseriro nel mio blog questo tasto, ... è che ancora non vedo una novità in questo buzz... bho. magari se mette in seguito una videochat tipo video conferenza allora si che ci si tufferebbero tante persone.
    Volevo chiederti se ti può interessare come si mette sul blog uno script che fa vedere google wiew tipo quello che ha messo questo sito di annunci immobiliare
    http://www.casa.it/immobili/15402355.html?Region=lazio&Province=roma&Locality=roma&ContractType=vendita&BuildingType=residenziale&zone=29440
    probabilmente potrebbe interessare anche ad altre persone.
    Ciao e ti seguo sempre.

    RispondiElimina
  2. @vit
    Siti di questo tipo ne ho già presentati come UMapper
    http://parsifal32.blogspot.com/2009/02/come-creare-delle-mappe-interattive-da.html
    oppure Quickmaps
    http://parsifal32.blogspot.com/2009/08/quickmaps-per-generare-delle-mappe-per.html
    Ce ne sono certamente altri. Senza considerare che possiamo attingere direttamente da Google Maps.
    Ciao

    RispondiElimina
  3. si lo so che in google ci sono script già preconfezionati... tipo questo
    http://www.google.com/webelements/maps/
    ma non ho trovato quello sulle street view
    pensavo che si costruiva in qualche modo o si potesse prendere da qualche parte.

    RispondiElimina
  4. @vit
    La mappa a cui hai fatto riferimento è prodotta da questa società
    http://www.teleatlas.com/index.htm
    e non mi risulta che produca mappe gratuitamente. Magari mi informo meglio.
    Ciao

    RispondiElimina
  5. Credo che Google Buzz sarà una grande rivoluzione, soprattutto quando si svilupperanno meglio le opzioni per la geolocalizzazione tramite cellulare. Inizia la rivoluzione del social networking.

    iBen

    http://gbuzzmania.blogspot.com

    RispondiElimina
  6. Ciao, Parsifal, e complimenti per i tuoi articoli sempre azzeccati. Pensi sia possibile inserire il bottone di Buzz nel tuo Sexy Widget?

    Scusa, magari la risposta è ovvia, ma io sono totalmente digiuno di tecnica!

    RispondiElimina
  7. @GreyBears61
    Certo che è possibile però dovremo modificare le immagini dei pulsanti. Nel sexy widget l'immagine è una sola per tutti i bottoni. Bisognerebbe cambiarla. Si trova a questo indirizzo
    http://public.blu.livefilestore.com/y1pkTH5fL28-xEK6WGPKzuFsqwhOZFRcjzXoeF1Qh94MCRsiJbXntCZTiQ2hmmbcazthF2os2dEd_gmnTICQF64oA/sexybottoni.png
    Se qualche grafico introduce la modifica, per quanto riguarda il codice non ci dovrebbero essere problemi. Mi informerò.
    Ciao

    RispondiElimina
  8. Ciao!
    Ti ringrazio moltissimo per l'html che hai condiviso, sto arricchendo il mio blog (http://le-belle-ragazze.blogspot.com) con il tuo set di bottoni di condivisione.
    Mi farebbe piacere utilizzare anche bottoni per MySpace, Live e per la mail (la classica "busta")... mi puoi aiutare (anzi, CI puoi aiutare - sicuramente non sono l'unico)?
    Grazie mille! :)

    RispondiElimina
  9. @Bonač
    Se se interessato a MySpace e alla email potrebbe andarti bene il sexywidget
    http://parsifal32.blogspot.com/2010/01/come-inserire-il-sexy-widget-con-i.html
    Per inserire questi bottoni singolarmente se ho un po' di tempo cercherò di farlo. Comunque per la email c'è già su Blogger l'icona della busta per inviare l'articolo.
    La condivisione su Live la vedo però alquanto difficile...

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy