This document details how you can add a simple e-newsletter sign-up form (or other Survey) to your organization's Facebook Page using iframes.
Here's how you do it:
1) In Luminate Online, create a new Survey. Fill out Step 1 as you normally would, choosing whether you want to allow the same constituent to take the Survey multiple times, etc. On 11. Survey Submitted Page, enter PageServer?pagename=facebook_survey_thank_you&pgwrap=n. Set a Default Source Code of something like "Facebook Page Survey". This source code will be recorded each time the Survey is taken through your Facebook Page, and will be recorded as the Origin Source Code on any new constituent records created as a result of the Survey, allowing you to track and target these constituents over time.
2) On Step 2, add your questions. For the purposes of this e-newsletter sign-up example, we'll use the following questions on the Survey, though feel free to add any others you wish to include:
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
3) On Step 3, configure the autoresponder or disable it. Despite the fact that our Survey will be displayed in Facebook, it's still going to function like any other Survey would and the autoresponder will be sent unless disabled.
4) Publish your Survey. Take note of the SURVEY_ID shown under 3. Survey URL.
5) Download the attached HTML files, facebook_survey.html and facebook_survey_thank_you.html. These files contain the code you'll need to update.
6) Open facebook_survey.html in your favorite text editor such as Dreamweaver. You'll need to make the following updates to the code:
7) Open facebook_survey_thank_you.html. You'll need to make the following updates to the code:
8) Once you've finished the changes in Steps 6 and 7 and saved your files, create a PageBuilder page in Convio, and call it facebook_survey. With the WYSIWYG disabled (do to the custom nature of this page, you'll want to be sure never to open the page with the WYSIWYG enabled), copy and paste your updated code from facebook_survey.html into the page content and publish. Then, create a second PageBuilder page called facebook_survey_thank_you and paste that file's content into the page and publish.
9) Open the Survey in your Web browser, using a URL like:
http://www.foo.org/site/PageServer?pagename=facebook_survey&pgwrap=n
... where www.foo.org is your non-secure Convio domain. Ensure that the form works correctly.
10) Sign into the Facebook account you use to manage your Page. Go to https://developers.facebook.com/apps and click the "Create New App" button. Call it something like "Sign Up to Receive Updates from American Health Society" and agree to Facebook's terms.
11) Once your app has been created, you'll see the Basic Info screen. Copy the "App ID". In a new browser tab, edit each of your PageBuilder pages' content, find and replace "{facebook app id}" with this number, and Save.
12) Back on Facebook, go to Settings -> Basic on the left. Fill in "Canvas Page" with a name for your app, e.g. signupforahsnews. Fill in "Canvas URL" with something like http://www.foo.org/site/, where www.foo.org is your non-secure Convio domain. Fill in "Secure Canvas URL" with something like https://secure2.convio.net/ahs/site/, where https://secure2.convio.net/ahs/ is your secure Convio domain. For "IFrame Size", select "Auto-resize". Fill in "Tab Name" with the text you want to appear on your tab (e.g. "Sign Up to Receive Updates from American Health Society"). Fill in "Page Tab URL" with http://www.foo.org/site/PageServer?pagename=facebook_survey&pgwrap=n and "Secure Page Tab URL" with https://secure2.convio.net/ahs/site/SPageServer?pagename=facebook_survey&pgwrap=n, again changing out the domain names for your organization's. (Note: You'll need to change the pagename if you named your PageBuilder page something other than facebook_survey.) Click Save Changes.
13) Click the "View App Profile Page" link on the left. In the left column of your app's Page, click "Add to My Page". In the pop-up that opens, select your organization's Page.
14) Go to your Page. You should now see your Sign Up tab on the left. Click on it to make sure everything looks OK. If so, click "Edit" and drag your tab up to where you want it to appear. That's it -- the Survey is now live, and constituents can sign up to receive emails from your organization without ever leaving Facebook.