To Add Facebook Recommend, Facebook Like Button To Blogger Blogs Above or Below Post Content.
Add Facebook like button or Facebook recommend button in your blogger blogs or any blogs with easy steps and on click customization. Explore the visitors who have liked your posts withfacebook like or facebook recommend button on your blogs. Facebook like/recommend button allow your visitors to share your post quickly as a profile updates of there facebook profile. Some peoples placed facebook like/recommend button to the blogs in below the post title or above post content and some placed it last to the post content area. I will talk to place the facebook like/recommend button on the both areas. Through facebook like/recommend button you can increase your readership because if some one like it orrecommend your blogs then it will be make your reader status in his/her facebook status updates so the friends of your readers could be come to your blog easily. Now lets come to the main point that,
1. First easily choose the options that how will look like your facebook like or recommend button and where you want to display and on which pages you want to be show. (Code will be updated automatically). You can see the preview of your options which is in below box,
<form name=configure>Button Type <select name=button onchange="javascript:fb_change(this,'button_count');"><option value=standard>Standard</option><option selected=selected value="button_count">Button Count</option><option value="box_count">Box Count</option></select>
Text on the Like Button <select name="fb_text" onchange="javascript:fb_change(this,'liker');"><option value=like>Like</option><option value=recommend>Recommend</option></select>
Color Scheme <select onchange="javascript:fb_change(this,'light');"><option value=light>Light</option><option value=dark>Dark</option></select>
Font <select onchange="javascript:fb_change(this,'arial');"><option value=arial>arial</option><option value="lucida+grande">lucida+grande</option><option value="segoe+ui">segoe+ui</option><option value=tahoma>tahoma</option><option value="trebuchet+ms">trebuchet+ms</option><option value=verdana>verdana</option></select>
Float <select onchange="javascript:fb_change(this,'fb_style');"><option value=" style='float:left;margin:4px;'">Left</option><option value=" style='float:right;margin:4px;'">Right</option><option selected=selected value="">None</option></select>
Location <select onchange="javascript:fb_change(this,'fb_loc');"><option value=after>Below the Post Content</option><option value=before>Above the Post Content</option></select>
Display <select onchange="javascript:fb_change(this,'fb_where');"><option selected=selected value=item>On Post pages only</option><option value=all>Everywhere</option><option value="non-static">Everywhere other than Static Pages</option></select></form>
<iframe allowtransparency=allowtransparency frameborder=0 id=frame1 scrolling=no src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Blogger-Tips-and-Tricks-Search-Engine-Optimization-SEO-Tips/161545807210522&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light" style="border-bottom-style: none; border-left-style: none; border-right-style: none; display: none; height: 60px; overflow: hidden; width: 450px;"></iframe>
2. Now copy the above code and just go to Blogger Dashboard --> Design --> Edit HTML <input checked=checked type=checkbox></input> Expand Widget Templates and find the code using [ctrl+F] <data:post.body/> and immediately after <data:post.body/> code paste your copied code.
*** If you are using read more hack for your blogs then you will see <data:post.body/> code two times in your blogger so which one is correct simply paste your copied code in both <data:post.body/>codes and find the correct one.
How To Add Facebook Like, Facebook Recommend Button Below/Above every post of your Blogger Blogs
1. First easily choose the options that how will look like your facebook like or recommend button and where you want to display and on which pages you want to be show. (Code will be updated automatically). You can see the preview of your options which is in below box,
<form name=configure>Button Type <select name=button onchange="javascript:fb_change(this,'button_count');"><option value=standard>Standard</option><option selected=selected value="button_count">Button Count</option><option value="box_count">Box Count</option></select>
Text on the Like Button <select name="fb_text" onchange="javascript:fb_change(this,'liker');"><option value=like>Like</option><option value=recommend>Recommend</option></select>
Color Scheme <select onchange="javascript:fb_change(this,'light');"><option value=light>Light</option><option value=dark>Dark</option></select>
Font <select onchange="javascript:fb_change(this,'arial');"><option value=arial>arial</option><option value="lucida+grande">lucida+grande</option><option value="segoe+ui">segoe+ui</option><option value=tahoma>tahoma</option><option value="trebuchet+ms">trebuchet+ms</option><option value=verdana>verdana</option></select>
Float <select onchange="javascript:fb_change(this,'fb_style');"><option value=" style='float:left;margin:4px;'">Left</option><option value=" style='float:right;margin:4px;'">Right</option><option selected=selected value="">None</option></select>
Location <select onchange="javascript:fb_change(this,'fb_loc');"><option value=after>Below the Post Content</option><option value=before>Above the Post Content</option></select>
Display <select onchange="javascript:fb_change(this,'fb_where');"><option selected=selected value=item>On Post pages only</option><option value=all>Everywhere</option><option value="non-static">Everywhere other than Static Pages</option></select></form>
<iframe allowtransparency=allowtransparency frameborder=0 id=frame1 scrolling=no src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Blogger-Tips-and-Tricks-Search-Engine-Optimization-SEO-Tips/161545807210522&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light" style="border-bottom-style: none; border-left-style: none; border-right-style: none; display: none; height: 60px; overflow: hidden; width: 450px;"></iframe>
Demo:
<iframe allowtransparency=allowtransparency frameborder=0 id=frame2 scrolling=no src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Blogger-Tips-and-Tricks-Search-Engine-Optimization-SEO-Tips/161545807210522&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light" style="border-bottom-style: none; border-left-style: none; border-right-style: none; height: 65px; overflow: hidden; width: 450px;"></iframe>
<script></script><iframe allowtransparency=allowtransparency frameborder=0 id=frame2 scrolling=no src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Blogger-Tips-and-Tricks-Search-Engine-Optimization-SEO-Tips/161545807210522&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light" style="border-bottom-style: none; border-left-style: none; border-right-style: none; height: 65px; overflow: hidden; width: 450px;"></iframe>
<b:if cond='data:blog.pageType == "item"'>
<div><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"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/></div>
</b:if>
<div><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"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/></div>
</b:if>
2. Now copy the above code and just go to Blogger Dashboard --> Design --> Edit HTML <input checked=checked type=checkbox></input> Expand Widget Templates and find the code using [ctrl+F] <data:post.body/> and immediately after <data:post.body/> code paste your copied code.
*** If you are using read more hack for your blogs then you will see <data:post.body/> code two times in your blogger so which one is correct simply paste your copied code in both <data:post.body/>codes and find the correct one.
You done!
Have You Doubt !
