2013/02/02

How to add and Make the Most of the Facebook Recommendation Bar on Blogger

1 comments

This widget, "Facebook Recommendation Bar" has been shared on almost every website on the internet, but this one wont be like the routine shares. We are out for a difference and that's what we are known for. The primary reason of the widget is to drive traffic. If you install to your blog, it'll work its purpose but then we still have to make the most of it. The Recommendation Bar is designed to display recommended articles right after readers have finished reading an article or spent some time on your blog post. It collapse at page load and expands once a reader has reached a specific location on your blog post or finished reading the post. Articles displayed on the gadget are those that are previously liked or shared on Facebook which is very good about it. The numbers of likes are displayed under each article coupled with page title and a thumbnail. It also contains a like button on its bar. Its unlike the Facebook Recommendations box which offered related stories but lacks user friendly interface and engagement, Facebook bar helps glue readers to your site which surely leads to increase in pageviews, page impressions and helps fights bounce rate. The button line is; it increases traffic. It's a good alternative to Recommendation Posts widgets that was shared on WWS something ago.



Facebook Recommendation Bar to blogger



That's how it looks on the image above, but if you want to see it live then you may scroll down the page for it to expand. Or simply click on it on the button left and it will expand. When it expands, do well to hit the like button so that your friends will know you were here. 

Traffic Status of Plug-in


The widget helps increase traffic, as a matter of fact, almost all standard blogs are implementing it to their blogs. I share widgets almost all the time but do not implement all of them unless it'll provide some value to traffic or revenue. Another reason why I dont implement all widgets is because, the blog can't take them all but they are all good. The Facebook bar helps display articles their friends or other people liked (which may be useful) on your blog, as you know, Someone is going to like something for some reason and the other person out of human curiosity may go for it or simply like it which is no less as it will display on their timeline. You see now that the plug-in serves a dual purpose right? This gadget will indeed benefit anyone making use of it. But then you have to make the most of yours, Its simple, make sure (not compulsory though) to align it under your blog post area. So it can be closer to readers as it is right under the post they are viewing.


Recommeded Post: Professional Recent Posts Widget for Blogger



How to Install Facebook Recommendation Bar to Blogger


The steps of installation will make the widget work just fine. But do well to follow all steps carefully and patiently.

  • First you'll have to create a Facebook Application which is freaking easy.
  • Log into Facebook Apps
  • Click on "Create New App" button towards Top-right
  • In the box that pops up, type "Recommendation Bar" or any other name inside the App name field and leave other options empty. Having done that, "Click continue".

Click on the images to get better view.






  • Enter the captcha security code and click "Submit"
  • On the next page, scroll down till you get to the "Website with Facebook Login" tab and click on it.
  • Enter your website URL inside the box. See the screenshot below. Leave every other option the way the are.







  • After entering your URL, click "Save Changes"
  • When Changes are saved, you'll get a message, see image below.







  • Look at the image carefully, you'll see two strings characters. One is App ID and the other is App secret. Just copy the App ID code and save it on a notepad. It will be needed later.
  • With this steps carefully done, App is successfully created! what's next?


How to Install "Recommendations Bar" To Your Blogger Blog


  • From your Blogger Dashboard
  • Click on "Template"
  • Backup your template before proceeding (very important)
  • Click on "Edit HTML"
  • Search For this tag; <html
  • Replace it with this code; <html xmlns:fb='http://ogp.me/ns/fb#'


Doing that will help the plugin to become compatible with older versions of internet explorer. Since blogger templates are coded in XML therefore inserting this XML namespace will enhance the plugin performance and compatibility.


Troubleshooting


Most templates are not well structured and requires installation of meta tags to tell Facebook to fetch correct page titles, thumbnails and blog titles. To do this simply paste the following code just below <head> tag inside your template



<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>



  • Next search for <body> and just below this tag paste the following code:

