Facebook is so dominant right now that all of us bloggers should add their Facebook propriety "like" button to our blogs. Even Goo...
Facebook is so dominant right now that all of us bloggers should add their Facebook propriety "like" button to our blogs. Even Google has to acknowledge Facebook astronomical rise in a virtual playground once ruled by Google themselves. Google has a lot of work to be done before they can even match Facebook's popularity amongst the netizens with their new +1 service. This post is created to share with you guys how you can add Facebook Like button to each of your blog post. It is very important that you integrate this Facebook like button to make your blog more "transparent" and social.
All blogs should have Facebook Like button.
All blogs should have Facebook Like button.
You may ask, "Why should I stuff Facebook Like button to my beautiful blog?" Well...if your blog is just a normal, private blog which you don't wish to let the whole world know...or if you are a social networking recluse, then yeah...you don't have to read on. But if you wish to increase your blog traffic and be more visible in the internet...you definitely has got to have Facebook Like button. For those uninitiated, Facebook Like Button is just one of the handful of Social Plugins that Facebook has rolled out recently. Altogether there are 10 different Social Plugins that Facebook is offering. However I believe the 2 most important ones are their Like and Send buttons.
Altogether there are 3 different styles of Facebook Like button. One is the rudimentary Like button without any count, and the other two comes with box count and button count respectively. On top of that you can choose whether you want to add the Facebook Send button alongside your Facebook Like button. IMHO it is recommended that you add the Send button as it allows you to send your post directly to your selected friends. Meaning that it will be sent and posted onto their walls. So are you ready to make your blogs more Facebook Like-able?
Standard Facebook Like Button For Blogger
Step 1: Go to your blogger Dashboard-->Design-->Edit HTML and check "Expand Widget Templates"
Step 2: Find <data:post.body/> or <div class='post-body entry-content'> and immediately after it add the following script:
If you just want the Like and not the Send button, then your code will be:
Facebook Like Button With Box Counter For Blogger
Follow step 1 and 2 as mentioned above and paste the following script:
Facebook Like Button With Button Counter
Follow step 1 and 2 again and paste the following script:
How To Customize Your Facebook Like Button
I'm sure you have noticed that some of the codes are coloured green right? You can actually changed your Facebook Like button's so-called "properties" by changing the green codes. For example, if you want to change the style of your font, then locate font=arial and change it into one of the font styles below:
Beside the styling of the font you can also change:
Well there you have it folks, how to add the must-have Facebook Like button to your blogger. Remember Facebook Like button is not just a luxury anymore; it is a necessity for you to strive and survive in the blogosphere. It's either you adapt or you will be left behind in this ever-evolving virtual world where social media rules. It is time for you and your blog to be more Like-able. Hopefully more people will know how to add Facebook Like button to their blog.
*Pst! Pst* Don't forget to like my blog and post ok. :p
Give all your blog posts a Facebook Like button. Ha :D
Standard Facebook Like Button For Blogger
Step 1: Go to your blogger Dashboard-->Design-->Edit HTML and check "Expand Widget Templates"
Step 2: Find <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=true&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>
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&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>
Follow step 1 and 2 as mentioned above and paste the following script:
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=true&layout=box_count&show_faces=false&width=55&action=like&font=arial&colorscheme=light&height=85"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:85px;'/>
</b:if>
Again, if you just want the Like button and not the Send button, then your should paste this code:<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&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 Counter
Follow step 1 and 2 again and paste the following script:
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=true&layout=button_count&show_faces=false&width=150&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:150px; height:21px;'/>
</b:if>
If you just want the Like button and not the Send button, use the following code:<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
</b:if>
How To Customize Your Facebook Like Button
I'm sure you have noticed that some of the codes are coloured green right? You can actually changed your Facebook Like button's so-called "properties" by changing the green codes. For example, if you want to change the style of your font, then locate font=arial and change it into one of the font styles below:
- font=lucida%2Bgrande
- font=segoe%2Bui
- font=tahoma
- font=trebuchet%2Bms
- font=verdana
Beside the styling of the font you can also change:
- The color by changing colorscheme=light to colorscheme=dark
- The width and height of your Like Button as shown above.
- You can also change the default "Like" word to "Recommended" by making changes from action=like to action=recommend
- You can also disable your Send option by changing send=true to
send=false.
Well there you have it folks, how to add the must-have Facebook Like button to your blogger. Remember Facebook Like button is not just a luxury anymore; it is a necessity for you to strive and survive in the blogosphere. It's either you adapt or you will be left behind in this ever-evolving virtual world where social media rules. It is time for you and your blog to be more Like-able. Hopefully more people will know how to add Facebook Like button to their blog.
*Pst! Pst* Don't forget to like my blog and post ok. :p
Give all your blog posts a Facebook Like button. Ha :D
COMMENTS