Officially Facebook Introduced/Announced New Social Plugin "Facebook Recommendation Bar" in beta Version.That Plugin show additional recommended articles or post after readers/visitors have complete reading an post or served some time on your blog/website. That Plugin will collapse on page load and expand once a reader has reached a particular place on your blog or finished reading the article.Only the articles or posts are displayed that are previously shared or liked on Facebook.With thumbnail of article and number of Facebook likes.Many Bloggers published post about it but very difficult methods(like Open Graph Installation and some visitors says not working.But the below method is very easy and applied on any template easily.
Screen Shot Of Facebook Recommendations Bar.
OR
- You can take a look at Right Bottom of this Page and see it’s action in Live!
Advantages Of Facebook Recommendations Bar's.
Facebook Recommendations Bar has a quite similar way of displaying recommended posts as on Recommendation Box.One of the major benefit of that plugin is increase page views and impressions and drive more traffic through Facebook likes.It can show up to 5 recommended posts and default is 2. The plugin is minimized initially with just like or recommendation button on it and it will expand automatically after the time you defined has been elapsed or if trigger is initiated.
You can Easily install that plugin or widget in your blog without the installation of Open Graph Meta Tags.I ignored all necessary steps to keep the layout clean and make the widget work just good.I found the simplest and Working Facebook Open Graphs tags on MBT.So let's go to start installation on your blog in only two easy steps
Remember Fisrt Always Back Up Your Template Before You Make any Changes - How To Back Up A Blogger Template.
Remember Fisrt Always Back Up Your Template Before You Make any Changes - How To Back Up A Blogger Template.
Step # 1 Create New Facebook Application
If you want to add this plugin in your blog so must you create Facebook Application
2.Click on Create New App see below image.
OR
A ) First Go to Facebook Recommendations Bar Official Page.
B )Directly click the Get Code Button.
B) Click on Create a new app Link
3.Enter the valid App Name with your Blog Title, like as below and Click Continue button.
4.After Clicking the Continue button you will see next step like Enter Captcha Code Correctly and Click Submit button (see below image)
5.After Clicking the Submit button now you're app almost complete.Then click Website with Facebook Login tab and inside the box input your blog/website URL. See the screenshot below.Do not touch remaining options and click Save Changes.
6.After Clicking the Save Changes button.You will see top of the page two alpha numerical characters One is App ID contain 15 digits and the other is App secret.Now just copy the App IDcode and save in a notepad.that copy code will need it later.like this below image.
Step # 2 :Adding "Facebook Recommendations Bar" in Blogger.
- Go to Blogger Dashboard → Design → Edit HTML (In Old Blogger Interface).
- But If you're using New Blogger Interface so follow below steps
- Click on Blog Title → Template → Edit HTML.
- Search the below code in your blogger template
<html xmlns:fb='http://ogp.me/ns/fb#'
Like the Below image;
Now search again <body> in your template and just below this tag paste the following below code:
<div id='fb-root'/>
<script>
//Facebook Recommendation bar tutorial by DigitalHubInc.com
//<![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=xxxxxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><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.digitalhubinc.com' trigger='30%'/></div>
</b:if></b:if>
- Replace xxxxxxxxxxxxxxx with your 15 digit App Id that you saved in notepad on step # 1.
- Replace http://www.digitalhubinc.com with your blog link
- Like below image I hope it's helpful for you;
From the above code you will see one Red text and other light blue highlighted text these are optional you're free to change this with your blog requirment.
How To get this Code From Official website :
A ) First Go to Facebook Recommendations Bar Official Page.
B )Go To This Form :
C ) Change the Your Home Page URL of the Article and Domain.
D ) To Click on Get Code Option .
Finally Click on Save Template . Now you're done
Optional Steps:
- trigger:The default value is onvisible, which expands your plugin when reader past the plugin code snippet implemented on your blog.Instead, you can use percentage value here too - i.e: 20%. If so, when user scrolls that percentage of the page, the plugin will expand. For example, if you specify 20%, after user scrolls your page 20% from top, the plugin will expand.
- num_recommendations: You can set how many articles to display. By increasing or decreasing the value 3
- read_time:You can specify a time in seconds to wait before the plugin expands automatically - i.e: 10. Even if you have specified a Trigger Value, after elapsing this time, the plugin will expand. The value you specify here will considered as seconds.
- Side:That you can specify on which side of screen the plugin should be rendered. By default, it specified to be rendered on bottom right side. If you wanna show it on bottom left side,specify left here.
Show Hide Setup In That Plugin (Optional)
You can see the above code in some code text blue color if you want to that plugin display/hide post pages,static and homepage you're free to change blue color text code with your blog requirment using widgets control setup in blogger. (Comming Soon)I hope that this Recommendation's bar would be important for you.This widget is extremely important and a must for every blog/website.We would be adding more updates on it as soon as we hear from Facebook documentation.If you face any problem.Just Drop your comment. I will be able to help you about this tutorial,Stay tuned for more.Peace and blessings pals! Thanks.
![Pin It](http://pinterest.com/pin/create/button/?url=http://digitalhubinc.blogspot.com/2012/12/add-easy-to-setup-facebook-official.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF6SapdMuwwNVDPilI-DSYzoXIktl2WT0Qfy3iw43ZcZ7dsnGr4suOcOAh1u-Sm79hV1WefprOIEzM8cjV3SsIDAxuwav_WPTgjEbRFNdCLBb1BIgsCZ5aEroQtwE_28Zxhre70vsU3x_E/s72-c/digital15.png&description= Officially Facebook Introduced/Announced New Social Plugin " Facebook Recommendation Bar " in beta Version.That Plugin show ...){kind=link}
0 comments:
Post a Comment