Saturday, April 25, 2015

How To Add Facebook Page Plugin/Like Box In Blogger

How To Add New Facebook Page Plugin In blogger | 101helper

Facebook is the number one social network and has a global rank 2. It is used by every individual now a days. Facebook is good for chatting and also for small businesses like blogs or websites. It is used by most of bloggers to get in touch with their fans, so Facebook is used to create fan pages too. In the beginning Facebook provided a plugin called like box for blogs and websites but it will stop working from June 23rd 2015 as Facebook has upgraded this plugin to a new plugin called "Page Plugin".



Facebook new like box | 101helper

"Page Plugin" is much better than Like box due to its stylish look, share option, cover photo and professional look. As Facebook has deprecated the old plugin so now we should upgrade to new plugin in order to get in touch with our fans so in this post I will show you how to add Facebook "Page Plugin"  in blogger.


Don't Miss:
Follow below steps to add Facebook "Page Plugin" in blogger:

Step 1: Go to Facebook Page Plugin page.


Step 2: Replace https://www.facebook.com/facebook with your page's link.



Stylish Facebook new like box blogger blog

Step 3: Adjust width and height of your plugin(Minimum height is 130px and minimum width is 280 px and maximum width is 500px).


Stylish Facebook new like box blogger blog | 101helper

Step 4: Check or un-check other options according to your needs(Hide cover photo, Show friend's faces, Show pages posts).


Facebook like box new

You can see a preview of your plugin below the widget customization box.

Step 5: Click on Get Code(A pop-up window will be opened).

Facebook says to copy the javascript code and paste it after <body> or </body> but it won't work on blogger. Blogger will not accept your template so you have to do it in other way. So move to step 6.


Facebook new like box blogger

Step 6: Copy the javascript code and go to Blogger Dashboard > Layout > Add A Gadget > Html/javascript and paste the javascript .

Step 7: Go back to Facebook plugin page and copy the second code.


Facebook new like box blogger blog

Step 8: Paste this code(second code) into the same Html/javascript window in which you pasted the first code.

The overall code should look like similar to below code:

<div id="fb-root"></div>
<script>(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.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>

Step 9: Click on save and you are done successfully!

I Hope you like this post and it was helpful to you. Follow by E-mail to stay updated. Keep visiting 101Helper and share this post with others. 

Give me your feedback in comments.

Search tags: Facebook like box, New Facebook like box, How To Add New Facebook Page Plugin In blogger, Facebook like box not working, Facebook like box for blogger. 

No comments:

Post a Comment