Pubblicato il 17/07/11e aggiornato il

Come creare un bottone con un link al Profilo di Google+.

La scorsa settimana Google+ ha superato i 10 milioni di utenti e il trend di crescita sembra che sia dell'ordine di un milione di nuove iscrizioni al giorno. Quando diventerà pubblico, presumibilmente i primi giorni di Agosto, nasceranno sicuramente delle applicazioni per postare in automatico nel nuovo social network i contenuti dei nostri blog un po' come avviene con NetworkedBlogs e RSS Graffiti per Facebook. Sarà quindi necessario che i blogger inseriscano dei collegamenti o meglio ancora dei widget che riportino a Google+.

Per il momento è importante avere ben visibile il pulsante Google Plusone in modo da dare la possibilità ai lettori di cliccarci sopra per consigliare le nostre pagine alle loro Cerchie. Oltre a questo aspetto è probabile che i click su tale bottone vengano presi in grossa considerazione anche dall'algoritmo che determina il posizionamento nel motore di ricerca.

E' da poco disponibile anche un altro bottone che crea un collegamento con il nostro Profilo su Google+. Per la sua installazione si accede a Profile Button e si compilano i campi richiesti

bottone profilo di google

  

Nel primo campo si inserisce l'URL del nostro Profilo su Google+, nel secondo si può selezionare la scheda in cui vogliamo che arrivi chi ci clicca sopra. Con Content Page sarà quella Post dei contenuti invece con Author Page il collegamento sarà alla scheda sulle Informazioni personali. Si possono scegliere le dimensioni tra small (10 pixel), standard (32 pixel), medium (44 pixel) e tall (64 pixel). Non resta che vedere l'anteprima sulla destra e copiare il codice nella parte bassa. Si deve incollare in Design > Aggiungi un gadget > HTML/Javascript. Con la Nuova Bacheca di Blogger si va su Layout > Aggiungi un gadget HTML/Javascript. Nei Termini sull'utilizzo del bottone di Google+ è fatto esplicito divieto di modificare la forma del bottone o di usare bottoni diversi da quello fornito da Google. Di default, quando si clicca sul bottone, il Profilo su Google+ si apre nella stessa scheda. Sarebbe semplicissimo fare in modo che si aprisse in un'altra finestra inserendo il tag target="_blank" subito dopo l'URL del Profilo. Non so però se questo sia effettivamente consentito.

Si possono anche inserire i bottoni di Google Plusone e del Profilo su Google+ uno accanto all'altro in una sidebar. Affinché il pulsante del Google +1 funzioni occorre che sia stata preventivamente inserita, subito prima di </head>, la riga

 <script type="text/javascript" src="http://apis.google.com/js/plusone.js">  {lang: 'it'} </script>

Se questo è già stato fatto, un esempio di codice per visualizzare entrambi i bottoni allineati è il seguente

<table cellspacing="0" cellpadding="0">
<tr>   
    <td style="padding-top: 6px;">  
<g:plusone size="tall"></g:plusone>
    </td>
    <td style="padding-left: 15px; padding-top: 8px;">
 <a rel="author" href="URL_PROFILO_GOOGLE+">
  <img src="http://www.google.com/images/icons/ui/gprofile_button-64.png" />
</a>
    </td>    
  </tr>
</table>

Si riferisce ai bottoni più grandi (tall) e le distanze degli elementi in alto (padding-top) e sulla sinistra (padding-left) possono essere personalizzate.

bottono google plusone e profilo In Layout > Aggiungi un gadget > HTML/Javascript è anche possibile digitare un titolo. Va naturalmente incollato l'URL del nostro Profilo. rel="author" conduce il link nella scheda Post mentre rel="me" ha come destinazione la scheda Informazioni. Si tratta dell'HTML di una tabella di una riga e due colonne e il codice dei singoli bottoni è colorato di viola. 





