Adding the Facebook Like Button to a Blogger Template file

Blogger and Facebook's Like Button:

Everybody has a blog these days and one of the best ways to get your posts spread around town is using the Facebook like Button.

Facebook has been making a lot of changes with it's integrations these days and here's the latest (10/10/2010) and greatest way to get a Facebook Like button onto a Blogger Blog Template. You can use this code on any blog template you just need to find that blogging systems equivalent of the blogger <$BlogItemPermalinkUrl$> template variable for the URL of the individual postings (try Google?). With the code below you'll get something like this:

Click it and see what happens!



The code looks for a Facebook Application ID. I already had one so i used it. You may be able to get by without one but I didn't try. Besides it takes all of about 30 seconds to set-up an application and get an ID number. Go here: Create an application on Facebook. After that the first thing to do is locate the place in your Template file to place the code. I unfortunately still use the Blogger Classic Templates so if you're on the new system or use another blogging platform you'll need to find the equivalent. Place the Like Button code directly under this line in the template for a link in each posting:

<div class="post-body">


Here's the Like Button Code. You'll need to replace appID and fb:like href values with appropriate info.

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR Facebook 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>


<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="YOUR URL or Blog URL variable" ></fb:like>









P.O. Box 67
Bellingham, MA
02019

        
28 Summer St
Medway, MA
02053