Today Facebook Like Button is a very common Share Button for a Blog or Website. It is so hard to find out a Blog or Website without Facebook Like Button. You can measure the popularity of your Blog or Website through this Facebook Like Button. I think this Facebook Like Button is so essential and so helpful for a Blog or Website. Because the visitors can be inspired to read a post or article to see the popularity [Number of Facebook Likes] of a post or article. So follow the steps given below to add a Facebook Like Button for every posts of your Blogger Blog Site. You may also add this share button following the instructions of the Facebook Developer Page. But there is a problem. If you add Facebook Like Button following those instructions, then you wont get the correct counting of them who has liked your posts. So I have added JavaScript Codes, Attribution and Conditional Tags to solve this problem. So follow these steps to get the best Facebook Like Button in your Blogger Blog Site or in your Other Website.
Step 01 Log in to Your Blogger Blog Account First
Step 01 Log in to Your Blogger Blog Account First
As you need to work as admin of your blog so to Log-in to your Blogger Account. But if you want to add this Facebook Like Button to your another website then follow the fourth step.
Step 02 Access the HTML Codes of Your Blog
Click on Template from the Left Side Menu. Then click on Edit HTML from the page to access the HTML Codes.
Step 03 Find Out the Opening <body> Tag
Now click anywhere of the codes and press Ctrl+F button from your Keyboard. Then a Search Box will open at the uppermost right corner [if your Browser is Google Chrome] or at the lowermost left corner [if your Browser is Mozilla Firefox]. Now type <body and find out <body> or <body expr:class='"loading" + data:blog.mobileClass'> from the codes.
Step 02 Access the HTML Codes of Your Blog
Click on Template from the Left Side Menu. Then click on Edit HTML from the page to access the HTML Codes.
Step 03 Find Out the Opening <body> Tag
Now click anywhere of the codes and press Ctrl+F button from your Keyboard. Then a Search Box will open at the uppermost right corner [if your Browser is Google Chrome] or at the lowermost left corner [if your Browser is Mozilla Firefox]. Now type <body and find out <body> or <body expr:class='"loading" + data:blog.mobileClass'> from the codes.
Now copy the codes given below in the box and paste the codes just after <body> or <body expr:class='"loading" + data:blog.mobileClass'> tag.
<div id="fb-root"></div>
<script>(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
|
|---|
You may also collect the above codes from the Facebook Site directly. Just click here to collect the codes for the Facebook Like Button. There you will also get the guideline to add Facebook Like Button in your Website or Blog. But remember if you want to show the Facebook Like Button in every post of your blog then follow my tutorial and use my customized codes. You will get the best result and the correct counting for every like buttons.
Step 05 Add the Namespace Attribute
In this step you have to find out <html ...... xmlns:expr='http://www.google.com/2005/gml/expr'> from the codes. Just type gml/expr' into the Search Box to find out the codes. Now add the XML Namespace Attribute xmlns:fb='http://ogp.me/ns/fb#' just after the codes xmlns:expr='http://www.google.com/2005/gml/expr'. So the codes will look like <html ...... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>. Look at the box given below to see the total change.
In this step you have to find out <html ...... xmlns:expr='http://www.google.com/2005/gml/expr'> from the codes. Just type gml/expr' into the Search Box to find out the codes. Now add the XML Namespace Attribute xmlns:fb='http://ogp.me/ns/fb#' just after the codes xmlns:expr='http://www.google.com/2005/gml/expr'. So the codes will look like <html ...... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>. Look at the box given below to see the total change.
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>
|
|---|
Don't forget to give a space before the Namespace Attribute.
Step 06 Add the Codes for Facebook Like Button after <data:post.body/>
Again find out the codes <data:post.body/> and add the codes from the box given below after <data:post.body/>. If you add the codes after <data:post.body/> then the like button will be shown at the end of every posts of your blogger blog.
But if you want to show the Facebook Like Button just before the starting of the posts and after the Header Line then you have to find out <div class='post-header-line-1'/> and you have to paste the codes after this line.
But if you want to show the Facebook Like Button just before the starting of the posts and after the Header Line then you have to find out <div class='post-header-line-1'/> and you have to paste the codes after this line.
Codes for My Customized Facebook Like Button
<div style='float:left;margin-top:-3px;width:75px;'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' expr:href='data:post.canonicalUrl'/>
</b:if>
</div>
|
|---|
If you use the above codes then you will get the Facebook Like Button just like the button showing at the end of this tutorial. This button is perfect with all other buttons like Twitter Tweet Button, Digg Button, Linked In Share Button,
Pinterest Pin It Button etc.
But if you want to use the default Facebook Like Button then use the following codes given bellow in the box.
Codes for the Default Facebook Like Button
.
.
<b:if cond='data:blog.pageType != "static_page"'>
<div class="fb-like" expr:href="data:post.canonicalUrl" data-send="true" data-width="450" data-show-faces="true"></div>
</b:if>
|
|---|
Step 07 Save Your Template
Now click on Save Templates to save your template and test the result. Hope you are happy now.
Why this Tutorial is Best for Facebook Like Button
than all Others
Because, I've Used Conditional Tag
If you follow the other tutorial or the instruction from Facebook Developer Page then you will get the following codes for the Facebook Like Button. But if you use this codes then you wont get the correct counting for the Facebook Like Button.
If you follow the other tutorial or the instruction from Facebook Developer Page then you will get the following codes for the Facebook Like Button. But if you use this codes then you wont get the correct counting for the Facebook Like Button.
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
|
|---|
Now look at the codes I have customized for you all. In these codes I have used Conditional Tag <b:if cond='data:blog.pageType != "static_page"'> and I have added attribution expr:href="data:post.canonicalUrl" after the codes div class="fb-like" for the best result.
<b:if cond='data:blog.pageType != "static_page"'>
<div class="fb-like" expr:href="data:post.canonicalUrl" data-send="true" data-width="450" data-show-faces="true"></div>
</b:if> |
|---|
Because, I've Used XML Namespace Attribute
I have also used XML Namespace Attribute xmlns:fb='http://ogp.me/ns/fb#' after the codes xmlns:expr='http://www.google.com/2005/gml/expr' what is really so important for the Blogger Blog Users.
Because, I've Customized the Position
And finally look at the codes of my Customized Facebook Like Button. There you will found <div style='float:left;margin-top:-3px;width:75px;'> at the first of all. In these codes I have used float:left; to set the Facebook Like Button at the left side. You may use float:right; to set the Facebook Like Button at the Right Side.
I have also used margin-top:-3px; to up the Facebook Like Button slightly. Because when I was trying to use all other Share Buttons with it then the Facebook Like Button was not in the same line. So to set this share button in same line with other share buttons you may also use and change this codes. I have used margin-top:-3px; in my blog www.dakbox.blogspot.com but I have used margin-top:-0.5px; in this blog.
Because, I've Customized the Width
I have used width:75px; to declare the width of the Facebook Like Button. Otherwise there will be a large gap between two share buttons. Facebook Like Button need only 75px to show its button and counting data. But you may use the number as you want in your blog or website.
Because, I've Customized the Position
And finally look at the codes of my Customized Facebook Like Button. There you will found <div style='float:left;margin-top:-3px;width:75px;'> at the first of all. In these codes I have used float:left; to set the Facebook Like Button at the left side. You may use float:right; to set the Facebook Like Button at the Right Side.
I have also used margin-top:-3px; to up the Facebook Like Button slightly. Because when I was trying to use all other Share Buttons with it then the Facebook Like Button was not in the same line. So to set this share button in same line with other share buttons you may also use and change this codes. I have used margin-top:-3px; in my blog www.dakbox.blogspot.com but I have used margin-top:-0.5px; in this blog.
Because, I've Customized the Width
I have used width:75px; to declare the width of the Facebook Like Button. Otherwise there will be a large gap between two share buttons. Facebook Like Button need only 75px to show its button and counting data. But you may use the number as you want in your blog or website.
You may also Customize the Following
Look there is written data-show-faces="true". That means if someone visit any of your Blog Posts then he/she will see him/her Facebook Friends faces. But remember he/she won't see any faces if none of his/her Facebook Friend don't like this post. If you change the codes like data-show-faces="false" then the Faces won't be available.
Wow, great article, I really appreciate your thought process and having it explained properly, thank you!
ReplyDeleteThanks a lot dude, for your compliment...
Deletesuper post thx
ReplyDeleteYou are most welcome for you comment!
Delete