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.

4 comments:

  1. I didn't know that Facebook has special plugins. Moreover, I wonder, whether do people still use Facebook? I think that, nowadays, everybody uses only Instagram.

    ReplyDelete
  2. All these codes could seem a little bit complicated, but you should give it a try just as here is written and turn out that this task isn`t that harsh.

    ReplyDelete

If any problem, please comment us below the comment box.

Powered by Blogger.