How To Add A Facebook Fan Badge To Your Blog

One of the best ways to tell your blog visitors about your Facebook presence is by using a Facebook Fan Badge. This allows users to click a button and join your Fan page and to click through to your Facebook account.

Quick note, are you looking for information on the Facebook Fan Widget? If so, click here.

To add the Facebook Fan Badge Widget:

1. Go to the Facebook Fan Badge Widget page. You will need to be logged into Facebook to access this page.

2. The “Select a Page” drop down box will show all of the fan pages you have joined. By default, the Fan Badge Preview section on the right will show the first fan page in your fan page list. Select your fan page and the Fan Badge Preview will update.

3. When you select your fan page, the “Copy the code below and paste it on your website” textbox will update with the correct code. Copy the code. Pro-tip: I like to keep a text file open (like Notepad) so I can paste in and label code. I do this in case I totally forget what I just copied and end up copying something else into my clipboard. It saves time and my sanity. 😉

4. Log into your blog, and add a text widget to your blog, paste in the code, and save your changes. This part of the process will be different depending on your blogging system.

For WordPress.com and WordPress.org (custom install) users
1. Log into WordPress.com
2. From your blog’s dashboard, go to the Appearance> Widgets page
3. Assuming you have at least one sidebar, click + drag a Text widget to your sidebar
4. Set a title. I used “Join My Facebook Fan Page” as the title
5. Paste in the code that we copied from the Facebook Fan Badge page. If it is no longer in your clipboard, you can copy it from your temporary text file mentioned in the Pro-tip above.
6. Save then Close and you’re set.

This is a screenshot of adding the badge to WordPress.com (click to enlarge):
Adding a Facebook Fan Badge in WordPress.com

Adding the widget to WordPress.com and WordPress installs is fairly easy but to add them to Tumblr and Posterous take more work and you have to muck around in the HTML. I’ll show you exactly how to do that.

For Tumblr users:
1. Log into your Tumblr account
2. Click on the Customize link button (upper right part of the page with the wrench icon)
3. Click on the “Theme” tab at the top of the page. We’re assuming you have Advanced HTML turned ON for your theme.
4. Navigate to the part of the theme where you want the badge to show up. I put mine right below a FormSpring widget which shows up under the Archive/RSS segment.
5. Click on the Update Preview button to see your changes.
6. After adding the exact code the box was slightly our of whack so you may have to tweak the colors a bit. Once you’ve done that, click on the Save & Close button and you’re set.

This is where I added in the Facebook code (click to enlarge):
Adding a Facebook Fan Badge to Tumblr

For Posterous users (requires Advance Theme view to be turned on):
1. Log into your Posterous account
2. Go to the Settings page by mousing over the upper right section of he page and clicking on “Settings” button
3. Click on the big “Theme and Customize My Site” button
4. Click on the Advanced tab in the upper left hand side of the page
5. Once again, you’ll need to have Custom Theming turned on to proceed. If you do, you’ll see HTML template code in the top window. Expand the window by clicking on the “Expand” link
6. Navigate to where you would like to add your badgeand paste it in. I added my badge right below the “Subscribe via RSS” link

This is what the RSS link template code look like. Paste your badge code right after this section (it ended up being 90% down towards the end of the template page on my theme). Click to enlarge:
RSS subscribe section Posterous

So we just learned how to add a Facebook Fan Badge to your blog site. If you desprately need help with doing this with one of the other blogging platforms, leave a comment below and I’ll update this blog post with those instructions. M’Kay?

Whoa there big feller, how to I display the fan pictures and my Facebook feed like on some other sites?

Facebook has several types of goodies for sites and one of them is a Facebook Fan Widget (not the same thing as the badge). The Fan Widget uses JavaScript code so some blogging systems do not allow them. WordPress.org blogs do allow them since they are installed on one’s own server but WordPress.com does not allow them because of the JavaScript.

This entry was posted in Build-A-Fan-Base, Facebook, PRO_TIP, Social, Toolbox, Web Marketing, Weblogs, Widgets and tagged , , , , , , , , , , , . Bookmark the permalink.

10 Responses to How To Add A Facebook Fan Badge To Your Blog

  1. Pingback: A Powerful Way To Visualize Your Blog’s Keywords

  2. Mahi says:

    Thanks sharing badge add to a blog.

  3. thanks for information, that´s very usfull for me.

    regards

  4. I tried your method for Posterous and it didn’t work for me. Is there a way out?

  5. Frank says:

    My badge is up and running on the website. In the past I was able to click on the badge and had access to my page without logging into facebook. I now have to log in, and so everyone. I checked all code and it is correct. Did Facebook change something?

  6. I’d love to know how to add A POSTEROUS badge to my FACEBOOK page. Any ideas?

  7. Didot says:

    Thanks Jesse for your post!! It works perfectly even though i can’t get my page’s icon display correctly in the box. Any idea on how to add a Like Box on Posterous also? Best.

  8. Marcel says:

    Thank Jesse for a great post, took me some time but I finally got the badge working fine. Its odd how some themes dont work as smoothly with facebook as others. thanks again.

Leave a Reply

Your email address will not be published. Required fields are marked *