Thesis Tips: How to add Facebook Like Box

Posted by Prashant on July 4, 2011 in Facebook

We have previously shown you how to add Facebook Share button and Facebook Like button to your thesis theme. Today we’ll describe the steps on how to add custom Facebook Like Box to you website running on Thesis Theme.

Here are few benefits of adding like box on your website

  • See how many users already like this Page, and which of their friends like it too
  • Read recent posts from the Page
  • Like the Page with one click, without needing to visit the Page

Go to Facebook Social plugin page where you will find multiple plugins which can be used on your website.Scrolling down a little you will see a plugin for like box. Clicking on it will take you to the page where you can customize your Facebook like box.

Facebook Like Box

Customizing Facebook Like Box

Facebook Like BoxFacebook Page URL: This is the URL of your Facebook fan page. Go to your Facebook business page and copy the URL from the address bar and paste it here. As soon as you do it , you’ll see a preview of your Like Box on the right side of the field panel.

Color Scheme : There are 2 color schemes i.e light and dark which you can choose depending on your site design.

Show Faces: Uncheck it if you don’t want to show the faces of you fans in the like box.

Border Color: Enter the desired color that you want as border for your like box. eg. Blue, red, green etc.

Stream : Stream is fetched from the wall of your page. By default 5 posts are shown in the stream with a show more button at the end to see more streams. Unchecking “Show Stream” will remove the stream from your like box.

Header: “Find us on Facebook” is the default header of your like box. You can choose to remove it by unchecking the “Show Header”.

Once you are done making the changes and are satisfied with the look of your like box, then go ahead and click on Get Code button to get the ‘iframe’ and ‘XFBML’ code. Don’t worry if you don’t understand what this code jargon is all about. We have to choose any one of these to display like box on your website.

Displaying Facebook Like Box in  Thesis Theme

In your thesis admin panel, Go to Appearance > Widgets. Now drag a text box widget from Available widget panel and put it on any of the sidebar position where you want your “Like Box” to appear.

Using Iframe code in WordPress Thesis Theme

Copy the iframe code in the text box and hit save. Go and check your website. Like box should appear in the sidebar. I don’t know whether you noticed or not but the faces of your fans(if you chose them to be shown while designing like box) are not shown in this customized like box. This is one drawback of using iframe code.

Using XFBML code in WordPress Thesis Theme

Now lets copy the XFBML code in the text box and hit save. Go and check you website and this time you’ll see the faces of you fan in the like box.

So I would recommend you to use XFBML code, if you are planning to show the faces of your fans in the like box. This one of the way to increase likes on your Facebook page.

Related Posts Plugin for WordPress, Blogger...

{ 1 comment }

1 Brad Shattuck August 10, 2011 at 3:14 pm

Very nicely put together! Very informative and yes, this helped me A LOT!
Thanks for the info…


Comments on this entry are closed.