Jul 9, 2009

Adding a Newsletter Subscribe Form to Your Facebook Fan Page

Facebook changes. A lot. So this blog post is a little outdated. Go here, for the most up-to-date instructions and troubleshooting advice.

signupboxNow that you’ve set up your Facebook fan page, you’re thinking, "wouldn’t it be great if I could get my fans to signup for my email newsletter?" Now you can! We found this tutorial from the Return on Subscriber blog extremely helpful in getting us started.

To begin, you need to make sure that you have two things: 1. a Facebook fan page, and 2. the HTML code from MailChimp that allows you to embed your sign-up form on a web page.

Step 1. Grab your MailChimp list’s embed code

In your MailChimp Dashboard, click on the Lists tab. Then click on "forms" for the list that you want the subscribes to go to.

safarisnapz002

Then you’ll select "integration code" from the top menu, which will present you with a link to the Signup Form Embed Code. From here, you’ll simply want to copy the embed code and paste it into TextEdit or NotePad.

embedcode

Step 2. Add the Static FBML Application

FBML stands for Facebook Markup Language. At its core, FBML allows you to embed your application in the Facebook platform. It isn’t quite HTML, but it isn’t quite proprietary either. (Jesse Farmer provides a great introduction to FBML if you’re interested in reading more.) The easiest way to add the application is to search for "Static FBML" using the upper right hand search box on Facebook. It’ll show up as the second search result, and you need to click on "add to page".

StaticFBML

Step 3. Create the Newsletter Signup Tab

Navigate back over to your fan page and select "edit page" from right below your profile picture.

editpage

Scroll down to find FBML in your list of applications, and click on the little pencil icon to edit it.

editFBML

In “Box Title” you can give the tab a name like “Email Signup” or “Newsletter”. Then in the “FBML” section, you’ll paste in the embed code that you copied from MailChimp in Step 1. It’s easy to style your form using basic HTML to give it a look and feel that matches your brand. One suggestion that Return on Subscriber makes (and we agree with wholeheartedly) is adding the following customization:

<form method=”post” action=”http://url.com” TARGET=”_blank”>

at the end of the url to open a new browser tab or window. This is nice thing to do for your user so they can easily find their way back to the page they were originally browsing.

Step 4. Add a New Tab to Your Fan Page Top Navigation Bar

Go back to your fan page and select "edit page" from directly below your profile picture. Then scroll down to find FBML in your list of applications, and click on the little pencil icon to edit it once again. This time you want to select "Application Settings".

appSettings

From the Application Settings, you’ll have the option to select whether you want your signup form to appear as a box (in the manner of Fans, Notes, or Favorite Pages), a top navigation tab, or both. As you can see on the MailChimp Fan Page, we have our signup form set up as both a box and a tab. This is a matter of individual preference and will not affect the functionality of the form.

And that’s it! If you have questions, thoughts or suggestions on innovative ways to use this, please leave a comment and let us know!