19 commenti :

  1. ho inserito il tuo codice nel widget, va bene grazie, non ho messo la scritta "consiglia su Google" perchè mi sembra superflua visto che il pulsante +1 tra poco lo conosceranno tutti e poi perchè sarebbe meglio scrivere "Google +1 profilo Google+"visto che c è anche il pulsante di del profilo.

    RispondiElimina
  2. ciao c'è un modo per aggiungere una parola al titolo di tutti i post che venga visualizzata in alto nella ricerca ma non nel titolo del post?
    grazie

    RispondiElimina
  3. @boston blog
    Temo di non aver capito. Cosa vuol dire visualizzare una parola nella ricerca? Nei risultati di Google? Se è così puoi usare il metatag description per ciascun post inserendolo in modalità HTML
    http://www.ideepercomputeredinternet.com/2009/09/come-aggiungere-le-metatag-descrizione.html
    dove al posto si Descrizione del blog ci metti la descrizione del post.

    RispondiElimina
  4. scusa non mi sono spiegato bene, intendo quando apri un post sopra nella nuova scheda aperta insieme al nome del post venga visualizzata una parola applicabile a tutti i post esempio:
    https://lh6.googleusercontent.com/-PIJ3mxZ_y5I/TuNj66PLsxI/AAAAAAAAAzM/RFNWDr7q7HY/s400/Cattura.PNG

    RispondiElimina
  5. @boston blog
    Quello viene mostrato dal browser, non c'entra nulla con il sito. Con i blog su Blogger non accade, almeno non mi risulta, mentre con Wordpress si può configurare il nome del post in modo tale da mettere alla fine del titolo anche il nome del blog.

    RispondiElimina
  6. ok,grazie mille per il lavoro che fai :)

    RispondiElimina
  7. A proposito di bottoni e scusami se esco un pò fuori tema:
    come faccio, una volta sfiarato il bottone col mause,ad attivare la sua funzione.
    Per esempio al bottone Home appunto la voce Home.
    Spero di essere stato chiaro.

    Grazie ancora per l'OTTIMO servizio che ci fornisci.

    RispondiElimina
  8. @francescomisc
    Spero di aver capito ;) opo aver puntato il bottone con il mouse ti apparirà una specie di menù verticale in cui puoi mettere la spunta a una cerchia in cui inserire il sito in oggetto.
    P.S. Spero di essere stato chiaro anch'io :D

    RispondiElimina
  9. Perdonami ernesto ma mi rendo conto di non essermi assolutamente espresso in maniera sufficiente:
    Se vai sul mio Blog, trovi nella parte destra tre bottoni, ecco la mia domanda è questa:
    Come faccio, una volta sfiorati col mause, var apparire la funzione del bottone stesso? Bottone home, scritta home.

    Scusami ancora e grazie per la pazienza

    RispondiElimina
  10. @francescomisc
    Ti riferisci a questo sito?
    http://icacquaviva.blogspot.com/
    Io vedo tre immagini nella sidebar di destra ma non capisco cosa intendi. Forse vorresti avere un menù? Non lo so proprio, mi spiace :(
    Per collegare una immagine a un link il codice è questo
    <a href="URL COLLEGAMENTO"><img src="URL IMMAGINE"></a>
    Forse ti riferivi a questo :P

    RispondiElimina
  11. Perdonami ancora ernesto e scusami:
    Il blog è:
    www.interclubacquaviva.blogspot.com

    Domanda: sfiorando col mause i tre bottoni in alto a destra, come faccio a far comparire la funzione del bottone stesso?
    Bottone hause, scritta hause. Bottone feed, scritta feed...

    grazie,frazie, grazie e scusami!!!

    RispondiElimina
  12. @francescomisc
    Devi prima trovare gli URL delle icone con il destro del mouse e cliccando su Copia URL Immagine. La prima ha questo URL
    http://2.bp.blogspot.com/-qF1HHJ3k1hA/TtfRvA8VtfI/AAAAAAAAEsQ/pgbRwSFVqWI/s1600/1317049066_9.jpeg
    Quindi vai su Modello > Modifica HTML > Procedi e espandi i modelli widget. Ci sarà un codice come questo
    <a href=" ... " /><img src="http://2.bp.blogspot.com/-qF1HHJ3k1hA/TtfRvA8VtfI/AAAAAAAAEsQ/pgbRwSFVqWI/s1600/1317049066_9.jpeg"></a>

    che tu dovrai modificare in questo modo

    <a href=" ... " title="Home"/><img src="http://2.bp.blogspot.com/-qF1HHJ3k1hA/TtfRvA8VtfI/AAAAAAAAEsQ/pgbRwSFVqWI/s1600/1317049066_9.jpeg"></a>

    In questo modo se si passerà con il mouse (non mause) sulla icona si vedrà Home. Lo stesso con le altre icone, puoi mettere title="Contattami" e title="Iscriviti ai feed"

    RispondiElimina
  13. Grande Ernesto, anche nel correggere il mio pessimo inglese.

    grazie ancora

    RispondiElimina
  14. Purtroppo il codice da modificare, o parte di esso, non riesco a trovarlo con f3.....:((((((((

    RispondiElimina
  15. @francescomisc
    Ma quando mai ...
    Si vede anche dal sorgente pagina :)
    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://www.interclubacquaviva.blogspot.com/"><img border="0" src="http://2.bp.blogspot.com/-qF1HHJ3k1hA/TtfRvA8VtfI/AAAAAAAAEsQ/pgbRwSFVqWI/s1600/1317049066_9.jpeg" /></a>&nbsp;<a href="http://interclubacquaviva.blogspot.com/2007/07/scrivi-allinterclub-acquaviva.html"><img border="0" src="http://4.bp.blogspot.com/-sL7GBQqNFGA/TtfR5w9waXI/AAAAAAAAEsg/gPnIEhonSXs/s1600/posta.jpg" /></a>&nbsp;<a href="http://feeds2.feedburner.com/feedburner/sREb"><img border="0" src="http://2.bp.blogspot.com/-thjYuRez1VE/TtfR1s3etRI/AAAAAAAAEsY/ytUJ2Mg8yPw/s1600/feed.jpeg" /></a></div>

    RispondiElimina
  16. Al posto di questo
    <a href="http://www.interclubacquaviva.blogspot.com/"><img border="0" src="http://2.bp.blogspot.com/-qF1HHJ3k1hA/TtfRvA8VtfI/AAAAAAAAEsQ/pgbRwSFVqWI/s1600/1317049066_9.jpeg" /></a>
    metti quest'altro
    <a href="http://www.interclubacquaviva.blogspot.com/" title="Home"><img border="0" src="http://2.bp.blogspot.com/-qF1HHJ3k1hA/TtfRvA8VtfI/AAAAAAAAEsQ/pgbRwSFVqWI/s1600/1317049066_9.jpeg" /></a>

    RispondiElimina
  17. @francescomisc
    Quel codice non ce l'hai nel modello ma lo hai postato in un widget della sidebar

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.