Add a Facebook Like Box to Your WordPress Website

Add a Facebook Like Box to Your WordPress WebsiteA 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:  http://www.facebook.com/newtrickswebdesign.
  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, http://www.facebook.com/NewTricksWebDesign).

Add a Facebook Like Box to Your WordPress Website

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.

 

Add a Facebook Like Box to Your WordPress Website

 

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?

About Judi Knight

Judi Knight is the founder and chief at New Tricks. When she’s not working with businesses to create their online goodness, she'll be checking people into the Urban Oasis B &B,  planning WordPresss events or hanging with her husband and three Basset Hounds.

Want to get in touch? Shoot me a note, Sign up for my free social media tips or,
Better yet, want to work with me? Check this out.

Comments

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

  2. Reviresco says:

    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

    • Hey I will check and get back to you.

    • 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.

  3. morganaroundtheworld says:

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

  4. Very nice one post.

  5. Hi
    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?
    Thanks

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

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

Trackbacks

  1. [...] 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 [...]

Add Comment Register



Speak Your Mind

*

Sign up for the Free Video Training Series, Getting Started wIth WordPress
Join Us!