Facebook messenger inside the web page

Prerequisite

  1. Website with HTTPS access (Secure SSL)
  2. Facebook page

Open the HTML file and add the following

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
#Muthupandian's Tutorial
<div class="fb-customerchat"
page_id="<YOUR FACEBOOK ID>"
ref="test"
minimized="true">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(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>

That’s it!

Tips:

Where to find the Facebook page ID?

  1. Goto page
  2. Click on “About”
  3. Scroll down to the bottom, there you can find the facebook page ID.
Like what you read? Give #Muthupandian a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.