How to add the Facebook Page Plugin Widget to the blog?

Today you will find how to add this updated Facebook Page Plugin. You can see the demo in the picture below or take a live demo from my blog's sidebar.

Step 01:

• Add Facebook JavaScript SDK:  If you've ever added the following code to your blog, you can skip this step. If you are not connected then you must add.
• First log in to your Blogger Account.
• Then click on Template> Edit Html from the Blogger Dashboard.
• Then search the </ body> tag.
• Now paste the following below code above </ body> tag.

[start code]

<div id='fb-root'/>

<script>
//<![CDATA[
(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#xfbml=1&version=v2.7";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
[end code]

• Then click on Save Template.

Step 02:

• How to add Facebook Page Plugin: First you have to decide where to add it to your blog. I'll show you how to add to the sidebar of the blog.
• First click on Layout from the Blogger Dashboard.
• Now click on Add Gadget from right side layout.
• Then click on HTML / JavaScript.
• Now copy the code below and paste it into HTML / JavaScript box

[start code] <div class="fb-page" data-href="https://www.facebook.com/kawsar360/" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true"></div> [end code]

Customization:

• Give the name of your Facebook page Url in place of the red box above the red mark of Kawsar360.
• If you want to increase the header, make data-small-header="true" instead of false.
• If you want to show the cover photo, make data-hide-cover="true" instead of false.
• If you do not want to show a picture of Fan, then make data-show-facepile="true" instead of false.