multiple facebook send to messenger buttons - facebook-graph-api

Question

I have a list of json objects on the page, and each of them contains id of page. I want facebook send-to-messenger button be visible in every row of my data table on page. But when I iterate, only one button is visible. And it's not working. How to do that in loop?
I have a static part
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<appid>',
xfbml: true,
version: 'v2.6'
});
};
(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'));
</script>
and dynamic part
$.each(data, function (key, value) {
//...
<div class="fb-send-to-messenger"+
'messenger_app_id="<appid>"'+
'page_id="'+value.id+'"'+
'data-ref="WELCOME_OPTIN_TOKEN"'+
'color="blue"'+
'size="standard">
//...
}
value.id is page id
How to do that? Or is there any javascript function that can accomplish it?

Answer 1

You are generating them on the fly with JavaScript, so you have to parse the Plugins with FB.XFBML.parse() right after adding them to the DOM. Make sure you use FB after FB.init though.
For example:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<appid>',
xfbml: true,
version: 'v2.6'
});
$.each(data, function (key, value) {
//...
<div class="fb-send-to-messenger"+
'messenger_app_id="<appid>"'+
'page_id="'+value.id+'"'+
'data-ref="WELCOME_OPTIN_TOKEN"'+
'color="blue"'+
'size="standard">
//...
}
FB.XFBML.parse();
};
(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'));
</script>