How To Add A Facebook Fan Badge To Your Blog

Posted on February 25, 2010 by Jesse Luna

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 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):

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:

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.

AP Sends Bewildered News Seekers to Facebook

Posted on February 21, 2010 by Jesse Luna

Bank robber Willie Sutton was once asked, “Why do you rob banks?” His reply, “Because that’s where the money is.” The AP is taking the same approach and sending some of it’s Twitter links to Facebook, because that’s where millions of people are.

I think this will be a short term marketing strategy. And even today they started sending people back to the AP site. Using Facebook as an additional outpost is a good idea, but not as a center point.

If you have a domain, use it. That’s where the true riches are.

Related Posts:
* The AP Is Using Twitter To Send People To Facebook. Wait. What? – TechCrunch
* AP is Visionary: They See a “Siteless Web” – Steve Rubel Lifestream

IKEA Case Study Video – Building a Fan Base on Facebook

Posted on December 21, 2009 by Jesse Luna

I’ve been buying IKEA furniture since the company first opened its doors in California. So when a Twitter friend tweeted about an IKEA social media case study video, I had to take a look.

IKEA ran a promotion this Fall on Facebook to engage its customers and fans. By cleverly using the picture-tagging feature built into Facebook, they drew in over a thousand friends for one of the store owners, Gordon Gustavsson, and spread awareness of IKEA’s products.

The IKEA promotion, as described in the video below, had three key features that made it engaging and memorable:

1) Easy – For Facebook users, the promotion was simple. All they had to do was friend Gustavsson then tag pictures. There were no spammy applications to install in order to participate and share with other Facebook friends.

2) Interactive – It required fans to keep an eye out for new showcase pictures so they could rush to them and be the first to tag a furniture item.

3) Clearly Defined – Facebook fans knew the rules of the promotion – that there would be limited number of showcase pictures to tag and that they had to be first to tag them to win.

I don’t have the numbers on the overall reach of the promotion, but engaging over a thousand fervent fans on Facebook is great way to build a fan base.

Did YOU hear about the IKEA promotion before this blog post? What would YOU have done to extend the reach of this promotion if you were in charge of the campaign?

How To Post iPhone Voice Memos to Your Social Networks [Updated]

Posted on June 18, 2009 by Jesse Luna

[Updated July 19, 2010: Added specific instructions on sending Voice Memos to Facebook.]

Yesterday’s iPhone 3.0 software download from Apple included a new Voice Memos application. The Voice Memos application allows you to record sound, save it, and email it.

Of course, the first question I asked was, “How can I get it into my Twitter feed?”

Here’s how:

1) Set up a free account with Posterous.com. Posterous allows you to post text, video, big pictures, or audio from remote sources such as your phone.

2) Configure your social networking feeds on Posterous. If you only want to send your voice memo updates to Twitter then you only have to set up the Twitter account. Make a note of your posting email address.

3) Record your Voice Memo using your iPhone.

4) After you’ve saved the Voice Memo, open the memo item and click on the Share button and select “Email Voice Memo.”

5) Enter your Posterous posting email. If you configured several social networks, you can just use the “post” email and it will post to all at the same time. I only set up Twitter for now so I will only post to the “twitter” version of the Posterous email.

This is the tweet that was generated when I posted late last night:

Testing iPhone Voic[e] Memo to Twitter via Posterous http://post.ly/sZA

The second time you need to post a Voice Memo from your iPhone, you only need to follow Steps 3-5, and can easily do so while on the go!

Post iPhone Voice Memos to Facebook

To post iPhone Voice Memos to Facebook:
First, set up your Posterous.com account as in #1 above.

Posting voice memos to your Facebook profile

To post to your Facebook profile, go to the Manage | Autopost page on Posterous
Click on the big “Add a Service” button
Select “Facebook” (not “Facebook Page”)
Click on the “Connect” button. You’ll get a pop-up window asking you for permission to connect. Click on “Allow.”
You’ll be directed to a screen that will ask if you want to post to your Stream or to your Status. Select your preference. You can also select if you want to post videos to your Facebook Videos. By default, Posterous will post pictures to your Facebook Photos. You can deselect that option if you choose. You should be connected now.

This is an example of a Voice Memo post to Facebook via Posterous:

Posting iPhone to Facebook profile page via Posterous

Posting voice memos to your Facebook Page (a.k.a. “Facebook Fan Page”)

Go to Facebook and your Facebook profile
Go to Applications (available from left tool bar link on Profile)
Click on “Applications Directory” link at the bottom of the page
Type “Posterous” in the “Search Apps” box (top left) and hit “Enter” key
Click on the “Posterous” link to go to the Posterous application page
Click on the “Add To My Page” link. You’ll see a list of your own Applications, Websites, and Fan pages.
Click on the “Add to Page” button next to the desired Facebook page.
Close the pop-up window.
Go back to Posterous, Manage | Autopost
Click on the “Add a Service” button
Click on the “Facebook Page” button
Go to the bottom of the page and you’ll see your Facebook page in a drop down list. Click on the “Add Facebook” button.
You’ll be asked for permission to post to Facebook. Click on the “Allow” button. That should do the trick.

Next time you’re on the road or away from you computer, you can take out your iPhone and send over a Voice Memo to your social network. Just make sure you’re not driving, m’kay?

I’m always honored to receive your feedback and comments. Let me know if there is anything I can do to improve this blog post or blog in general.

JesseLuna.com

Moving people to action with social media

Category Archives: Facebook