2012-03-07 8 views
17

Sto cercando un modo per iscriversi al pulsante più uno.Chiamata di Google Plus One button - Qualsiasi modo per "iscriversi" all'azione +1?

Secondo la documentazione qui: https://developers.google.com/+/plugins/+1button/#plusonetag-parameters Potrei aggiungere un attributo callback al tag, ma nel mio caso non mi è permesso interferire. Sto costruendo uno strumento ontop del sito, un JS incorporato attivato su documento pronto. Desidero aggiungere il callback dal vivo e non deve interferire con il callback originale se ne è stato dichiarato uno.

Non ho questo problema con Facebook o Twitter (come e tweet, per esempio). In questi casi c'è la FB e twttr variabili globali, registrato in questo modo una volta che sono disponibili:

FB.Event.subscribe("edge.create", function(e) { 
    console.log(e); 
}) 

o di Twitter twttr.events.bind ...

Mi sto perdendo qualcosa o è Google la scelta di un modo molto imbarazzante per fare le cose? Qual è il loro interesse per questo metodo e cosa si può fare intorno ad esso?

+0

Qual è il caso d'uso qui. Il proprietario del sito userà deliberatamente la tua sceneggiatura? Forse può fornire informazioni se/quando sta già utilizzando un callback per il pulsante +1? – WTK

risposta

14

È possibile utilizzare lo JavaScript API per recuperare la richiamata +1.

gapi.plusone.render(
    myDomNode, 
    { "callback": myCallbackFunction }); 

Oppure, in alternativa è possibile specificare l'attributo "callback" se si sta utilizzando la versione DOM.

In entrambi i casi, la richiamata viene chiamato con un oggetto che ha due proprietà: href restituisce l'URL che era fatto +1, e state è o "off" o "on".

+4

Grazie! Ma poi di nuovo, interferirebbe con il callback originale nel caso esista. Devo aggiungere il mio in _addition_. Ecco perché ho dato l'esempio di 'iscrizione' di fb. – ido

+0

Oh, mi dispiace: hai ragione. – djd

4

Si potrebbe andare oltre la risposta di Daves e in effetti immettere il proprio callback, ma fare il passo in più per recuperare il valore di callback esistente e inviarlo personalmente al proprio gestore (se esiste un valore di callback esistente) con gli stessi valori ricevuti dalla richiamata.

In questo modo sia il gestore e gestore originale sarà chiamato, e si spera che nessuno sarebbe stato niente di più saggio :)

+0

Moo, come andresti a recuperare il callback esistente? il pulsante '' viene rimosso e un iframe viene inserito al suo posto. – CamelCamelCamel

+0

Non ho guardato come Google fa il loro pulsante +1, ma sicuramente deve essere restituito al server di Google in qualche modo in relazione a quell'iframe, quindi potrebbe trovarsi nell'URL da qualche parte. – Moo

3

Un aggressivo, ma di solito soluzione praticabile sarebbe quella di sostituire l'attributo di callback del G: plusone tag con la tua funzione, che può chiamare il callback originale (se ne è stato definito uno) e fare anche le proprie cose. Lo script plusone.js di Google sostituisce il tag G: PLUSONE con un iframe, quindi questo deve essere fatto prima dell'esecuzione di questo script (probabilmente con un hook DOM-ready). Ecco un esempio ingenuo (che puoi see working on jsfiddle - aprire una console di debug e fare clic sul pulsante +1).

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
var originalCallback = function(o) { 
    console.log('original callback - ' + o.state); 
}; 
// on DOM ready 
$(function() { 
    var plusoneTag = $('G\\:PLUSONE'); 
    var originalCallbackName = $(plusoneTag).attr('callback'); 
    // global function 
    hijackerCallback = function(o) { 
     console.log('hijacking callback - ' + o.state); 
     window[originalCallbackName](o); 
    }; 
    plusoneTag.attr('callback', 'hijackerCallback'); 
}); 
</script>  
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 

... persume che da qualche parte nella pagina host avete il tag +1, in questo modo:

<g:plusone annotation="inline" callback="originalCallback"></g:plusone> 

Come nota a margine, ho cercato di ascoltare la rimozione del tag G: PLUSONE usando DOMNodeRemoved e sostituisci il callback quindi - ma è troppo tardi e lo script plusone.js è già associato al callback originale in questa fase. Nel mondo reale, probabilmente dovresti provare a iniettare il tuo script poco prima di plusone.js (probabilmente stiamo parlando di un'estensione per Chrome o Firefox qui).

+0

Grazie. Ho bisogno di testare questo, ma ancora non funzionerà se il mio script viene caricato in modo asincrono. – CamelCamelCamel

+0

Grazie, ottima risposta! Tuttavia, mi piacerebbe sapere se è possibile eseguire questo in modo asincrono, è anche una parte della mia applicazione. Qualche idea? – ido

+1

Non penso che si possa raggiungere questo in modo affidabile in modo asincrono, certamente non in modo affidabile. È necessario eseguire almeno un passaggio in modo sincrono, prima che lo script plusone.js venga caricato ed eseguito: o quello che descrivo sopra, o - in alternativa - cambia l'attributo parsetags del tag dello script plusone.js su "esplicito" (vedi https: // developers.google.com/+/plugins/+1button/#script-parameters). Ciò impedirà il rendering automatico dei tag +1, quindi puoi concatenare i callback e rendere i pulsanti con gapi.plusone.render() o gapi.plusone.go() a tuo piacimento, in modo asincrono. – YKS

1

si può facilmente essere fatto in modo asincrono:

<!-- add the callback to your html as data-attribute: --> 
<div class="g-plusone" data-callback="plusOneClick" data-annotation="inline" data-width="300"></div> 

nei tuoi JS è necessario definire aa funzione di callback ed eseguire il caricamento asincrono

// define your callback function 
function plusOneClick(response) { 
    ... 
} 

// load your google+ stuff async 
(function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/plusone.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
})(); 
0

di sottoscrivere un Google Plus evento, è possibile distruggere il pulsante e ricostruirlo:

$('#gPlusContainer').html("<div id='gPlusBtn'></div>"); 
gapi.plusone.render("gPlusBtn", { 
    "callback": plus_Puzzle, 
    "size": "tall" 
}); 
Problemi correlati