2012-03-07 13 views
17

Estoy buscando una forma de suscribirse al botón más uno.Google Plus Devolución de llamada de un botón: ¿hay alguna manera de "suscribirse" a la acción +1?

De acuerdo con la documentación aquí: https://developers.google.com/+/plugins/+1button/#plusonetag-parameters Podría agregar un atributo de devolución de llamada a la etiqueta, pero en mi caso no puedo interferir. Estoy construyendo una herramienta en la parte superior del sitio, un JS incrustado desencadenado en el documento listo. Quiero agregar la devolución de llamada en vivo, y no debe interferir con la devolución de llamada original si se declaró una.

No tengo este problema con Facebook o Twitter (like y tweet, por ejemplo). En estos casos existe el FB y twttr variables globales, registrada como tal una vez que están disponibles:

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

ni nada twttr.events.bind ...

Me estoy perdiendo de Twitter o es Google la elección de una forma muy difícil de hacer las cosas? ¿Cuál es su interés en este método y qué se puede hacer a su alrededor?

+0

¿Cuál es el caso de uso aquí. El propietario del sitio usará su script deliberadamente. ¿Tal vez puede proporcionar información si/cuando ya está utilizando alguna devolución de llamada para el botón +1? – WTK

Respuesta

14

Puede usar el JavaScript API para recuperar el +1 de devolución de llamada.

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

O, alternativamente, puede especificar el atributo "callback" si está utilizando la versión DOM.

En cualquier caso, la devolución de llamada se invocará con un objeto que tiene dos propiedades: href devuelve el URL que fue hecho +1, y state es o bien "off" o "on".

+4

Gracias! Pero, de nuevo, interferiría con la devolución de llamada original en caso de que exista uno. Necesito agregar el mío en _addition_. Es por eso que le di el ejemplo de 'suscribirse' de fb. – ido

+0

Oh, lo siento: tienes razón. – djd

4

Puede ir más allá de la respuesta Daves e inyectar su propia devolución de llamada, pero tome el paso adicional de recuperar previamente el valor de devolución de llamada y enviarlo usted mismo desde su propio controlador (si hay un valor de devolución de llamada existente) con los mismos valores que recibió su devolución de llamada.

De esta forma, tanto el guía y el guía original se llama, y ​​es de esperar que nadie habría ninguna enterarse :)

+0

Moo, ¿cómo harías para recuperar la devolución de llamada existente? el botón '' se elimina y se inserta un iframe en su lugar. – CamelCamelCamel

+0

No he visto cómo Google hace su botón +1, pero definitivamente tiene que pasarse de nuevo al servidor de Google de alguna manera relacionada con ese iFrame, por lo que podría estar en alguna parte de la URL. – Moo

3

Un agresivo, pero por lo general solución viable sería la de sustituir el atributo de devolución de llamada de la G: PlusOne etiqueta con tu propia función, que puede llamar a la devolución de llamada original (si se definió) y también hacer sus propias cosas. El script plusone.js de Google reemplaza la etiqueta G: PLUSONE con un iframe, por lo que debe hacerse antes de que se ejecute este script (probablemente con un gancho listo para DOM). Aquí hay un ejemplo ingenuo (que puede see working on jsfiddle - abrir una consola de depuración y hacer clic en el botón +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 que en algún lugar de la página de acogida que tiene la etiqueta 1, así:

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

Como nota al margen, he tratado de escuchar la eliminación de la etiqueta G: PLUSONE usando DOMNodeRemoved y luego reemplazar la devolución de llamada, pero ya es demasiado tarde y el script plusone.js ya está vinculado a la devolución de llamada original en esta etapa. En el mundo real, probablemente debería intentar inyectar su script justo antes de plusone.js (probablemente estamos hablando de una extensión de Chrome o Firefox aquí).

+0

Gracias. Necesito probar esto, pero aún no funcionará si mi script se carga de forma asíncrona. – CamelCamelCamel

+0

¡Gracias, gran respuesta! Aún así, me gustaría saber si es posible lograr esto de manera asincrónica, también es parte de mi aplicación. ¿Algunas ideas? – ido

+1

No creo que pueda lograrlo de manera asincrónica, ciertamente no de manera confiable. Debe realizar al menos un paso de forma síncrona, antes de que el script plusone.js se cargue y se ejecute: lo que describo más arriba, o - alternativamente - cambie el atributo parsetags de la etiqueta de script plusone.js a "explícito" (consulte https: // developers.google.com/+/plugins/+1button/#script-parameters). Esto evitará que las etiquetas +1 se representen automáticamente, por lo que puede realizar devoluciones de llamadas en cadena y representar los botones con gapi.plusone.render() o gapi.plusone.go() a su gusto, de forma asincrónica. – YKS

1

que puede fácilmente ser hecho de forma asíncrona:

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

en sus JS tiene que definir aa la función de devolución de llamada y ejecutar la carga asíncrona

// 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

Para suscribirse a un Google Plus evento, puede destruir el botón y reconstruirlo:

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