Adding a Salsa signup box to Facebook
Posted by Jason Z.
03:15 PM Dec 03, 2009
The Salsa Labs Facebook page -- you are a fan already, yes? -- just incorporated an email signup form, and you might be interested in knowing the trick for your own page.
Though the example here incorporates a regular signup page into Facebook, the same technique could be used to embed event registrations, petition signatures, or other forms of action (but passing donations is a different matter, and this kind of form won't dialogue with the Salsa data warehouse for a congressional district lookup without much more intensive spadework than I've described here).
1. Get the Static FBML app
This extremely handy application lets you build a box or a tab with straight HTML (or, with Facebook's own Facebook Markup Language syntax). No programming skills needed.
Just search it up, and add it to your organization's page.
2. Get the form code of a Salsa signup page
Now that you're able to add some HTML to your Facebook page, all you have to do is get your mitts on some usable HTML.
No problem.
There are a couple of ways to do this, depending on your coding skills. While developers can dig as deep as they dare, the best choices for duffers like myself are:
- Build a signup page (or other type of page) in Salsa. (In this case, I just used one of our standard signup pages.) View the end-user page, hit "View Source" to see its HTML, and copy the
form
and
/form
tags and everything between them.
- Alternatively, hit the "Developer Resources" link at the bottom of any page in your Salsa headquarters to find some generic ready-for-copy-and-paste code for an external signup form, as shown below. Then, copy and paste that code.
3. Create an email signup form in Facebook
Now that we've got the code on the clipboard, back to Facebook.
Open up your organization's Facebook page -- we're assuming here that you have admin privileges -- and click "Edit Page". In the screen that follows, find FBML, as shown:
Then, just click the "Edit" button (highlighted) to go to work.
Title your box whatever you'd like (unimaginately, I went with "Email Signup"), then paste all that signup form text into the "FBML" box.
4. Add the form to your Facebook page
Now, it's just a matter of adding the tab to your Facebook page, which you can do the same way you customize that page with any other new tab.
You'll also find your new Static FBML creation under the "Boxes" tab, where you can select it and optionally send it to the sidebar of your wall, as I've done. That makes the form visible to anyone who lands on your page.
5. Tweaks and Troubleshooting
You should be ready to go! Test the form out and see how it works, then fine-tune accordingly. People who use it should land (immediately) in your Salsa headquarters; the form will have no effect on their Facebook profile, your Facebook page, or anything else within Facebook itself.
Here are a few things you might want to take notice of:
(Note: this is not the Facebook Connect integration recently mentioned in these pages. But that integration is still coming!)
Add a comment
Can we get an update?
Heather — 12:49 PM Jun 03, 2011
I haven't seen an updated version of this advice, and Facebook's layout has changed since this was written. Is there an update to how one can incorporate a sign-up or action to their Facebook page using FBML?Donations?
Joseph — 02:37 PM Aug 02, 2010
Is there something similar that can be done to allow donations to be made directly on the Facebook page? I'm not sure if this is even allowed by Facebook but it sure would be handy.useful
Stephen — 04:18 PM Jan 20, 2010
Now THAT was a useful tidbit of information. Thank you so much for posting it. Easy to figure out, and now I've got a way to make sure that our FB folks (who aren't always on our list) get a regular offer to sign up/take action and get roped in.<br /><br />
Very useful.