Click here to Skip to main content
13,088,846 members (54,239 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


5 bookmarked
Posted 21 May 2010

How to Add a Facebook Like Button to Your Blogger Posts

, 21 May 2010
Rate this:
Please Sign up or sign in to vote.
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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

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

You may also be interested in...


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
membersahdev121-Jul-11 4:33 
Questionnot able to see the commented post on Facebook Pin
spydeehunk21-Jul-11 1:52
memberspydeehunk21-Jul-11 1:52 
AnswerRe: not able to see the commented post on Facebook Pin
sahdev121-Jul-11 4:37
membersahdev121-Jul-11 4:37 
QuestionWhat if I have three blogs and three subdomains Pin
Pak Wa Yau27-Feb-11 4:14
memberPak Wa Yau27-Feb-11 4:14 
QuestionSnapshot of button Pin
KunalChowdhury24-May-10 2:30
mentorKunalChowdhury24-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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170813.1 | Last Updated 21 May 2010
Article Copyright 2010 by micahs
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid