Salsa Scoop> tag: ”blog:facebook“

Adding a Salsa signup box to Facebook

by Jason Z.

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.

Add Static FBML to my page's favorites graphic

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:

  1. 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.
  2. 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:

  • Make sure the form action is right. Depending on where you copy the code, you might have a relative url, which won't work in Facebook. You'll want a full url, and you can find the right one for your organization by checking the Developer Resources section discussed above. Put it right at the start of the form.
    form action="http://YOUR NODE ADDRESS/dia/api/process.jsp" method="post"
        
  • Especially if you're going to place it on your wall, make sure it's reasonably succinct. Space is at a premium.
  • If you're fussy about your graphic design, you can crib Facebook's styling colors here, which I did on mine to make the "Join these email list(s)" header look Zuckerberg-blue.
  • Consider your redirect path (I used none, so that list joiners just stay on the Facebook page; you might have other ideas) and acknowledgment triggers.
  • If you want to be rigorous about tracking, you might also consider passing a Source_Details value, tag values, group affiliations, or other elements. You should be able to crib code for this sort of thing by building it in a normal signup page in Salsa; ask at Salsa Commons if you're stuck.

(Note: this is not the Facebook Connect integration recently mentioned in these pages. But that integration is still coming!)

Read more (3 comments)

Join the Crowd

Do you have an organizational page, Cause, or petition to share with the DIA community? Be a fan...cuz we're on Facebook, too!

Read more

My Day with the Marketers

Last week, I went to the New Media Marketing Conference offered by DMAW. My reason for going was that I wanted to see what for-profit's were doing with marketing in the days of web 2.0 goodness. Fear not, nonprofits; they're trying to figure out what we've been up to for the last few years. Most of the conference was about the basics of "new media". Should you have a blog? Answer: probably. The most rousing contribution came from CC Chapman*, who delved into just how wide the reach of digital media is for for-profit companies. People are blogging, posting, Twittering, and Facebooking about YOUR company. Angry is better than silent, so pay attention.

Read more (3 comments)

On Sitting in Section 214 When Finding Out Whether a Man Lives or Dies: Anatomy of a Successful Online Action

There's nothing like receiving a verdict of life or death while doing something embarrassingly trivial to force one out of the mundane. It was sometime around the sixth inning of a lackluster dog-days game between two dog teams at seemingly vacant RFK Stadium that my old comrade had a text message reporting that a man won't be put to death tomorrow. Such a tiny little message, and so many mountains moved to get it.

Read more (1 comment)