UPDATE (May 05, 2011): The
Send button is now added next to the Like button (standard button only).
The Send button allows your users to easily share your content and send
a short private message to the people that would be most interested or
to the group wall of any Facebook group they are member of. It also
allows your users to send your content as an email to any email address.
The Code:
Here’s the code for the standard Facebook like button.NOTE: This will display the like button on post pages only.
1
2
3
4
5
| <b:if cond='data:blog.pageType == "item"'><div style='padding: 10px 0px 0px 0px;'><div
id='fb-root'/><script
src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like
expr:href='data:post.url' font='' send='true' show_faces='false'
width='450'/></div></b:if> |
Installation:
-
STEP 1: Sign in to your Blogger > Dashboard > your blog’s Design > Edit HTML, and check “Expand Widget Templates”
Backup. It is always a good idea to back your template before making any changes to it. To save a copy, click the “Download Full Template” under Backup / Restore Template. Save it in a folder on your computer. -
STEP 2: Find this line of code inside the template box:
<data:post.body/>
Quick Search. Use the Search or Find feature of your browser. Just press Crtl+F (or Command+F) and paste <data:post.body/> in the find box then press enter. It will take you to that line instantly. -
STEP 3:…Then paste the Facebook like button code just right below that line, so that it would look like this:
Click SAVE TEMPLATE. That’s it!1234567<data:post.body/><b:if cond='data:blog.pageType == "item"'><div style='padding: 10px 0px 0px 0px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/></div></b:if>
Like and Send Button DEMO
Like me!
How to make it appear on the homepage
If you want to make it appear on your homepage as well, use this code instead:
NOTE: This will display the like and send buttons (standard) on the homepage and post pages only.
12345<b:if cond='data:blog.pageType != "static_page"'><div style='padding: 10px 0px 0px 0px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/></div></b:if>
Other layout options
The Facebook like button comes in 3 layout styles: standard (above), button count and box count. Here are the codes for the other 2 layout styles. Installation: Follow steps 1 and 2 above. Then follow step 3 but use any of the two codes below:Facebook like button with Button Count
NOTE: This will display the like button on the homepage and post pages only.
1
2
3
4
5
| <b:if cond='data:blog.pageType != "static_page"'><div style='padding: 10px 0px 5px 0px;'><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> |
Facebook like button Box Count
NOTE: This will display the like button on the homepage and post pages only.
1
2
3
4
5
| <b:if cond='data:blog.pageType != "static_page"'><div style='padding: 10px 0px 5px 0px;'><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;'/></div></b:if> |
No comments:
Post a Comment