Я ищу способ подписаться на кнопку "плюс один".
В соответствии с документацией здесь: https://developers.google.com/+/plugins/+1button/#plusonetag-parameters Я могу добавить атрибут callback к тегу, но в моем случае мне не разрешают вмешиваться. Я создаю инструмент ontop сайта, встроенный JS запускается на готовом документе. Я хочу добавить обратный вызов в прямом эфире, и он не должен вмешиваться в исходный обратный вызов, если он был объявлен.
У меня нет этой проблемы с Facebook или Twitter (например, и твит, например). В этих случаях есть глобальные переменные FB и twttr, зарегистрированные так же, как только они доступны:
FB.Event.subscribe("edge.create", function(e) {
console.log(e);
})
или твиттер twttr.events.bind ...
Я что-то упускаю, или Google выбирает очень неудобный способ сделать что-то? Какова их заинтересованность в этом методе и что можно сделать вокруг него?
Вы можете использовать API JavaScript для получения обратного вызова +1.
gapi.plusone.render(
myDomNode,
{ "callback": myCallbackFunction });
Или вы также можете указать атрибут "callback", если используете версию DOM.
В любом случае обратный вызов будет вызван с объектом, который имеет два свойства: href возвращает URL-адрес, который был + 1'd, а state - либо "off", либо "on".
Вы можете пойти дальше, чем Дэйвс, и действительно ввести свой собственный обратный вызов, - но сделайте дополнительный шаг для предварительного извлечения существующего значения обратного вызова и отправьте его самостоятельно в свой собственный обработчик (если есть существующее значение обратного вызова) с помощью те же значения, что и ваш обратный вызов.
Таким образом будет вызван как ваш обработчик, так и исходный обработчик, и, надеюсь, никто не станет мудрым:)
Агрессивным, но обычно выполнимым решением было бы заменить атрибут обратного вызова тега G: PLUSONE своей собственной функцией, которая может вызывать исходный обратный вызов (если он был определен) и делать свои собственные вещи. Google plusone.js script заменяет тег G: PLUSONE на iframe, поэтому это нужно сделать до того, как этот script выполнит (возможно, с помощью DOM-ready hook). Здесь наивный пример (который вы можете видеть в jsfiddle - откройте консоль отладки и нажмите кнопку +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>
... считают, что где-то на главной странице есть тег +1, например:
<g:plusone annotation="inline" callback="originalCallback"></g:plusone>
В качестве побочного примечания я попытался прослушивать удаление тега G: PLUSONE с помощью DOMNodeRemoved и заменить обратный вызов, тогда - но это слишком поздно, и plusone.js script уже привязан к исходному обратному вызову на данном этапе. В реальном мире вы, вероятно, должны попробовать ввести ваш script перед сайтом plusone.js(мы, вероятно, говорим о расширении Chrome или Firefox здесь).
его можно легко выполнить асинхронно:
<!-- add the callback to your html as data-attribute: -->
<div class="g-plusone" data-callback="plusOneClick" data-annotation="inline" data-width="300"></div>
в вашем JS вам необходимо определить функцию обратного вызова и выполнить асинхронную загрузку
// 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);
})();
Чтобы подписаться на событие google plus, вы можете уничтожить кнопку и перестроить ее:
$('#gPlusContainer').html("<div id='gPlusBtn'></div>");
gapi.plusone.render("gPlusBtn", {
"callback": plus_Puzzle,
"size": "tall"
});