2012-03-07 3 views
17

더하기 버튼을 구독하는 방법을 찾고 있습니다.Google Plus One 버튼 콜백 - +1 활동을 구독하는 방법은 무엇인가요?

설명서에 따르면 https://developers.google.com/+/plugins/+1button/#plusonetag-parameters 태그에 콜백 속성을 추가 할 수는 있지만 방해 할 수없는 경우입니다. 필자는 사이트의 툴 온톨 (ontop)을 작성하고있다. 임베디드 JS는 문서를 준비 할 때 트리거된다. 콜백을 추가하고 싶습니다. 콜백이 선언 된 경우 콜백을 방해해서는 안됩니다.

페이스 북이나 트위터 (예 : 트위터 등)에이 문제가 없습니다. 이러한 경우가 그들이 사용할 수있는 한 번과 같이 등록 된 FB 및 twttr 전역 변수를,이다 :

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

또는 트위터의 twttr.events.bind ...

내가 실종 무엇이든 또는 Google이 일을 할 수있는 매우 어색한 방법을 선택하고있다? 이 방법에 대한 관심과 그 주위에서 할 수있는 일은 무엇입니까?

+0

여기에는 어떤 사용 사례가 있습니다. 사이트 소유자가 의도적으로 스크립트를 사용합니까? 이미 +1 버튼에 콜백을 사용하고 있다면 정보를 제공 할 수 있습니까? – WTK

답변

14

JavaScript API을 사용하여 +1 콜백을 검색 할 수 있습니다.

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

또는 DOM 버전을 사용하는 경우 "callback" 속성을 지정할 수도 있습니다. 어느 경우

는, 콜백은 두 가지 속성을 가진 개체로 호출됩니다 : +1했다 URL을 반환 hrefstate"off" 또는 "on" 중 하나입니다.

+4

감사합니다. 그러나 다시 한번 원래의 콜백을 방해 할 수 있습니다. _addition_에 광산을 추가해야합니다. 그것이 fb의 '구독'예제를 준 이유입니다. – ido

+0

아, 죄송합니다. 당신 말이 맞습니다. – djd

4

당신은 Daves 응답보다 하나 더 나아갈 수 있으며 실제로 자신의 콜백을 주입 할 수 있습니다. 그러나 기존 콜백 값을 미리 검색하고 자신의 처리기 (기존 콜백 값이있는 경우)에 직접 디스패치하는 추가 단계를 수행하십시오. 받은 콜백과 동일한 값.

그 방법 핸들러 원래 핸들러 모두가 호출되고, 희망 아무도 어떤 현명한 :

+0

Moo, 기존 콜백을 검색하는 방법은 무엇입니까? ''버튼이 제거되고 iframe이 그 자리에 삽입됩니다. – CamelCamelCamel

+0

Google에서 +1 버튼을 어떻게 처리하는지는 보지 못했지만 iFrame과 관련된 방식으로 어떻게 든 Google 서버로 전달되어야하므로 URL 어딘가에있을 수 있습니다. – Moo

3

적극적인하지만 일반적으로 가능한 솔루션은 G의 콜백 속성을 대체하는 것입니다 없을 것입니다 : 플러스 원 태그를 사용하여 원래 콜백 (정의 된 경우)을 호출하고 자체적 인 기능을 수행 할 수 있습니다. Google의 plusone.js 스크립트는 G : PLUSONE 태그를 iframe으로 바꿉니다. 따라서이 스크립트가 실행되기 전에 완료되어야합니다 (DOM 준비 후크 포함). 여기에 간단한 예가 있습니다 (see working on jsfiddle - 디버그 콘솔을 열고 +1 버튼 클릭). 당신이 +1 태그가 그래서 같은 호스트 페이지의 어딘가에 persume

<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> 
... : 보조 노트로

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

, 나는 청취하려고했습니다 DOMNodeRemoved를 사용하여 G : PLUSONE 태그를 제거한 다음 콜백을 바꾼다.하지만 너무 늦기 때문에 plusone.js 스크립트는 이미이 단계에서 원래 콜백에 바인딩되어있다. 현실 세계에서는 plusone.js 바로 전에 스크립트를 삽입해야합니다 (여기에서는 Chrome 또는 Firefox 확장 프로그램에 대해 이야기 할 것입니다).

+0

감사합니다. 이 테스트해야하지만 내 스크립트를 비동기 적으로로드 할 경우 여전히 작동하지 않습니다. – CamelCamelCamel

+0

감사합니다. 훌륭한 답변입니다. 여전히 비동기 적으로이 작업을 수행 할 수 있는지 여부를 알고 싶습니다. 이는 응용 프로그램의 일부이기도합니다. 어떤 아이디어? – ido

+1

신뢰할 수있는 방식으로 비동기 적으로이를 확실히 달성 할 수 있다고는 생각하지 않습니다. plusone.js 스크립트가로드되고 실행되기 전에 적어도 하나의 단계를 동 기적으로 수행해야합니다. 위에서 설명한 내용 또는 plusone.js 스크립트 태그의 parsetags 속성을 "explicit"로 변경해야합니다 (https : // 참조). developers.google.com/+/plugins/+1button/#script-parameters). 이렇게하면 +1 태그가 자동으로 렌더링되지 않으므로 콜백을 연결하고 여유있게 gapi.plusone.render() 또는 gapi.plusone.go()로 버튼을 렌더링 할 수 있습니다. – YKS

1

가 쉽게 비동기 적으로 수행 할 수 있습니다 : 당신의 JS에서

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

을 당신은

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

는 구글 플러스 이벤트, 당신이 할 수있는에 가입하려면 비동기 로딩을 AA 콜백 함수를 정의하고 실행해야 버튼을 파괴하고 다시 작성하십시오.

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