Hi, it’s been long not updating this blog, I’m sorry because I have a personal project out there.
In this post I’m gonna share about adding Facebook Like button into Blogger post. Actually it’s not a big deal, all bloggers must be able to do this trick. Ok, let’s start the trick.
First, go to Facebook Developers page to get Facebook Like button code, there is a form to create it. Use it, fill the “URL to like” with your blog URL, it’s optional because you will replace it with Blogger code. After you finished with the form, get the code and choose the code. Remember, we will edit the code, don’t choose the XFBML. Oops, don’t forget to change the button width.
Now, it’s time to edit the code.
Original code :
<br /><s><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F<br />%2Fdevelopers.facebook.com%2F&show_faces=false&width=450" scrolling="no" <br />frameborder="0" allowTransparency="true" style="border:none; <br />overflow:hidden;width:450px; height:px"></iframe><br /></s>
Just replace the URL with <data:post.url/> :
<br /><s><iframe allowtransparency="true" frameborder="0" scrolling="no" <br />src="http://www.facebook.com/plugins/like.php?href=<data:post.url/>&<br />amp;layout=standard&show_faces=true&width=500&action=like&<br />amp;colorscheme=light" style="border: medium none; overflow: <br />hidden; width:500px;"></iframe><br /></s>
Put that code to the bottom of your post content, to make it only appeared in single post paste the following code :
<br /><s><b:if cond='data:blog.pageType == "item"'><br /><iframe allowTransparency='true' frameborder='0' scrolling='no' <br />src='http://www.facebook.com/plugins/like.php?href=<data:post.url/>&<br />amp;layout=standard&show_faces=true&width=500&action=like&<br />amp;colorscheme=light' style='border:none; overflow:hidden; width:500px; <br />height:px'/><br /></b:if><br /></s>
That’s it, that’s all. It should be a Facebook Like button in your every single post.
Sorry for my mistake. I’ve tried to fix this code and now the Facebook Like button is working on my blog. Thanks to Saša Stefanovi? for the feedback.
Previously, I suggested you to choose iframe, but that’s difficult to insert the code to Blogger template. We should use the XFBML, use the following code.
<br /><b:if cond='data:blog.pageType == "item"'><br /><div id='fb-root'/><br /><script><br /> window.fbAsyncInit = function() {<br /> FB.init({appId: 'your app id', status: true, cookie: true,<br /> xfbml: true});<br /> };<br /> (function() {<br /> var e = document.createElement('script'); e.async = true;<br /> e.src = document.location.protocol +<br /> '//connect.facebook.net/en_US/all.js';<br /> document.getElementById('fb-root').appendChild(e);<br /> }());<br /></script><br /><br /><fb:like action='like' colorscheme='light' expr:href='data:post.url'<br />layout='standard' show_faces='true' width='500'/><br /> <br /></b:if><br />Replace ‘yout app id’ with your own Facebook App ID, you can get it by creating an app on Facebook. Go to Facebook Dev Site.
Happy blogging..
