This is a short tutorial on how I managed to add a Facebook Like Button to all my posts. All codes can be found in the Facebook Developers website (
Link Button Code). We will be using the codes for XFBML format. Just add the highlighted codes on your blogsite and that's it :)
1st: Go to Template -> Edit HTML -> click Proceed -> click "Expand Widget Templates"
2nd: Add
xmlns:fb='http://ogp.me/ns/fb#' to the
<html> tag of your blogsite.
Like this (there would be existing xmlns on your blogsite's <html> tag just add the one for fb at the end):
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:fb='http://ogp.me/ns/fb#' >
3rd: Insert the following code after the
<body> tag of your blogsite:
<body expr:class='"loading" + data:blog.mobileClass'>
<-- the body tag on my site
<!-- fb like button -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- end fb like button -->
4th: Insert the following code after the <div class='post-footer'> tag of your blogsite:
<div class='post-footer'>
<-- div class on my site
<!-- fb like button -->
<fb:like expr:href='data:post.url' send='false' show_faces='true' width='450'/>
<!-- end fb like button-->
If you can't see the
<div class='post-footer'>, make sure you have checked
"Expand Widget Templates".
Save the template and you're done :) Refer to the Facebook Developers website (
Link Button Code)
if you want to change the appearance of the Link button. Just change the correct codes :)
UPDATE - 26-Oct-2014:
With my new blog template I'm now using the HTML5 implementation of the Facebook Like button.
1. Go to Template -> Edit HTML -> click Proceed -> click "Expand Widget Templates"
2. Add the following code just before the
</body> tag of your HTML:
<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
3. Add the next code after
<div class='post-footer'> :
<div class='fb-like' data-action='like' data-layout='standard' data-share='true' data-show-faces='true' expr:data-href='data:post.url'/>
That's it, you will now have the Facebook Like button on your page.
