Facebook has recently released the social plugin for Wordpress officially but not for blogger but by using some trick and tweak many professional bloggers has added that plugin to blogger blogs. Well adding this plugin to blogger might help you in boosting out your traffic and gaining some more unique views.
The recommendation bar displays articles right after the person has ended reading the current post and only the articles previously liked our displayed. It will expand only when a person has reached a particular level. It is somewhat similar to the recommendation plugin and shows the same likes and clean posts.
So now follow below tutorial on how you can add this one to your blogger blogs and enjoy some more unique page views.
4. Now your app will be created and you need to add your websites name like below and click on Save Changes.
5. Now you will see two lines with numeric number that’s the app ID and app Secret like below just copy the app ID and paste it into the notepad.
This step will make this plugin compatible in older version of Internet Explorer and hence giving it more stability and compatibility.
5. Now search for <body> and paste the below code right after/below it.
<div id='fb-root'/>
<script>
//Facebook Recommendation bar tutorial by NewBloggerTips.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://ihowmore.blogspot.com' trigger='30%'/></div>
</b:if></b:if>
6. Now replace those stars with the xxxxxxxxxxxxxxx with your app id you copied earlier and also change the http://ihowmore.blogspot.com with your blogs domain.
Finally Click on Save Template.
The recommendation bar displays articles right after the person has ended reading the current post and only the articles previously liked our displayed. It will expand only when a person has reached a particular level. It is somewhat similar to the recommendation plugin and shows the same likes and clean posts.
So now follow below tutorial on how you can add this one to your blogger blogs and enjoy some more unique page views.
Creating a new Facebook App
First of all you need to create a new facebook app for this plugin to work out. Creating app is really simple you just need check below steps and follow the same.
3. Now click on Continue and than enter the captcha code and go to next step.
- 1. Visit Facebook Apps Page and click on +Create New App
- 2. Now just type the name Recommendation-Bar or anything you like in the below image.
Adding Recommendation Bar to Blogger Blog
Now you app is created its time to add this amazing recommendation bar to your blog, just follow below steps and you will have this running on your blog.
4. replace it with
- Go to Blogger > Template and take backup of your template.
- Now navigate to Template > Edit HTML and click on Proceed.
- Search <html
4. replace it with
<html xmlns:fb='http://ogp.me/ns/fb#'
5. Now search for <body> and paste the below code right after/below it.
<div id='fb-root'/>
<script>
//Facebook Recommendation bar tutorial by NewBloggerTips.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://ihowmore.blogspot.com' trigger='30%'/></div>
</b:if></b:if>
Finally Click on Save Template.
Now you're done!
0 comments:
Post a Comment