Facebook is one of the popular social network to communicate with each other and share personal status, pictures, videos and links. The famous "like" button is very useful today not only to like someone status, pictures etc., but the like button lets users share pages from your site back to their Facebook profile with one click! Many bloggers are adapting it and replacing it with Facebook share button. Today we gonna teach you on how to add Facebook like button to blogger.
Before we going to edit the template coding, lets take a look on how it looks like
Adding it to templates
Step 1: Go to Design > Edit HTML and check "Expand Widget Templates"
Step 2: Search for <date:post.body/> and paste the following code right after it. Optionally you can search for <div class='post-header-line-1'> instead of <date:post.body/> and paste the following code right after it if you want the like button to appear at the top of the post.
Customizing your button
The above code applies to the standard Facebook like button, but Facebook let users to customize the button to fit our template.
The code in red define that the like button will only show on item page, in a simple word, on specific blog post page. If you would like to show the like button at homepage as well, you could just go ahead remove the code in red color.
The codes in blue allow us to customize based on our need, but because of different setting might need different height value to have proper display for the whole thing, we suggest you to come here to customize it and copy the iframe code from "get code" button. After you have the code in your hand, come back here and we'll teach you how to modify to make the like link point to your blog post.
So the complete code we'll get is
If you are web developer and you would like to know what kind of customization can do to the Facebook like button code, here's a guideline for you.
Adding it to templates
Step 1: Go to Design > Edit HTML and check "Expand Widget Templates"
Step 2: Search for <date:post.body/> and paste the following code right after it. Optionally you can search for <div class='post-header-line-1'> instead of <date:post.body/> and paste the following code right after it if you want the like button to appear at the top of the post.
<b:if cond='data:blog.pageType == "item"'><iframe src="http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=true&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font=arial&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</b:if>
Customizing your button
The above code applies to the standard Facebook like button, but Facebook let users to customize the button to fit our template.
The code in red define that the like button will only show on item page, in a simple word, on specific blog post page. If you would like to show the like button at homepage as well, you could just go ahead remove the code in red color.
The codes in blue allow us to customize based on our need, but because of different setting might need different height value to have proper display for the whole thing, we suggest you to come here to customize it and copy the iframe code from "get code" button. After you have the code in your hand, come back here and we'll teach you how to modify to make the like link point to your blog post.
<iframe src="http://www.facebook.com/plugins/like.php?href&send=true&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>You might have get the code some sort as above. The code is incomplete yet because there is no pointing to our blog post. We'll add
=" + data:post.url + "after http://www.facebook.com/plugins/like.php?href.
So the complete code we'll get is
<iframe src="http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=true&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
If you are web developer and you would like to know what kind of customization can do to the Facebook like button code, here's a guideline for you.
- send="true" - if you want the new "Send" feature otherwise turn it off by send="false"
- layout - there are three types and each of them has specific width and height which you have to change accordingly for the selected type:
- standard - it's the first option in the official page, button to the left and social text to right.
- height - the height is 35 pixels
- width - 450 pixels
- button_count - which displays only the number of "likes" made for a particular post.
- height - 20 pixels
- width - 150 pixels
- box_count - which displays the total number of likes above the button
- height - 85 pixels
- width - minimum 55 pixels
- show_faces - which tells the button whether to show faces or not.
- true - which is default and will show faces
- false - this will not show faces
- fonts - the font to be used for the button
- arial
- lucida grande
- segoe ui
- tahoma
- trebuchet ms
- verdana
- colorscheme - it's an additional attribution that can be used if you have a dark background. The options are "light" (this is default) and "dark".
- action - additional attribution to display the verb
- like - it is default and need not to do any changes
- recommend - if you want to show "Recommend" instead of "Like"
- The height will change if you have turned the "Send" option off:
- Standard Button
- height - 35 pixels
- width - 450 pixels
- Button Count
- height - 20 pixels
- width - 90 pixels
- Box Count
- height - 65 pixels
- width - 55 pixels
0 comments:
Post a Comment