Facebook Recommendation Widget For Blogger

Want to increase your Traffic ? then here is a simple solution for blogger to place an facebook recommendation bar to blog and boost traffic to blog.Facebook social plugin helps many new bloggers to bring the traffic.

Facebook Recommendation bar Needs

Facebook Recommendation Bar needs the following Facebook Fan Page for Blogger or website if you had created already use that and having Facebook App Id (don't have create one).If have Just have only one App Id is enough.

Facebook Recommendation Bar

1. Login to Blogger

2.Goto Blogger-> Template->Edit Template

3.Click Proceed.

4.Back up your Blogger template

5.Press CTRL + F and search for this

<html

Then Reaplace the above code with following below code.

<div id='fb-root'/>
<script>
//blog4al
//<![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=Your App_id";
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.blog4al.com' trigger='30%'/></div>
</b:if></b:if>

Just make Few Important changes to that code

Replace Your App Id with Your 15 digit App Id which you had created for that blog or website.
Then Replace www.blog4al.com with your blog URL or Website URL.

Alter Recommendation Bar Settings

By Default we had set that it will be displayed not in Home page and static page using restrict blogger widget trick and also set visibility of this recommendation bar only after after scrolling 30% of your page.

Trigger:Its used to control or display when user scroll a page ,here its 30% which is optimized for having more text contents and also with less contents.

Recommendations:It is important to have recommendation as number of post as recommended in that widget.

Side:which side either left of right side that widget should float.

Max_age:If you don't like to display or recommend your older post to your visitors set from 1 to 180 days instead of 0.

Action:This widget performs us as recommendation to your visitors and this option defines what your user can do with that with their friends action="like" or choose as action="Recommend" (Spelling is important).This is explained as Verb to display in recommendation bar not a actual recommendation.

Read_time:Time delay to expand the widget form collapse view to expanded view.You can set as much as you can in seconds.

Troubleshooting Facebook Recommendation Bar

Still above widget can be created from the original facebook developer page but it won't work well for blogger as it does not able to get proper title and image for particular post for modern templates.We must a some codes to work fine.

Now in template just search for

<head>

Now below or after that add the below code

<meta content='english' name='language'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='YOURFACEBOOKID' property='fb:app_id'/>

Copy the above code and replace your facebook app id with that blog or facebook fan page app Id and

paste it below the opening head tag.

Conclusion:

That's all now save the template as preview will not work for that as it will be displayed only in post page.

Have any doubt or query comments it below?

Wednesday, January 16, 2013