Welcome to the Salsa Blog

Social Media Tips: Add a Salsa Form to Facebook

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

Basic Form Example

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 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 “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 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 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.

Topics: Marketing