How To Add a Facebook “Like” Box to a WordPress Sidebar

November 18th, 2010 by Dan York

facebooklikebox.jpg

(NOT the real box – just an image)

If you look over in the first sidebar of this blog, you’ll note that I’ve added a Facebook “Like Box” that lets you interact with Voxeo’s Facebook Page directly from the box.

I did this primarily as an experiment to see what impact (or not) it might have on people joining the page as… well… what we used to call “Fans” but now perhaps have to call “Likers”.

As I had to tweak the Facebook-provided code a little bit, I thought I’d write down what I did. First, I went to Facebook’s “Like Box Plugin Page”:

http://developers.facebook.com/docs/reference/plugins/like-box

On that page you can specify the width of your column, your page name and a few other options. After that you can press the “Get Code” button and, in theory, receive the code you can just “drop in” to your website. (Basically all it is doing is creating an “<iframe>” that pulls content over from Facebook’s site.)

The problem I had was that regardless of whether I unchecked the “Show stream” box, I always received code showing the stream… and that’s way too long for the sidebar here. So I just tweaked their code a bit (note that for display reasons I’ve broken the code up into multiple lines a bit – in reality this is all jammed together as one line):

<iframe src="http://www.facebook.com/plugins/likebox.php?
href=http%3A%2F%2Fwww.facebook.com%2Fvoxeo&amp;width=185&amp;colorscheme=light
&amp;connections=3&amp;stream=false&amp;header=true&amp;height=200" 
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:185px; height:200px;" 
allowTransparency="true"></iframe>

My changes were:

  • Changed “stream=true” to “stream=false”.
  • Changed the height to be a size that worked for me.

NOTE THAT YOU HAVE TO CHANGE THE HEIGHT IN TWO PLACES!

It took a bit of experimentation to figure out the best height, but in the end I now have a box in the sidebar.

P.S. While you’re here, why don’t you become a Fan/Liker/whatever?


Related posts:

  1. Suggestion for a WordPress plugin to publish posts to a Facebook Page?

Tags:


Want to learn how Voxeo can help unlock your communications and deliver a better customer experience? Please contact us!

If you found this post interesting or helpful, please consider either subscribing via RSS, becoming a fan on Facebook, or following us on Twitter.


2 Responses to “How To Add a Facebook “Like” Box to a WordPress Sidebar”

  1. Robert Scott Lawrence Says:

    I’ve been playing around with this for hours and keep getting conflicting information on where to drop the code. I put in in the header and it — as you might expect — appeared above my header. Which was no good.

    Then I moved it withing the header.php, and got it under my title, which obviously wasn’t a vast improvement.

    Then someone said to just dump the code into a widget (the empty text widget) and drop the widget into the sidebar, which sounded fantastic and didn’t work, at all.

    Then I ported the code directly into the sidebar.php and, again, nada.

    Any suggestions would be greatly appreciated. This is a bit counter-intuitive when you are just starting to fiddle with code.

  2. Dan York Says:

    Robert, Hi there… your comment unfortunately got lost in my spam queue and so I apologize for both not approving and not answering it.

    If you have not already solved the issue, here are some comments:

    - As you found out, “header.php” is really for the HEAD section of each page and won’t really help you. The file you probably want is “index.php”… although that may vary depending upon which theme you are using. In many themes, though, “index.php” is the file that is displaying the body of the entry.

    - A widget would work… if your theme supports widgets. Most newer themes do, but not all.

    - The sidebar should work – if your theme uses the sidebar.php file. You typically need to be sure it is inside of a <LI> element.

    Without knowing more about your theme, I’m afraid that’s all I can really do to help. Best wishes with it and again I apologize for the delay in replying to your comment.

Leave a Reply

Please note: By submitting a comment you agree to comply with our Comment Policy. We welcome all comments, positive or negative, but do reserve the right to remove all or part of blog comments that do not comply with our policy.

Additionally, the first time you leave a comment on this blog, it will be held for moderation. After that first comment has been approved, future comments will be posted without delay.

Additional comments powered by BackType