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:
|
|
|
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) o 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.
