2016-12-14 5 views
8

폼에 새로운 페이스 북의 체크 박스 플러그인을 구현하려고하는데 이상한 방법으로 화면에 표시 할 수 없습니다. 따라서 클라이언트 측에서 오류가 발생하지는 않지만 Iframe은 숨겨져 있습니다.페이스 북의 메신저 체크 박스 플러그인이 숨겨져 있습니다

다음은 코드의 간단한 예입니다 :

<html> 
<head> 
<script> 
    window.fbAsyncInit = function() { 
     FB.init({ 
      appId  : '1815704925309469', 
      xfbml  : true, 
      version : 'v2.6' 
     }); 

     FB.Event.subscribe('messenger_checkbox', function(e) { 
      console.log("messenger_checkbox event"); 
      console.log(e); 

      if (e.event == 'rendered') { 
       console.log("Plugin was rendered"); 
      } else if (e.event == 'checkbox') { 
       var checkboxState = e.state; 
       console.log("Checkbox state: " + checkboxState); 
      } else if (e.event == 'not_you') { 
       console.log("User clicked 'not you'"); 
      } else if (e.event == 'hidden') { 
       console.log("Plugin was hidden"); 
      } 
     }); 
    }; 

    (function(d, s, id){ 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) {return;} 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_US/sdk.js"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk') 
    ); 

    function confirmOptIn() { 
     FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, { 
      'app_id':'1815704925309469', 
      'page_id':'1711063052543482', 
      'ref':'shopping-cart-company', 
      'user_ref':'1234' 
     }); 
    } 
</script>  

<div class="col-md-7"> 
    <div class="fb-messenger-checkbox" 
     origin=https://shopping-cart-company.herokuapp.com/index.html 
     page_id=1711063052543482 
     messenger_app_id=1815704925309469 
     user_ref="1234" 
     prechecked="true" 
     allow_login="true" 
     size="large"> 
    </div> 
</div> 

<body> 
    <input type="button" onclick="confirmOptIn()" value="Confirm Opt-in"/> 
</body> 

dev에 콘솔에 오류가 없습니다. 만 플러그인이 숨겨져 있음을 기록합니다

Screenshot of dev console message

+0

개발자 콘솔을 살펴 보셨습니까? 그것은 무엇을 말하는가? – WizKid

+0

dev 콘솔에 오류가 없습니다.게시물에 국가 로그의 스크린 샷을 추가했습니다. – Stefanvdk

답변

3

페이스 북 업데이트 코드의 자신의 docs :

웹 플러그인은 사용자의 식별자로 사용되는 user_ref 매개 변수를 . 사용자가 플로우를 완료하면이 식별자를 다시 사용자에게 전달하여 사용자를 식별합니다. 이 매개 변수는 모든 사용자가 아니라 플러그인이 렌더링 될 때마다 고유해야합니다. 매개 변수가 고유하지 않으면 플러그인이 렌더링되지 않을 수 있습니다.

체크 박스 플러그인의 모든 렌더링에 대해 새 user_ref을 생성해야합니다. CheckBox의 플러그인을 표시

체크리스트

  • 사용 생산 앱 ID
  • 항상 user_ref
  • 화이트리스트를 재생 (안 테스트 한) origin
  • 사용 올바른 프로토콜의 도메인에 origin - http/https
0

는 user_ref을 변경해보십시오. 나는 같은 문제를 겪고 있었다. 그런 다음 Facebook 사용자가 동의하면 다른 user_ref를 제출할 때까지 확인란이 숨겨 짐을 (우연히) 발견했습니다. (이것은 어디에도 문서가 없습니다.)

+0

감사합니다. 문제가 해결 된 것 같습니다. 이제는 렌더링에서 문제가 생겼습니다. atm에서 JS에서 임의의 숫자를 생성 할 수 없으며이를 플러그인 요소의 user_ref에 대한 속성 값으로 지정할 수 없기 때문입니다. 팁이 있습니까? – Stefanvdk

+0

JS 대신 PHP로 작업하고 있습니다. 지금은 괜찮아요. 답해 주셔서 감사합니다! – Stefanvdk

+0

@Stefanvdk는 PHP 코드 스 니펫을 공유하는 것이 가능합니다. –

4

안녕하세요, 저는 이것을 구현하고 콘솔에서 동일한 숨겨진 상태를 얻으려고합니다.

사용자가 동의 여부를 확인하거나 웹 페이지가로드 될 때 확인란이 표시 될 때까지 내 콘텐츠가 숨겨져 있습니까?

감사합니다, 필

+0

웹 페이지가로드 될 때 확인란이 표시됩니다. 당신이 이것을 구현했다고 말하면 정확히 무엇을 의미합니까? 코드 pls를 공유 할 수 있습니까? – Stefanvdk

+0

@Stefanvdk 예 여기에 제 코드가 있습니다. 너무 오래 게시 할 수 없습니다! –

+0

코드를 볼 수 없기 때문에 뭔가 잘못되었다고 생각합니다. 다시 공유 해보시겠습니까? – Stefanvdk

0

여기 @Stefanvdk

<script> 
window.fbAsyncInit = function() { 
    FB.init({ 
     appId  : '341168946244551', 
     xfbml  : true, 
     version : 'v2.6' 
    }); 

    FB.Event.subscribe('messenger_checkbox', function(e) { 
     console.log("messenger_checkbox event"); 
     console.log(e); 

     if (e.event == 'rendered') { 
      console.log("Plugin was rendered"); 
     } else if (e.event == 'checkbox') { 
      var checkboxState = e.state; 
      console.log("Checkbox state: " + checkboxState); 
     } else if (e.event == 'not_you') { 
      console.log("User clicked 'not you'"); 
     } else if (e.event == 'hidden') { 
      console.log("Plugin was hidden"); 
     } 
    }); 
}; 

(function(d, s, id){ 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk') 
); 

function confirmOptIn() { 
    FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, { 
     'app_id':'341168946244551', 
     'page_id':'238619342849536', 
     'ref':'shopping-cart-company', 
     'user_ref':'<?=$random_val?>' 
    }); 
} 
</script>  

<?php $random_val=rand(100000,999999);?> 

<div class="fb-messenger-checkbox" 
origin=https://stablevehiclecontracts.co.uk/checkbox3.php 
page_id=238619342849536 
messenger_app_id=341168946244551 
user_ref="<?=$random_val?>" 
prechecked="true" 
allow_login="true" 
size="large"> </div> 
+0

공유해 주셔서 감사합니다! 나는 당신의 코드를 들여다 보았지만 잘못된 점을 발견 할 수 없었다. 나는 당신의 웹 사이트를 방문했고, 당신이 user_id가 매번 다른 것을 볼 수있었습니다. 그래서 그것은 두렵지 않습니다. – Stefanvdk

+0

나는 동일한 문제를 겪어 왔지만 이미 임의의 사용자 ID를 생성하려고 시도했지만 Phil처럼 문제는 계속 발생합니다. 이 문제에 대한 다른 해결책이 있습니까? 감사합니다. –

1

해결 : Plugin was hidden의 문제는 메신저 앱이 개발 모드에 있기 때문에 FB에서 로그 아웃 한 경우 페이지에 체크 박스가 표시되지 않고 승인 된 사용자가 없어서 숨겨집니다. 세션. 그러나 FB에 앱의 개발자, 소유자, 테스터로 로그인 한 상태에서 승인 된 세션이 있기 때문에 체크 박스가 페이지에 표시됩니다.