Add Facebook Recommendations Bar To Wordpress

Add Facebook Recommendations Bar To Wordpress
Facebook recommendations bar is spreading widely all over blogosphere. Both WordPress and blogger users are now enjoying a smart push in page views by engaging readers more on their site through this traffic boosting social plugin. Not only does it help to increase your pageviews and AdSense revenue but grows your Facebook fan following with additional likes. This plugin will display additional recommended articles to users as soon as a reader has finished reading the blog post or reached a specified location. The plugin floats to the right of your Wordpress blog, collapses on page load and expands as soon as the reader reaches end of post. It displays a post thumbnail image along with page title and number of likes. It previously included a "Add to timeline" button but now it has been removed and it shows only a like button. It has surely replaced plugins such as "Facebook Recommendations Box" and most importantly SimpleReach Slide which display related posts from within your site on a widget that slides at the bottom of the page. Lets add this plugin to Wordpress with extremely easy steps.

Install it on Wordpress
In wordpress everything is done via plugins and we do not need to copy or paste any code. Neither do we need to install Open Graph Meta Tags and JavaScript SDK. There are only two steps involved which are:

Step 1: Create a Facebook Application 
1. Log into Facebook Apps
2. Click on Create New App button towards Top-right
3. In the box that pops up, type "My Recommendation Bar" inside the App name field , "fb-recommendations" inside App Namespace. Click continue.
Add Facebook Recommendations Bar To Wordpress

  4.   Enter the captcha code to pass the security check. Click Submit
   5.  You are app is almost done. Just click Website with Facebook Login and Mobile Web tab and inside each box input your blog URL. Your blog URL must start with http:// and end with forward slash (/).  See the screenshot below. Do not touch remaining options and click Save Changes.

Add Facebook Recommendations Bar To Wordpress
6.   Copy App ID , App secret  and App Namespace. Save these three inside a word document or notepad because we will need them later.

Step 2: Install the Facebook Plugin on Wordpress

In order for Facebook apps to work with Wordpress framework, you will need to install the official Facebook plugin. Follow these easy steps:

1. Log into your Wordpress account
2. Click on Plugins > Add New
3. Inside the Search Plugins box type Facebook
4. Click install now under the very first plugin that appears in search results

Add Facebook Recommendations Bar To Wordpress
   
5.  Activate the plugin
6.  You will now see a Facebook tab appearing on your Wordpress Sidebar Menu. Click it and navigate to step#3 on that page. Inside the fields submit your App Id, App secret and Namespace.

7.  Save changes. You will now be redirected to a new page. Select "Facebook Recommendation bar" and activate it.
8. Now you will see some control options for your bar. Set them as follows:
  • Trigger – This option defines the percentage of the page scrolled by the visitor, before the bar will expand. Keep it as 30% to receive higher pageviews.
  • Read Time – As soon as the visitor reaches a specified location, the plugin would expand and before expanding it will take some time. This time is called Read time which decides the speed. Keep it equal to 10 seconds.
  • Action – You can either choose to display a like button or recommend button
  • Side – Sets whether you wish to float the bar to bottom-left or bottom-right of your page.
9.   Click save changes and you are all done! :)
Visit any of your blog post to see it working just fine! The plugin will display only on your posts and pages. It wont appear on your category pages, archives or homepage. By default the plugin displays only two recommendations, however if you know PHP you can edit the plugin .php file by editing the Facebook plugin settings. You can add two new attributes like max_age and num_recommendations.

Post a Comment

Previous Post Next Post