Send-to-messenger plugin not showing - facebook

Question

My Send-to-messenger plugin is not appearing on my website.
Here is my config:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxx',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-send-to-messenger"
messenger_app_id="xxxxx"
page_id="vvvvv"
color="blue"
size="large">
</div>
The html generated by this code on this page: https://www.weekendr.eu/bonsplans seems ok, but the button would still not appear.
Some elements which may help :
I'm on prod env
My website has https: https://www.weekendr.eu
My app is published and online
I'm admin and connected to FB besides
I allow third-party cookies
Thanks !

Answer 1

I can see your code and found you are missing to subscribe event.
FB.Event.subscribe('send_to_messenger', function(e) {
// callback for events triggered by the plugin
});
Please find full code below :
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.2'
});
FB.Event.subscribe('send_to_messenger', function(e) {
// callback for events triggered by the plugin
console.log(e);
});
};
(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 = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-send-to-messenger"
messenger_app_id="<Your App ID>"
page_id="<Your Page ID>"
data-ref="1"
color="blue"
size="large">
</div>
In extra, you need to follow below steps before you write above code:
1) Add your domain into the white list (Go to your facebook page -> setting)
2) Create webhook in your server and write below code (Code is in PHP. You can use any language)
For node js: https://developers.facebook.com/docs/messenger-platform/getting-started/webhook-setup
<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
//Write code to listen webhook request
} else {
$VERIFY_TOKEN = '1234';
$mode = $_REQUEST['hub_mode'];
$token = $_REQUEST['hub_verify_token'];
$challenge = $_REQUEST['hub_challenge'];
if ($mode && $token) {
// Checks the mode and token sent is correct
if ($mode === 'subscribe' && $token === $VERIFY_TOKEN) {
// Responds with the challenge token from the request
console.log('WEBHOOK_VERIFIED');
echo $challenge;
http_response_code(200);
} else {
// Responds with '403 Forbidden' if verify tokens do not match
http_response_code(403);
}
} else {
http_response_code(403);
}
}
?>
3) Goto apps settings and verify your webhook
Setting URL :
https://developers.facebook.com/apps/<Your App ID>/messenger/settings/
Now you should be able to view the "Send to Messenger" button
Note: If app is in development then Admin, developer & tester can only see this button.

Answer 2

You need to whitelist your domain (https://www.weekendr.eu) in the Messenger Profile for your page:
https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting
I'm assuming you are replacing all the xxx and vvv with your actual app ID and Page ID, as well.

Answer 3

In my case, the issue is because my Ad blocker (uBlock) blocks the call to facebook. Disabling uBlock solve the issue.