≡ Menu

How to Add Facebook Like/Recommend/Share buttons in Blogger below Post Title

2 Flares 2 Flares ×

Facebook users may be perplexed when they see lot of buttons like “Like, Recommend, Share” on different websites and blogs. Although the meaning of all these buttons almost look similar, there are finite differences between each of them in their functionality.

According to answers.yahoo.com, the semantics of each of the button is as follows:

 “Like” is when you appreciate a status, or link, that somebody has posted.

“Share” is when you also like what somebody has posted, and want your friends to see it too.

“Recommend” is when you want somebody to visit a website, and it’s easily click-able for your friends to go there.

Simply, all these buttons convert as votes and seo signals for search engines like Google, Bing, AOL for your website or blog.

When a Facebook user clicks on a button it acts as a vote towards that link or website article.

Both Like and Recommend work in the same fashion, which is nothing but they post your likings to your profile. This will be visible on your other friends status that you liked a link or recommended a link or article.

But, Share is little different where you are shown a small snippet of your sharing and you can write something before it, before you share the link with your friends.

To see how to include Facebook Like, Recommend, Share buttons in your Blogger posts, you can follow the two sites here.

1.    Facebook Like/Recommend Button for Blogger

2.   Facebook Share Button for Blogger

But if you want to include all the three buttons side by side, just like in the image below, you can follow my tweak here.

Like Recommend Share buttons at the top of post in blogger

 

Step 1 :  Initially,  Login to your Blogger Account and go to Design > Edit HTMLand click on the check box which says “Expand Widget Templates”. If you are in “draft” mode you have to take another route.

 

Edit template in Blogger

Step 2 : Now copy the following below code.

[box type="note" icon="none"]

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<div style=’float:left’>

<b:if cond=’data:post.isFirstPost’>

<script>(function(d){

var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}

js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;

js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;

d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);

}(document));</script>

</b:if>

<fb:like action=’like’ colorscheme=’light’ expr:href=’data:post.canonicalUrl’ font=’arial’ layout=’button_count’ send=’false’ show_faces=’false’/>

<fb:like action=’recommend’ colorscheme=’light’ expr:href=’data:post.canonicalUrl’ font=’arial’ layout=’button_count’ send=’false’ show_faces=’false’/>

<fb:share-button expr:href=’data:post.url’ type=’button_count’/>

</div>

</b:if>

[/box]

Step 3 : Look for <data:post.body/> and immediately above that place the copied code. Sometimes, there may be 2 versions of this code, place it above the first code and if it didn’t work out paste it above the second version.

Step 4: Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find

[box type="alert" icon="none"]

<html

[/box]

and change it to

[box type="alert" icon="none"]

<html xmlns:fb="https://www.facebook.com/2008/fbml"

[/box]

Now the below image will show you what it looks like:

Include FB tag in blogger

Step 5 :  This is necessary for all FBML widgets using the fb tag. So if you previously added this tag, its alright, no need to add it again.

Save the template and preview your post. As the settings are for individual posts and above the content, these Facebook buttons of Like, Recommend, Share will be displayed just below the title.

If you want you can even customize this according to your liking, after reading the two posts I mentioned above.

2 Flares Twitter 0 Facebook 2 Google+ 0 Pin It Share 0 LinkedIn 0 StumbleUpon 0 2 Flares ×
How to Add Facebook Like/Recommend/Share buttons in Blogger below Post Title
0 votes, 0.00 avg. rating (0% score)