Adding a Facebook like box to your website and installing TentBlogger
 In Social Media Tips

Facebook Like BoxA Facebook “Like Box” on your website is a great way to increase the number of people who “like” your Facebook Page (these instructions are for sharing your “Page,” not  your personal “Profile” account) by allowing them do so right from your WordPress website. In this post, we have shown two options to get the “like” box on your site. One is a simple Facebook “like” box and the other a tabbed container for Facebook “likes,” Twitter feed and RSS combined.

Here are the steps for adding just a Like Box to your website. I am assuming that you already have a Facebook Page set up for your business or event. If you don’t have a WordPress site, the concept will be the same, but the directions to adding it to your site will different.

  1. Log in to your Facebook Page. Note: If you have over 25 “likes,” you can go to your page settings and apply for a personal page URL.  Mine is:
  2. Once on your Facebook Page, click the link to “Edit Page” in the upper right hand corner.
  3. Click “Marketing,”  which is one of the choices on the left side of the page. (Or you can go directly to this page).
  4. Click on “Add a Like Box to Your Website.”
  5. Add your Facebook page URL to the Facebook Page URL box (for example,

You can then decide how you’d like your “like box” to look.

You have to determine how wide to make the box. You can use the Firefox add-on, Firebug, to determine the width of your sidebar. Then you have the choice of a dark or light layout. You also have the option to show some of the people who like your page. I like that option, since it gives a festive “join the party” vibe to the box.  Next choose whether to show the stream of your latest posts (see the middle section in the image above). If the Like Box is going onto your own website, then that is unnecessary, given it will be on your site where those articles are already. Finally, do you want the Like Box header to be there or not? If your website has styled headers in the sidebar and you put code for the box into a widget and title the widget, Like us on Facebook, then to have that on your like box too is redundant.

  1. As you make the selections, the preview will change, as will the embed code.
  2. Click on “Get Code” and copy it.
  3. If you are using WordPress, go to Appearance –> Widgets.
  4. Add a text widget to the sidebar of your website (Widgets –>Add Text widget).
  5. Paste the XFBML code into this text box widget.
  6. Add a title the text box (for example, “Find Us on Facebook”).
  7. Assign the position of the “Like” box.
  8. Go to view your page and there it will be!


TentBlogger’s Social Widget Plugin

The Tentblogger Social Widget Plugin is handy if you need to conserve sidebar real estate, while wanting to display multiple social media feeds on your site in one space.  TentBlogger’s plugin uses a tabbed container, which shows a different view for each social media site when the tabs are selected.



Here are the steps for installing TentBlogger’s Social Widget:

  1. Click on “Plugins” –> “Add New”
  2. Enter “tentblogger” in the plugins search box.
  3. “TentBlogger Social Widget – Twitter, Facebook, and RSS” should come up first in the search and this is the plugin that you want to install.
  4. Click “Install Now.”
  5. Activate the plugin.
  6. Go to “Widgets” and add “TentBlogger Social Widget” to your sidebar.
  7. Enter your Twitter name,  your Facebook “Like Box” badge code (follow instructions in part one of this post to get the code), and the feed URL (usually the (“actual url/feed”) of the blog posts you’d like to see and adjust the other options, such as show and avatar, to what you prefer.
  8. Save your changes and adjust the position of the box to where in your sidebar you would like it to appear.

There are many other social media widgets, but these are ones that I have used and like.  Are there any other social media widgets that you have used/like and would recommend?

Recommended Posts
Showing 11 comments
  • @lipdesign

    Excellent tips, Judi! Thanks for the step by step instructions. You are so knowledgeable!

  • Reviresco

    After I paste the XFBML code into the text widget and hit save it dissapears, I've tried it with the other code (iframe) but wordpress changes the code when I hit save. I have a digg 3 column and have experimented with the pixel width as well, any further tips would be greatly appreciated. Thanks

    • judi knight

      Hey I will check and get back to you.

    • judi knight

      I have never experienced the code disappearing from the text box. Did you try re-pasting it and saving it again? Did you set everything up on the Facebook like box page? There also may be a plugin that is interfering with it. Try deactivating all the plugins and then see if it works.

  • morganaroundtheworld

    I have exactely the same problem as Reviresco..the code disappears..

  • Dewan Sohan

    Very nice one post.

  • test

    I have added the generated code from facebook.
    but it is not displaying if you are not logged in on facebook.
    It works only if you logged in on facebook.

    Do you know why?

  • Muz

    Great Tutorial. However, there is now an issue with the FB plugging not working in IE and Firefox.

  • Randy

    The hardest part for me was just getting to the right FB page to set up the like box. Thanks for the info!

  • adeem

    This is very helpful for bloggers to set up a Facebook Like box in their side bars. Chances are your readers are your biggest fans so you should make it easy for them to Like your Facebook page. But adding the box isn’t automatic so this article will be very instructional for people to add this to their websites.

pingbacks / trackbacks
  • […] Facebook Like Box  – the easiest way to get this on your site is to go to your Facebook Page marketing area and look for the website widgets. Create the Likebox and then copy the code and paste it into the Text Box Widget. You don’t need to bloat your site with a Plugin for this since I have the instructions in another post […]

Leave a Comment