Header Ads

Breaking News
recent

How to Add the Facebook Fan Box in Blogger 2016


Facebook Like box also termed as Facebook Fan box has always considered as the most significant part of a website. It allows the Blog owners to provide their users with an easy and convenient way to join their Facebook community with just few clicks. A person that joins your community on Facebook would receive updates directly into this news feeds. So today i am going to show you how to add the Facebook fan box in Blogger.



Let Start it below:

How to Add the Facebook Fan Box in Blogger

Since, it is possible to add a Facebook Fan box manually then there is no need to use wired plugins or gadgets that might decrease the speed of your site.So follow the given steps to add facebook fan page:
1.The first thing you need to do is to go to Facebook Social Plugin’s Like Box page.
2.Now enter the complete URL of your Facebook Page for which you are willing to generate the fan box. It entirely depends on you how much customization and configuration you needs. 
3.Now press the “Get Code” button to get the coding that you will be implementing on your site. 

4.Facebook provides a plenty of options for implementation. You can choose from various options like HTML5, XHTML, IFRAME or URL. For us HTML5 is a standard option. However, XHTML also works pretty well. Try to use IFRAME if the above two option does not works for you. 

5.Now click on the HTML5 Tab.
6.Now Go to Blogger Dashboard>>Edit HTML.
7.Copy the first part of the code and paste it right after the <body> tag.
8.If you are unable to find it then you can add it anywhere in your body. The first part of the code would look like Below:

<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/all.js#xfbml=1&appId=340438116046612";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


9.Now copy the second part of the code and add it anywhere on your site and it would display the Like Box there. For example, go to Layout >> Add a gadget >> Add HTML/JavaScript >> and paste the code there. The second part of the code would somewhat look like this:


<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/all.js#xfbml=1&appId=340438116046612";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


10.Now copy the second part of the code and add it anywhere on your site and it would display the Like Box there. 
11.For this just Go to Layout >> Add a gadget >> Add HTML/JavaScript .
12.Paste the code there. The second part of the code would somewhat look like this:


<div class="fb-like-box" data-href="https://www.facebook.com/mybloggingschool" data-width="292" data-show-faces="true" data-stream="true" data-show-border="true" data-header="true"></div>


13.Your Facebook Like box is ready, now go and check your site to see it.


I hope that after reading this article you easily Add the Facebook Fan Box in Blogger.If you like this article share it on social media to help other blogger friends.

Let me know you if you have any problem regarding to this article.If you have any problem you can ask me in comment box.Thanks for reading this article.Stay tuned for more lectures.

No comments:

Powered by Blogger.