Adding a Newsletter Sign-Up Form to Your Organization's FaceBook Fan Page
This document outlines how you can add a simple
e-newsletter sign-up form to your FaceBook Fan Page using Convio
Surveys. This is actually very simple thanks to an app called Static
FBML (http://www.facebook.com/apps/application.php?id=4949752878).
Note, this download utilizes a Convio Shadow Survey Form, instead
of a Convio Open API.
Here's how:
1) In Convio, create a new Survey. For the purposes of this example, we'll want to use only the following questions on the Survey:
Constituent Registration Information - this should be configured to collect First Name, Last Name, and Email
Hidden Interest Update - use this to add everyone who fills out the form to a given Interest Category
You'll also want to configure the standard parts of the Survey, like the thank you page and the autoresponder.
2) On the last step of the Survey, publish the form, then copy and paste the URL of the Survey found at the bottom of the page into your browser's address bar. Take note of the SURVEY_ID in the URL. View source on the page and search for _1234_, where 1234 is the SURVEY_ID (e.g. using CTRL-F on Windows). You should see a hidden input like this somewhere on the page:
<input type="hidden" name="995_1234_2_6220" id="995_1234_2_6220_1" value="3041" />
This is the Hidden Interest Update we added. Take down the name and value of this field.
3) Open up your favorite text editor, and copy and paste the following:
<p>Fill out the form below to sign up for our newsletter.</p>
<form method="POST" action="http://www.foo.org/site/Survey">
<input type="hidden" name="SURVEY_ID" value="1234" />
<input type="hidden" name="995_1234_2_6220" value="3041" />
<input type="hidden" name="s_src" value="FaceBook Fan Page Signup" />
<input type="hidden" name="cons_info_component" value="t" /><input type="hidden" name="cons_mail_opt_in" value="t" />
<input type="hidden" name="cons_email_opt_in" value="true" />
<input type="hidden" name="cons_email_opt_in_requested" value="true" />
<p>* <label for="cons_first_name">First Name:</label><br />
<input name="cons_first_name" id="cons_first_name" size="30" maxlength="50" /></p>
<p>* <label for="cons_last_name">Last Name:</label><br />
<input name="cons_last_name" id="cons_last_name" size="30" maxlength="50" /></p>
<p>* <label for="cons_email">Email:</label><br />
<input name="cons_email" id="cons_email" size="30" maxlength="255" /></p>
<input type="submit" class="inputsubmit" name="ACTION_SUBMIT_SURVEY_RESPONSE" value="Submit" />
</form>
You'll want to change:
* The text atop the form to whatever you want. You can also add some kind of banner image here if you like.
* www.foo.org to your Convio-powered site's non-secure domain name.
* The value for SURVEY_ID to your Survey's ID.
* The name and value of the second hidden input to the name and value of the Hidden Interest Update from Step 2.
* Optionally, change the value of s_src, or remove this field if you don't wish to use it. Whatever value you use here will be used as the source code when people fill out the form.
4) Sign into the FaceBook account you use to manage your Fan Page. Go to the Static FBML application page and click "Add to My Page". In the pop-up that opens, select your Fan Page.
5) Go to your Fan Page and click "Edit Page". Select Edit for the FBML application. Enter a title you want to use for your tab, like "Sign Up to Receive E-Mail". In the "FBML" area, copy and paste the code from Step 3.
6) Go to your Fan Page, and use the plus sign at far right to add a new tab for FBML. Once you've done this, your form should show up on your page!