How to Add a Salsa Signup Form to Your Facebook Page

02:07 PM Apr 11, 2011

Facebook Pages just got a whole lot friendlier! A while back, Facebook took the major step of forcing every non-user profile into their Pages format. It’s a great standardization, but there’s been one major hurdle to adding custom content to your page – needing to know their in-house markup language, FBML. No more! With the introduction of custom page content via iFrames, it couldn’t be easier to customize your tabs, and, in fact, Facebook is soon officially deprecating FBML.

So, you want to take a Salsa signup form and add it as a tab to your Facebook page? No problem. It’s now easier than ever.

To start, we’ll need to start with a signup form. For the purposes of this example, I’ll use the simplest possible form – 4 fields, empty template. You can see the form in action here:

http://dlcc.wiredforchange.com/o/7391/p/salsa/web/common/public/signup?signup_page_KEY=362

It looks like this:

Pretty simple, right? I created a template with nothing it in, called it blank template, and then used it with a new signup form that only asks for name, email and zip code. And just to play it safe, I created a custom content item (also under Website Management) to act as the thank you page, which you can see here:

http://dlcc.wiredforchange.com/o/7391/p/salsa/web/common/public/content?content_item_KEY=2251&key=10955537

So, now I’ve got my bare-bones signup form, and I want to put it in my Facebook Page. This is, from Facebook’s standpoint still unnecessarily complicated, but also ten times easier than it used to be.

There’s an excellent tutorial on how to create a Facebook “App” just for your custom content. Read it here:

http://www.hyperarts.com/blog/adding-iframe-application-to-facebook-fan-page/

In it, you can skip to the section titled “Installing the Facebook Developer Application” because you already have the content for your app – the signup form you just created. I won’t walk through it step-by-step with screenshots and whatnot since this post does it better than I could, but I’ll summarize the important points.

First, you have to create a Facebook App. Sounds scary, but it’s easier than it sounds.  You go to http://facebook.com/developers, install their Developer App, and then click the “Set up New App” button. For the very simplest app, all you need to do is give it a name – you can customize the 16-pixel icon, and that’s recommended if you want a snazzy display on your Page menu, but it’s not necessary. For now, just give the app a name, and then click the Facebook Integration menu tab to the left and scroll down to the “Page Tabs” section. Here, you’ll need to enter two pieces of info. Set the “Tab Name” to whatever you want to show on your Page menu (16 characters max) – I’ve called mine “Get Updates!” Next, take your signup form URL and enter it into the “Tab URL” field.

That’s it! You’ve created your application! The final step is to add it to your Page. Assuming you’re already the Admin of your page, you simply click the Application Profile Page for your new app, and then click the “Add to My Page” link and select the Page you want.
You’re done! The result is a simple inclusion of your form into your Facebook Page setup just like this:

See it in action here: http://www.facebook.com/libbyforsenate?sk=app_112016245546929

Exciting, isn’t it? And you can do so much more! As a next step, try adding a donation page. It’s just as simple. You only need to fill in the Secure URL field when setting up your app.

Facebook is a great way to attract and involve supporters, and now they’ve made it even easier to integrate with your already existing advocacy program.

Have any tips like this? We love to share new ideas, and we hope you will too! Be sure to share them with the entire Salsa community at the Salsa Commons.

Add a comment

Problem with implementation

Heather — 04:49 PM Aug 12, 2011

Dave,<br />
<br />
One problem when I've tried to implement the sign-up on our FB page. I keep seeing an empty rectangle at the top middle of the screen, and some text that reads, "This template does not have a valid content TemplateBeginEditable tag." When I try to add elements of our designed template to the blank template I set up, it pulls in the middle third of our website, with the sign-up page. I've left the app live so that someone can see it (and hopefully help!):<br />
<br />
http://www.facebook.com/getequal?sk=app_131773450250837<br />
<br />
Any suggestions? I don't especially want to leave this live for long, though I've hidden it on the apps menu, so not many folks are going to see it...

Thanks!

Adam — 02:28 PM Apr 12, 2011

This is fantastic!