2

I am trying to implement Facebook Messenger Checkbox Plugin into my AngularJS application. I am following this guide https://developers.facebook.com/docs/messenger-platform/plugin-reference/checkbox-plugin.

I managed to get it working. I navigate to the page and my messenger checkbox plugin is displayed, but when I navigate to another page and then get back to this page that contains Facebook Checkbox Messenger Plugin it is not rendered and I don't have anything logged from Facebook.

This is my init process for FB

$window.fbAsyncInit = function () {
    FB.init({
      appId: 'MY_FACEBOOK_APP_ID',
      xfbml: true,
      version: 'v2.8'
    });
};
(function (d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   var fbElement = d.getElementById(id);
   if (fbElement) {
     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'));

and this is my directive for facebook messenger checkbox plugin

<div 
    class="fb-messenger-checkbox"
    origin="{{origin}}"
    page_id="{{pageId}}"
    messenger_app_id="{{messengerAppId}}"
    user_ref="{{userRef}}"
    prechecked="true"
    allow_login="true"
    size="xlarge">
</div>

Like I said everything is ok when I navigate first time to the page (then Facebook Checkbox Messenger plugin is rendered). After that when I navigate to another page and get back the plugin is not displayed anymore. There are no any errors and also I do recalculate user_ref parameter every time to be a random string.

It seems to me that when one time FB.init is called after that when I navigate back to that page (even if I don't FB.init again) something is wrong.

Does anyone know what can be a problem?

user3362996
  • 41
  • 1
  • 3

5 Answers5

2

make sure you are generating unique user_ref each time when page renders. If same user_ref is given then checkbox will not render

shan kulkarni
  • 849
  • 7
  • 18
0

For one, you need to whitelist/register your domain with fb.

Ram
  • 327
  • 2
  • 20
  • Yes I whitelisted the domain. I think facebook app settings are ok because like I said facebook messenger checkbox plugin is actually working but just the first time I navigate to that page that contains it. When I navigate second/third/etc time it just render the html I provided but it seems like facebook script is not triggered and it is not rendering the iframe inside the html I provided. – user3362996 Feb 09 '17 at 08:16
  • Is it exposed publically? What's the URL? – Ram Feb 10 '17 at 22:26
0

I had the same problem and you need to use in your javascript code:

FB.XFBML.parse(document.getElementById('fb-messenger_checkbox')); (ezfb instead of FB if you are using angular-easyFb like I do)

You can also try it in the console while you are on your app, it renders the plugin too if you did everything else correct :

  • Whitelisted your domain
  • Randomized the user-ref (for example $scope.userRef = Math.floor((Math.random() * 10000000000000) + 1);)

PS : if you are using angular-easyfb, you don't need to load any $window.fbAsyncInit, ezfb do it for you

Dimitri Dedusse Odyssound
  • 31
  • 4
0

Be sure to check all these Troubleshooting Tips

  1. Verify that your bot is actually approved for the pages_messaging permission.
  2. Verify that your page has webhook subscription to your bot.
  3. If you see a console error like "Refused to display * in a frame because an ancestor violates the following Content Security Policy directive: *", check that the domain of the page the plugin is being rendered on has been whitelisted.
  4. If the allow_login parameter is set to false, you will need to have a valid Facebook user session (i.e. not logged in) otherwise the plugin will be hidden.

These are from Facebook https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin

Pay extra attention to the number 2 Verify that your page has webhook subscription to your bot. You can use this page https://developers.facebook.com/docs/messenger-platform/getting-started/app-setup to learn how to subscribe your page to your bot.

Loc
  • 1
  • 2
0

Try this steps:

  1. Move <div id="fb-root"></div> to index page, because when Facebook sdk is loaded he's add some logic to fb-root.
  2. in controller which response for page with plugin add this code to $onInit method: if (window.FB) { window.FB.XFBML.parse(); }

So, the problem is when you go to another page fb-root with some logic is destroyed and FB.XFBML does't work anymore.

Denis
  • 1
  • 2