How to add Facebook Like Box to WordPress blog

Do you promote your business, website or blog on Facebook using Fanpage feature? If yes, then you can easily get more likes and subscribers to your fanpage by adding “Facebook Like Box” to your website or blog. “Facebook Like Box” display thumbnail photos of people who have “liked” your fanpage along with stream of latest updates from your fanpage. You can easily play around with few options and generate code for displaying “Facebook Like Box” on your WordPress blog.

Get code for “Facebook Like Box” for your fanpage

1. Open Facebook Like box webpage to generate required code (this may looks geeky but it is very easy to implement). First type your Facebook fanpage URL like “http://www.facebook.com/basicwp“. If you have not assigned unique small custom URL to your fanpage, then you can paste the existing long URL or get custom URL by going to facebook.com/username webpage.

2. Once you enter correct URL, you should see preview of latest fanpage updates and subscribed users. Next you need to customize width and height of the box according to your blog layout. Also, select color scheme: dark or light (personally, light looks better).

3. Enter code for assigning specific border color. For example: For [black enter #000000], [white enter #ffffff], [Grey enter #ddd or #f4f4f4] and so on. If you only want to show small box (which many users prefer to), then uncheck (no tick) “Stream” option. You may  also uncheck “Show header” option if you do not want to show blue Facebook bar at the top of the box.

4. Once you are done customizing look of the box, click on Get Code button. You should see box showing code in different formats. You can use either one of: HTML5, XFBML, IFRAME. Use of HTML5 code is recommended, just paste the top code in file after [body] tag or before [/body] tag. Then paste second code at place where you want to display the box, like paste in sidebar text widget for showing in sidebar.

If you face problem implementing HTML5 format of code, then you can use IFRAME code. Just copy the code under IFRAME tab and paste it in the sidebar or any place where you want to show the Like Box button.

Video: How to add Facebook Like Box to WordPress

There is more: If you want add style to the standard Facebook Like box, then checkout CSS styling for Facebook Like box to change background color. Using free plugins you can display floating Facebook Like box on your blog. Also, you can display Twitter box similar to Facebook like box, options galore – take your pick!

SHARE

Comments

  1. It does not work. Is this supposed to work with all themes?

  2. works well on a site I’m building but it does kill my backgrouns and can’t figure out why, I know it’s the first or top part of the html5 code

    • I managed to fix this myself, if anyone else has a similar problem, I just enclosed the first tag part of the html5 code in another div ie …
      using WP 3.4.2 and Atahualpa theme v3.7.9

  3. please help me with the code to add facebook likes on my website

Speak Your Mind

*

Subscribe to our mailing list

* indicates required
Close