Book On Blogging: select design

Facebook like button is probably the most important facebook integration to socialize your blog. It allows your blog content to be shared with the click of a button without leaving the page. I recently wrote a post on <a href="http://www.bookonblogging.com/add-floating-share-buttons-to-blogspot-blog-sidebar/" target="_blank" title="add floating share buttons to blogger blog">adding floating share  buttons to your blogger blog</a> and I suggest you check it out if you haven’t. Adding facebook like button involves just a couple of steps easy to implement. You can add a like button for your fan page or a like button for each and every blog post. HOW TO ADD LIKE BUTTON TO EACH BLOG POST <img alt="Facebook Like button" class="aligncenter" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqYR4sdARCytXc6OMnvqwC6TQpjRPH-zP3cidlc4kpC_5KxbduxhHuXbJT3cVvVR4NiuWvYe5eMH25qM8VD_isNxHmR_jXg-qaZe7_C10Ia_83aWCUhkkQ7xjP1D7f_0jN4GOMyrIvJpkZ/s1600/facebook_like_button_for_blogger.jpg" title="Facebook Like button" width="490" /> This makes it a lot easier for your readers to share your blog posts with just a click. To add facebook like button to every blog posts automatically, follow the steps below: 1. Login to your blogger account and select Design 2. Click on Edit HTML 3. Check the box labelled Expand Widget Template 4. Like I always emphasize, back up your template before making changes in case something goes wrong 5. Press CTRL + F and search for <data:post.body/> If you’re using a magazine style template or used the automatic read more h!ck I posted, you might find two or more <data:post.body/> in your template. You should try both to know which one works. The second works on my template though. 6. If you prefer to have the facebook like button to appear on top of your blog post right below the title, paste this code above <data:post.body/> <blockquote><b:if cond='data:blog.pageType == &quot;item&quot;'><div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div></b:if> </blockquote> 7. If you prefer to see the like button below your blog posts, paste this code below <data:post.body> <blockquote> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div> </b:if> </blockquote> 8. You might as well put it in both positions. Save your template and view the change on your blog. Note: You can change the layout written in Bold which is set to standard by default to button_count if you want the like button to show number of likes instead. You can as well set show_faces which is false by default to true. This enables the like button to show photos underneath but it applies to the standard button only. The code above only shows the like button on post pages. It won’t appear on static pages like label search results and home page. To make the like button appear on static pages involves removing two lines of codes: <b:if cond=’data:blog.pageType == &quot;item&quot;’> and </b:if>. With those removed, the facebook like button appears on static pages and on blog post pages as well. How To Make FACEBOOK LIKE BUTTON LINK TO YOUR FACEBOOK FAN PAGE In case you prefer a simple facebook like button that links to your facebook fan page instead of a bogus like box, there’s a slight change than can be made to the code above. You only need to change the URL as shown below: <blockquote><b:if cond='data:blog.pageType == &quot;item&quot;'><div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/bookonblogging&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div></b:if> </blockquote> You should change www.facebook.com/bookonblogging to your own facebook fan page full address. Be sure the URL starts with http://. You can also place this code before or after <data:post.body> as explained above. Alternatively, you can add this as a widget by going to your blog’s layout and clicking on add widget on the exact position you want the like button to appear. Select HTML/Javascript and paste the code below: <blockquote><div align="center"><iframe src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/bookonblogging&amp;send=false&amp;layout=standard&amp;width=200&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:80px;" allowTransparency="true"></iframe></div></blockquote> Hope this helps?

Add Facebook Like Button To Blogger Blog Posts

Facebook like button is probably the most important facebook integration to socialize your blog. It allows your blog content to be shared wi...