How to Add Facebook Recommendations Bar to Thesis Theme

Facebook recommendation Widget for WordPressFacebook recommendation bar is one of the awesome feature of official WordPress plugin, but as reported by Managewp blog post, you can learn why this plugin is not perfect and there are many known problem with official Facebook plugin for WordPress.

Today, Facebook announced new social plugin call recommendations bar, which shows a recommendation widget on the side of your site. Personally, I find this widget to be very useful and highly recommend it to install on your blog. Here I’m sharing a tutorial for Thesis WordPress theme users, on how they can install recommendation bar on WordPress blog. For other theme, you can take the route of Facebook plugin and here is a handy guide from hongkiat which will help you to get started.

  • Read: 8 Reasons to use Thesis for your WordPress site

Creating a Facebook app for using Recommendations Bar:

To use the Facebook Recommendations Bar with WordPress or any platform, you need to create an App which anyone can do easily. If you have already created an app earlier, you can simply copy the app ID in the next step and you are good to configure this social plugin. So, let me assume you have not created any Facebook app till now, and easy way is to go to app create page and fill out the information as shown in below images. Use your domain name and namespace instead of ShoutMeLoud.

Go to Facebook create app page here and click on create a new app.

Create Facebook app

Click on continue and on next page, fill out information as shown below

Creating app on Facebook

Click on save changes and on the next page, you will see your APP ID and App secret. In this case, we only need APP ID and we will be using it on the next step.

Adding Facebook Recommendation bar into Thesis WordPress theme:

Now, head over to reco. bar Social plugins page and add following details. In most of the case it will be default and once we have the code, we just need to add APP ID.

Now, here you can make some changes like you can change like to recommend, change trigger style and read time. Leave domain and URL of the article blank, as by default it will use the current page of your blog. You should read the documentation for more detail. Click on get code and you will get two piece of code there, simply go to your Thesis theme site options and under stats and tracking script, add both the code. Make sure to replace the APP ID with the actual ID which we created in earlier step.

Facebook recommendations bar into wordpress

Once you added the code, click on Big ass save button of Thesis theme and browse your site and you will see a widget created by this plugin. You can always add the above code in any other WordPress theme after the HTML in source code and it should work. You can also increase the number of recommended article up to 5 by using Parameter num_recommendations=”5″ in the second code.

For ShoutMeLoud, Facebook is one of the biggest source of traffic and this Fb recommendations bar, seems to be pretty useful to get more engagement and lower down the bounce rate of the blog. You can see the first image above, which shows how this recommendation bar looks like. When I added Facebook recommendations bar here at SML, everything is working fine but I can see thumbnails are broken in the widget. I will continue learning about more customization of  this social plugin, but for now go ahead and add this widget into your WordPress blog.

Update: I realized while creating the Facebook app, I forget to add trailing / infront of domain name and that’s why I was seeing broken images. It’s fixed now!!

If you find this tutorial useful, don’t forget to give it a like or better share it on Facebook. You can also join ShoutMeLoud fan page for more such updates.

Subscribe on Youtube

Article By
Harsh Agrawal is a blog scientist and a professional blogger. He loves to read & write about Blogging, SEO, WordPress, Make money online & technology. His blog, ShoutMeLoud receives more than half a million PV in a month, and is an award winning blog.

COMMENTs ( 3 )

  1. Raj says

    This one is simple and pretty straight forward way to add up the FB recommendation tab for Thesis Theme..

  2. ashish kumar says

    how to add this recommended box on other wordpress themes if you don’t have analytic code options should i add to single.php or index.php

    please help