Add a Facebook Like/Fan box to Blogger

Update Sept. 2010:
Facebook replaced the input Facebook Page ID with Facebook Page URL. This tutorial has been revised accordingly.

Here is a tutorial on adding a Facebook Like box (formerly a Fan box) to Blogger/blogspot. It’s a good way to promote your Facebook page. A Like box lets your readers:

facebook like fan box
  • See how many users already Liked your page.
  • Like your Facebook page with just one click, without having to visit the page.
  • Read your page’s recent posts (if you choose to display them).

(Looking for Like button instead? Learn how to Add Facebook Like button here)

Now let’s proceed shall we?

 

 

I) Get your Facebook page ID URL

  1. Visit Facebook and go to your page.

    facebook page url 1

  2. Copy the Id URL from your browser’s address bar. It’s at the end of the url.  Trim the URL until you get something like this:
    http://www.facebook.com/pages/Blogger-Sentral/115496238467364
    [http://www.facebook.com/pages/PAGE-NAME/PAGE ID]

 

II) Configure your Like box

  1. Go to Facebook Like box configuration page (opens in a new tab/window). You will see a configuration box, like this (Facebook has replaced Facebook Page ID with Facebook Page URL):

    facebook like fan box configuration

  2. Now paste your page ID URL inside the Facebook Page ID URL text box.
  3. Set other parameters such as width, height and stream. The Preview on the right will update itself as you enter the changes.
  4. Click Get Code button when done. You’ll be given two codes, titled iframe and XFBML. You only need the iframe code.
  5. The iframe code should look more or less like this (do not copy this code):
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogger-Sentral%2F115496238467364&amp;width=292&amp;connections=10&amp;stream=false&amp;header=true&amp;height=280" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:280px;" allowTransparency="true"></iframe> 

    Update February 2011:
    It seems Facebook (perhaps erroneously) has the box height fixed to 62px. This allows only your Facebook page title and the Like button to appear inside the box. The faces will be hidden. To show them, you must increase the height. For example, to show two rows of faces, change the height to 280px. There are two heights in the code, make sure you change both.

  6. Copy the code (the code provided by Facebook, not the sample code in no.5).
  7. In Blogger, go to Layout and click a Add-A-Gadget link. Select HTML/Javascript gadget and paste the code in the content box.
  8. Save and view your blog.
  9. Enjoy! 
Want to know another way to increase your page Likes? Use a landing page, made just for your new visitors.

223 comments to "Add a Facebook Like/Fan box to Blogger"

«Oldest ‹Older 201 – 223 of 223 Newer› Newest»
Agnes December 10, 2012 at 3:50 AM    

This was extremely helpful. Thank you !

cosmic81 December 22, 2012 at 4:37 PM    

Thanks, it was easy to follow and a great help indeed.

V Tweet US February 6, 2013 at 2:38 PM    

Their are lots of App and plugin on Facebook. This is one of the best. Thanks for guiding how to insert FB Page on blog. Update this post with some more FB App and plugin that will help our blog or website.

Arif Heru Sanjaya February 10, 2013 at 5:37 PM    

thanks :)

AFFAN KAMAL February 11, 2013 at 3:56 PM    

thanks budddy

Thanks for your Guidence. I tried this to add in my blog. Today i succeede. Thank you very much..

srikanth s February 17, 2013 at 2:37 PM    

so easy thank you ...

Wallpapers February 19, 2013 at 10:46 PM    

Thanks man !

Anonymous,  March 8, 2013 at 7:24 PM    

thanks

Sikandar Ali Chishti March 16, 2013 at 2:58 AM    

thanks man been trying out other codes and editing template html etc as misled by others but this one was much more easier thanks a ton
keep it up (y)

Tracie March 19, 2013 at 1:34 AM    

thank you, very helpful. I had people visiting my blog and visiting my facebook. But this helped add the like button

Orjen April 3, 2013 at 8:50 PM    

Thank God! I've found all sorts of crap whilst looking for this but this is exactly what I needed. Thanks!

Saami Sohail April 10, 2013 at 7:47 PM    

Gr8 It Works!! Just have to unselect send button

Hank April 17, 2013 at 2:23 PM    

Man, this worked perfect! I've been trying to get the "like" box on my blog for a really long time and finally, with this tutorial, got it to work. Thanks so much!

Pradeff Pradhan April 29, 2013 at 7:10 PM    

thanks a lot. . .

For The Love Of Fiction April 30, 2013 at 3:41 AM    

Love you!

lexaragon May 22, 2013 at 7:30 PM    

This post is very helpful and simple:) Wish i had seen this post earlier, i had a headache in trying to figure this one out and after doing what other websites instructed (which is so complicated for my level)
Thank you soooo much :D

Himanshu Shrivastava June 2, 2013 at 6:14 PM    

thAnXx bRoo

Luckycie Ra July 13, 2013 at 5:49 PM    

nice info bro

The Forever Explorer July 14, 2013 at 7:12 PM    

Thank you very much for this. I've tried it out and it was very easy to follow. :)

Rahul Das August 3, 2013 at 3:08 PM    

thnk u very much....it helped me..good work sir

Ghost Rider September 2, 2013 at 6:16 PM    

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

Rahul Askar October 6, 2013 at 3:27 PM    

It works! Thanks for the info! :)

heba mohammed December 9, 2013 at 1:59 AM    

many thanks

«Oldest ‹Older 201 – 223 of 223 Newer› Newest»
Click to go to top Click to comment