Facebook has come up with a new set of Social plugins which enable you to provide engaging social experiences to your users with just a line of HTML. The Facebook Like Button is One of them. You can see a demo of the like button on this page. The Facebook like button will allow your readers to quickly share your posts with their Facebook Friends. You can also get to know how many people liked your Blog Post.
1. Go to Layout (Design) > Edit HTML and check “Expand Widget Templates”.
2. Find <data:post.body/> and immediately after it add the following script.
Standard Facebook Like Button
This is a standard button.
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>
</b:if>
Facebook Like Button with Box Count
This is a box count button.
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=box_count&show_faces=false&width=55&action=like&font=arial&colorscheme=light&height=65"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>
</b:if>
Facebook Like Button with Button Count
This is a button count button.
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
</b:if>
3. Save your template, DONE
Notice the bold codes, here you can make some changes to give your buttons a different styles. If you want to change the font, then find “font=arial” and change it to any one shown below:
font=lucida%2Bgrande
font=segoe%2Bui
font=tahoma
font=trebuchet%2Bms
font=verdana
You can change the color by changing “colorscheme=light” to “colorscheme=dark” and also can change the width and height. You can also change the “Like” word to “Recommended” by changing “action=like” to “action= recommend”.
Here is an example:
If you want Like button to be seen within posts, in right-top-corner, then you will have to add the script just before <data:post.body/>:
<b:if cond='data:blog.pageType == "item"'>
<div style="padding:4px; float: right;">
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
</div>
</b:if>
That conditional tags are used to show these Facebook Like buttons only for post pages. If you want to show it even in home or archive pages remove these tags marked in red.
source : http://bungtutor.blogspot.com/2011/02/how-to-add-facebook-like-button-to.html
source : http://bungtutor.blogspot.com/2011/02/how-to-add-facebook-like-button-to.html
Tidak ada komentar:
Posting Komentar