Compago

...free knowledge

 
  • Increase font size
  • Default font size
  • Decrease font size
Home Manuali Programmazione Come inserire il pulsante +1 di google in una pagina web

Come inserire il pulsante +1 di google in una pagina web

E-mail Stampa PDF

In questo articolo verrà illustrato come inserire in una pagina web il pulsante di google +1.

Se avete un sito che usa il framework Joomla potere scaricare direttamente il plugin_Google Plus One per Joomla, ma se volete integrare manualmente il pulsante +1 di Google nel vostro sito web occorre inserire del codice javascript/HTML nelle vostre pagine.
Questo codice è composto da due parti, di cui la prima serve a caricare la parte in javascript utile per il funzionamento del pulsante, mentre la seconda serve a posizionare il pulsante all'interno della pagina web.

Per quanto concerne la prima parte aggiungendo la successiva riga di codice in un punto qualsiasi della pagina verrà scaricato ed eseguito un file javascript per il punsante +1 (PlusOne):

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

La lingua predefinita è l'inglese, ma è possibile aggiungere come parametro anche il linguaggio che si vuole utilizzare:

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

In questo caso la lingua selezionata sarà l'italiano, per le altre fate riferimento al seguente elenco:

Language Value
Arabic ar
Bulgarian bg
Catalan ca
Chinese (Simplified) zh-CN
Chinese (Traditional) zh-TW
Croatian hr
Czech cs
Danish da
Dutch nl
English (UK) en-GB
English (US) en-US
Estonian et
Filipino fil
Finnish fi
French fr
Language Value
German de
Greek el
Hebrew iw
Hindi hi
Hungarian hu
Indonesian id
Italian it
Japanese ja
Korean ko
Latvian lv
Lithuanian lt
Malay ms
Norwegian no
Persian fa
Polish pl
Language Value
Portuguese (Brazil) pt-BR
Portuguese (Portugal) pt-PT
Romanian ro
Russian ru
Serbian sr
Slovak sk
Slovenian sl
Spanish es
Spanish (Latin America) es-419
Swedish sv
Thai th
Turkish tr
Ukrainian uk
Vietnamese vi

 

Per quanto riguarda il tag +1 basta aggiungere all'interno della pagina il tag:

<g:plusone></g:plusone>

anche in questo caso naturalmente esistono dei parametri per personalizzare:

Parametro Valore Valore predefinito Descrizione
callback Il nome di una funzione Nessuna funzione La funzione inserita verrà richiamata dopo che l'utente ha fatto clic sul pulsante +1. La funzione di richiamata può accettare un oggetto JSON che avrà il formato {"href": "http://www.example.com/", "state": "on"}, dove href è l'URL del pulsante +1 estate è on per un +1 e off per la rimozione di un +1.
count {true, false} true Indica se mostrare o meno il contatore relativo al pulsante.
href URL su cui fare +1 URL della pagina corrente E' consigliabile specificare sempre l'indirizzo URL che vogliamo utilizzare. Infatti se non specificato il valore sarà quello della pagina web attuale che lo sta ospitando, ma se nella stessa pagina volessimo usare più pulsanti +1 allora per ogniuno di essi dovrà essere usato un URL diverso.
size {small, medium, standard, tall} standard La dimensione del pulsante da caricare.

Quindi un esempio di codice potrebbe essere questo:

<g:plusone count="false" size="small" href="http://www.prova.com"></g:plusone>

Che visualizzerà un pulsante piccolo il quale segnalerà l'indirizzo "http://www.prova.com" e non apparirà il contatore che avrebbe mostrato quante persone hanno cliccato sul pulsante.

Le dimensioni dei diversi tipi di pulsanti sono le seguenti:

Tipo pulsante Esempio Larghezza (px) Altezza (px)
Piccolo senza conteggio
24 15
Piccolo con conteggio
= 70 15
Medio senza conteggio
32 20
Medio con conteggio
= 90 20
Standard senza conteggio
38 24
Standard con conteggio
= 106 24
Grande
50 60

Opzioni avanzate

Per chi avesse delle esigenze particolari è possibile specificare anche altri parametri, come ad esempio il parametro "parsetags", il cui valore predefinito è "onload", cioè che la creazione del pulsante avverrà una volta finito il caricamento della pagina.
Se invece impostassimo il parametro con il valore "explicit" allora il pulsante verrà creato sotto esplicita richiesta tramite le funzioni gapi.plusone.go(container)gapi.plusone.render(container).

Il metodo gapi.plusone.go(container) crea il pulsante nel contenitore specificato, che può essere un elemento html o un ID, se il valore fosse nullo verrebbe creato in tutti i tag "g:plusone" della pagina.

Un esempio di creazione esplicita è questa:

<html>
  <head>
    <title>Demo +1: caricamento esplicito</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>

  </head>
  <body>
    <div id="content">
      <g:plusone></g:plusone>
    </div>

    <script type="text/javascript">
      gapi.plusone.go("content");
    </script>

  </body>
</html>

se invece volessimo inserire dinamicamente il tag +1 in un determinato contenitore allora dovrebbe essere utilizzato il metodo:

gapi.plusone.render(container, {"size": "standard", "count": "true"});

Esempio:

<html>
  <head>
    <title>Demo +1: rendering esplicito</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
    <script type="text/javascript">
      function renderPlusone() {
        gapi.plusone.render("plusone-div");
      }
    </script>

  </head>
  <body>
    <a href="#" onClick="renderPlusone();">Rendering del pulsante +1</a>
    <div id="plusone-div"></div>
  </body>
</html>

Nell'esempio precedente è stato usato tag link per impostare l'URL del pulsante +1:

<link rel="canonical" href="/http://www.example.com" />

Se l'attributo href non è stato impostato, Google cerca il tag rel="canonical" nella pagina. Se non lo trova, Google utilizza il valore della variabile document.location.href. Questo valore finale può talvolta essere fuorviante a causa delle variabili di stato spesso contenute nell'URL, come ad esempio "http://www.example.com?view=pdf" quando quello che interessa è solo "http://www.example.com".
Pertanto, l'uso di un tag rel="canonical" è utile per specificare l'URL esatto su cui deve esser fatto +1.

Infine per chi proprio volesse un generatore automatico per il codice vi raccomando lo strumento per webmaster di google +1 button creator.

Ultimo aggiornamento ( Giovedì 23 Giugno 2011 23:18 )  
Loading

Login




Chiudi