How to Add the Facebook Fan Box in Blogger

Advertisements
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. Though, we have already covered how you can add a Facebook like button in blogger? However, in this article, we will show you 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. The first thing you need to do is to go to Facebook Social Plugin’s Like Box page. 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. 
Now press the “Get Code” button to get the coding that you will be implementing on your site. 

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. 
Now click on the HTML5 Tab. Copy the first part of the code and paste it right after the <body> tag which is usually found in Template >> Edit HTML Area. However, if you are unable to find it then you can add it anywhere in your body. The first 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>

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 class="fb-like-box" data-href="https://www.facebook.com/mybloggerlab" data-width="292" data-show-faces="true" data-stream="true" data-show-border="true" data-header="true"></div>

Congratulations: Your Facebook Like box is ready, now go and check your site to see it whether it is working perfectly fine or not. If you still face error, then try the alternative methods. 

We hope this article has facilitated you in adding Facebook Fan Box in Blogger. Let us know which method you are using, what are the reasons why you use them, any advantages of like box in your eyes. If you like the article, why don’t you follow us on FB?
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

19 comments

May 29, 2013 at 9:51 PM

What i do for create a popup facebook like box function?

Editorial Team MOD
May 30, 2013 at 12:50 AM

You have to use some custom plugins. We have released one for Free check that out

http://www.mybloggerlab.com/2012/08/like-to-enter-advanced-social-traffic.html

May 30, 2013 at 11:55 AM

Thanks for Posting this tut,i have seen many Widgets like that but it is just Unique one ;)
IftI!

May 30, 2013 at 8:36 PM

Whats so unique they are basic steps that almost all bloggers know.I have started to ignore MBL because of this kind of posts.I might seem rude but the content level has really dropped down.

Editorial Team MOD
May 31, 2013 at 1:03 AM

Yeah, Dude. I can Understand your worries. In fact, we really want to bring new things but the truth is that we have almost covered everything. Though, I think its time to bring some really cool widgets because others too started to ignore MBL.

Please. stay connected we are sure you will be proud to be an MBLian

Cheers
Syed

May 31, 2013 at 10:05 AM

Exactly Tanmay
MBL keeps me least interested..
It's just that they have to come up with something new or i'll just ignore them..I have already removed MBL from my bookmarks.
But i seriously awaits for the day when the content quality shall raise up and that will be the day when i will be adding them back to my favorites Bookmark..
Also the same is With MBT .Qasim was just beating around the bush and Neida seemed the worst option.I feel it's time that these guys just stand out the crowd.They have got much to prove.
PEACE I Meant no offense ! these are hardly spoken facts.

Editorial Team MOD
May 31, 2013 at 12:37 PM

@ANZ JOY

Well, You Should get ready to get us back in your Bookmark list because we are soon gonna publish really interesting articles.

A lot of is coming so its a request stay connected. Pleace

June 2, 2013 at 6:42 AM

Hey bro! Can you please name that font used in the display pic at top?

Thanks,

June 2, 2013 at 6:44 AM

Great Syed. I am really happy to read your reply to Tanmy. :D I didn't opened this site for a month or so. But I will be subscribing your email list again. :D

Editorial Team MOD
June 2, 2013 at 11:31 AM

Motion Pictures

Editorial Team MOD
June 2, 2013 at 11:32 AM

Welcome back, its good to see you back. Stay tuned because some really great tutorials and widgets are coming Soon

August 4, 2013 at 10:27 AM

I am blogger since 2007 , still don't know many idea of MBL.

I don't think such comment should required team attention ,you are doing good Job ,and we love it .

All blogger are not expert in HTML and all blog are not related to technology

so keep blogging simple things also.

August 14, 2013 at 12:08 AM

can you tell me where do I paste html code on my blog www.pollutionpollution.com because i can't find body in it

Editorial Team MOD
August 15, 2013 at 12:51 PM

If you cannot find body then paste it directly in the widget HTML/JavaScript Area.

September 2, 2013 at 4:52 AM

Thank you very much I have just followed through your instructions and succeeded. I
am so grateful. I read an article before which just confused me. Yours was straight to
the point and I have nailed it. Thank you once again

December 10, 2013 at 8:53 AM

(y) gud

Anonymous
January 27, 2014 at 3:16 AM

Hi, I followed your tutorial but something like this appears "Error parsing XML, line 2967, column 62: The reference to entity "appId" must end with the ';' delimiter." What should I do? Thanks! :)

Anonymous
January 27, 2014 at 3:41 AM

Hi, nevermind my first comment :) I tried to just put the code on my blogger gadget and it worked even without putting the Javascript SDK on the body tag but thanks for this tutorial :)

Ali
April 25, 2016 at 12:48 AM

SIr pop up facebook like box kis taraha hoga Kindly help me.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.