Note; If you are using the new blogger templates like Simple, Awesome Inc., Travel, Watermark or Picture window then search for <body instead. Make sure to paste the following code below the tag (<body> or <body).


<div id='fb-root'/>
<script>
//Facebook Recommendation bar by <a href="http://www.worldwebsurfers.com"></a>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=***************";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3'read_time='10' side='right' site='http://www.YOUR-BLOG-URL-HERE.com' trigger='40%'/></div>
</b:if></b:if>


We are almost there. Make the following changes and let's proceed:

  • Replace *************** on the code with your 15 digit App Id I asked you to save on a notepad.
  • Replace http://www.YOUR-BLOG-URL-HERE.com in red with your blog URL
  • After making these important changes, Save your template and that's all.


Visit your blog and scroll down about 50% of your page and wait for 10 seconds for the plugin to expand. 


You May Want to Change the Following.


The change below are optional but might be important to your blog settings or layout.

  • max_age: will decide the age limit of articles. Sometimes you don't want to display too old articles so you can set it to display up to 1-180 days old posts. But if you don't want to take age into account then leave it at 0.
  • num_recommendations: You can set how many articles to display. By increasing or decreasing the value 3
  • read_time: As soon as the user reaches a specified location, the plugin would expand but before expanding it will take some time. I have kept it equal to 10 seconds, you can increase it as you want.
  • side: Helps align the location of plugin. By default it shows up towards the bottom right corner of your page. You can set it to float to left - I highly recommend that you set your recommendation bar to float on the side your article area is, This will help get recommended posts closer to your readers, I guess i explained that before.
  • trigger: On page load the plugin collapses and as soon as it reaches a specified location it expands. You can choose that location in three ways i.e. onvisible, X% or manual. I prefer locating the trigger point by percentage for better pageviews. The widget will expand as soon as the user scroll downs 40% of your page. You can increase or decrease this value. If you wish that the plugin must expand as soon as the reader reaches the end of your article then instead of pasting the code between the purple lines paste it just below data:post.body tag and use the value onvisible instead of 40%.
  • The widget will display only on post pages and not on homepage or static pages. To display it on all pages, then simply delete the purple bolded lines.



Finale 


With all steps in place believe me your plug-in will work like every other facebook recommendation bar. You can see it on WWS, its aligned on the left side of the blog. I guess you like this tutorial, subscribe to our blog via RSS feed for more promotional tips and tools. Follow me on twitter and G+. And do well to share your thoughts with us using the comments. Cheers! and stay encouraged. Regards: WorldWebSurfers.com inspired by MBT




That should be all. With this medium, we want to say thank you for your continued liking and sharing. If you haven't liked this post yet, you may do that by hitting the buttons just above.

If you are a blogger and you appreciate the hard work, whether or not you copied this post, we implore you to kindly link back to this post here, you may do it anyhow you can. We consider that a great contribution.




Looking for something else? Search site here:



Blogger Related Posts Widget




Hey! Kindly subscribe to our RSS feed here with your email address so you can get all our updates, eBooks and other breathtaking give-aways right on your email :)




Regards: WorldWebSurfers.com





1 comments:

Anonymous said...

Remarkable! Its genuinely amazing post, I have got much
clear idea regarding from this piece of writing.

Also visit my web site; ways to get more instagram followers

Comment here

Hi There, Our site is dofollow wink.jpg . We welcome your comments HEARTILY.
But please! Do not use;

"Keywords" or "Names of companies" while commenting, It will and MUST be deleted upon our review.

You may not use “Anonymous” as your name.
If your comment is the direct opposite of the topic,
It won’t stay long.
Use anchor text the right way.
Comment responsibly.

These Terms are not personal; We love our blog as much as we appreciate
your comments. THANK YOU.


 
WorldWebSurfers.com © 2012 - 2014. Designed by Emmanuel Obarhua and Proudly Hosted on Blogger.com | Sitemap | Go Back To Top Go back to top