Facebook messenger复选框插件隐藏

我试图在窗体中实现新的Facebook复选框插件，但以一种奇怪的方式，我无法让它显示在屏幕上。所以我不会在客户端出错，但Iframe被隐藏。Facebook messenger复选框插件隐藏

下面的代码的一个简单的例子：

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

有在开发者控制台中没有错误。仅记录插件隐藏：

来源

2016-12-14 Stefanvdk

你看过浏览器开发者控制台吗？它说什么？ – WizKid

开发控制台中没有错误。我添加了状态日志的屏幕截图到帖子 – Stefanvdk

Facebook的更新他们的docs：

腹板插件需要其被用作对用户的标识符的user_ref参数。当用户完成流程时，我们会将此标识符传回给您以标识用户。该参数应该是唯一的，不仅适用于每个用户，而且每次渲染插件时都是如此。如果该参数不唯一，那么该插件可能无法呈现。

您必须为复选框插件的每个渲染生成一个新的user_ref。

清单显示复选框插件

~~使用生产应用ID（未测试的）~~
总是再生user_ref
白名单中origin
使用正确的协议域在origin - http/https

来源

2017-07-04 15:42:04 zatziky

试着改变user_ref。我遇到了同样的问题。然后我发现（偶然），一旦Facebook用户选择加入，复选框将被隐藏，直到您提交一个不同的user_ref。（顺便说一句，这是无处可去的。）

来源

2016-12-20 14:40:13 Sskirch

谢谢，这似乎解决了问题！所以现在我遇到了渲染问题，因为atm我无法在JS中生成一个随机数，并且将它作为插件元素中的user_ref属性值。任何提示？ – Stefanvdk

我现在用PHP代替了JS。现在好了，谢谢你的回答！ – Stefanvdk

@Stefanvdk是否有可能分享您的PHP代码段。 –

嗨我试图实现这一点，并在控制台中获得相同的隐藏状态。

直到用户确认选择加入网页或者是网页加载时可见的复选框，您的网页才会隐藏吗？

谢谢，菲尔

来源

2017-01-11 11:52:08

当网页加载时，该复选框可见。当你说你实施了这个，你究竟是什么意思？你能分享代码吗？ – Stefanvdk

@Stefanvdk是的，这里是我的代码，不能发布太久！ –

我认为出现了问题，因为我看不到代码。你可以试着再分享一次吗？ – Stefanvdk

下面的代码@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>

来源

2017-01-18 11:14:59

感谢您的分享！我看着你的代码，但无法找到问题所在。我访问了你的网站，可以看到你的user_id每次都不一样，所以不是我害怕的。 – Stefanvdk

我有同样的问题，已经尝试生成随机用户ID，但作为菲尔，问题仍然存在。你有解决这个问题的其他解决方案吗？谢谢 –

解决：问题Plugin was hidden是因为messenger应用程序处于开发模式，这就是为什么当你从FB注销时，复选框将不会显示在页面上，并且它将被隐藏，因为没有授权用户会话。但是，作为应用程序的开发人员，所有者和测试人员，您已经登录FB，然后该复选框将显示在页面上，因为那时存在授权会话。

来源

2017-12-20 12:07:49 callmejoejoe

Facebook messenger复选框插件隐藏

回答

相关问题