Click here to Skip to main content
15,743,541 members
Articles / Web Development / HTML
Technical Blog
Posted 21 May 2010

Tagged as


5 bookmarked

How to Add a Facebook Like Button to Your Blogger Posts

Rate me:
Please Sign up or sign in to vote.
4.00/5 (5 votes)
21 May 2010CPOL2 min read
How to Add a Facebook Like Button to Your Blogger Posts

A friend of mine that owns a Pittsburgh-based custom T-shirts and screen printing business asked me the other day if I could research adding Facebook like buttons to his posts. Here is the result of said research:

Step One: Sign Up for Facebook Developer Access

I'm hoping you already have a Facebook login. Using said login, head over here and fill out the form supplying your page name and URL.

After that is done, it will give you the application ID-- you're going to need this for the next step.

Editing Your Blogger Template

Ok, so sign in to your blogger admin and navigate to layout > edit HTML. Make sure you check the "Expand Widget Templates" checkbox.

Now comes the tricky/nerdy inserting code part. Inside of that box where the code is, you'll see at the top of it a tag that starts with <html. We need to add xmlns:fb='' inside of that tag (which means we need to put it in between the < and > symbols for those of you not too HTML savvy). . So your final <html> tag should look similar to this:

<html expr:dir='data:blog.languageDirection' 

The important part is that you got that xmlns:fb Facebook part. The next step is to scroll down and look for the <body> tag. In the picture below, you'll see the body tag, and then the code you need to insert below it.

You're going to substitute my app id for your app id--which should be a string of numbers--no symbols, letters or anything else. Your final code should look like so:

<div id='fb-root'/>
  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 +

Remember, substitute YOUR-APP-ID for your application ID you got when you signed up above. We're almost there, one more change! Now we need to find
<div class="post-footer">. We're going to add the tag that begins with fb:like in there.

So your final code there should be similar to:

<div class="post-footer">
<fb:like action='like' colorscheme='light' 
	expr:href='data:post.url' layout='standard' show-faces='false' width='450'/>

That's it! All done! Be sure to like this post below. ;-)

This article was originally posted at


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Chief Technology Officer
United States United States
Pittsburgh-based developer.

Comments and Discussions

GeneralMy vote of 3 Pin
Muhammad Shahid Farooq11-Jul-13 3:35
professionalMuhammad Shahid Farooq11-Jul-13 3:35 
QuestionUrgent Regarding Like Button Pin
sahdev121-Jul-11 4:33
sahdev121-Jul-11 4:33 
Questionnot able to see the commented post on Facebook Pin
spydeehunk21-Jul-11 1:52
spydeehunk21-Jul-11 1:52 
I have done same thing what you have asked to do and its also working fine i am able to see like button on my blog. But when i am posting some comment after doing like on my blog i am not able to see that comment in facebook
AnswerRe: not able to see the commented post on Facebook Pin
sahdev121-Jul-11 4:37
sahdev121-Jul-11 4:37 
QuestionWhat if I have three blogs and three subdomains Pin
Patrick-Wayfarer27-Feb-11 4:14
professionalPatrick-Wayfarer27-Feb-11 4:14 
QuestionSnapshot of button Pin
Kunal Chowdhury «IN»24-May-10 2:30
professionalKunal Chowdhury «IN»24-May-10 2:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.