Adding Facebook ‘like’ button may not be as difficult as you may think. I added it manually without a plugin and only need to update 2 theme file. Before that, I would like to mention that, adding the ‘like’ button be it XFBML or an iframe, it is very straight forward;
1. No need to update the <head> part of a document
2. No need to create Facebook application
I wrote it down because I read a lot of articles asking people to do both of things above, while in fact I did it here on this blog without those. I am not sure why, perhaps Facebook does upgrade the method and it cut down half of the hassle in adding a simple ‘like’ button.
So, let’s digging.
You just need to update 2 files which are single.php, and footer.php. Before that, please get the ‘like’ button code here, I suggest the XFBML and not the iframe, becuase XFBML is so flexible and you don’t need to supply your post permalink for each of the ‘like’ button.
1. Get the ‘like’ button code here. Just hit ‘get code’ and choose XFBML. It will be something like this:
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like show_faces=”true” width=”450″>
</fb:like>
2. Open single.php (Dashboard>Appearance>Editor), find a line something like this;
<h2><?php the_title(); ?></h2>
Enter the code after that line.
3. Open footer.php, find this line
</body>
Just enter this code before that line:
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: ‘your app id’, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(‘script’); e.async = true;
e.src = document.location.protocol +
‘//connect.facebook.net/en_US/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>
Yes I did not fill up ‘your app id’ and it’s working.
Good luck.
