Description:

Facebook Recommendations Bar is one of the best way to increase your website’s traffic from the biggest social network on the planet. In this Step by step how to Wpcode try to show you how to add a reccomedations bar to your wordpress blog.

The Code:

What is “Reccomendations Bar”?

Is a new Facebook social plugin, that retrive some “related posts” from your blog, and shows it in a box with thumbnails and link. It’s a cool way to increase traffic from facebook, and maybe to viralize your content.

Adding the Recommendatios bar to your wordpress blog consists in 4 simple steps:

  • Create a Facebook App
  • Generate Bar
  • Add Facebook Javascript SDK to your header
  • Finally load the bar in your single.php template

1. Create a Facebook App:

First thing to do is go to Facebook Developers and select link to create a facebook app. When the dialog page is open, select a name for your app and a Namespace:

When your brand new app is online, you need to edit few fields to let your application works:

  • in “Appdomains” insert full url of your website; with the final slash (for ex. “http://www.wpcode.net/”)
  • in “Website with Facebook Login” the same url of the Appdomains
  • in “Mobile Web” the same url
  • finally and optional, you could setup a category for your application.

Save your app and open new page in your browser.

2. Generate Reccomendations Bar:

Go to plugin page and scrolling down the page, you could see a form to fill out:

  • in “URL of the article” insert a casual url, or leave what facebook write by default
  • leave “Trigger” on “onvisible“
  • in “Read Time” insert a number of seconds, you can also leave 30. (This mean the time that Reccomendations bar will wait before open)
  • in “Domain” insert your blog’s url

Than click on “Get Code”

At this point you could see a spanned window:

  • in the first area, there is the Javascript SDK to load in the header of your WordPress;
  • in the second, there is the Recommendations Bar Code.

In my example, application is loaded by default, in your case yours may not; so save your application APPID created before.

3. Add Facebook Javascript SDK to your header :

Open your function.php file on your blog, and create this function:

function wpc_recommend_bar_header() {
echo '<div id="fb-root"></div>';
echo '<script>(function(d, s, id) {';
echo '  var js, fjs = d.getElementsByTagName(s)[0];';
echo '  if (d.getElementById(id)) return;';
echo '  js = d.createElement(s); js.id = id;';
echo '  js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1&appId=YOUR_APP_ID";';
echo '  fjs.parentNode.insertBefore(js, fjs);';
echo "}(document, 'script', 'facebook-jssdk'));</script> ';";
}

add_action('wp_head', 'wpc_recommend_bar_header');

You need to replace “YOUR_APP_ID” with the App Id of your created app

4. Implement the bar

In your function.php create this other function:

 
function wpc_recommend_bar() { ?>
<div class="fb-recommendations-bar" data-href="<?php the_permalink(); ?>" data-read-time="11" data-site="YOUR WEBSITE URL"></div>
<?php }

Replace “data-read-time=”11″” with data-read-time=”SECONDS” to choose after how many seconds your bar will appear. Finally open your sing.php, and after “the_content();” insert:

<?php echo wpc_recommend_bar(); ?>

Try to open an article, scroll page, and say hello to your brand new Recommendations Bar