Feature Friday: Facebook Opt-In via WhatCounts Publicaster Edition

Here at WhatCounts, we’ve always said that social media should complement your email marketing program, and vice-versa. Today’s Feature Friday will explore how you can do both with WhatCounts Publicaster Edition by creating a Facebook App to allow people to opt-in to your mailing list. After all, your list is your most valuable marketing asset; why not make it as easy as possible for people to sign up?

You’ll need just a few things to start:

1. A Facebook Page (for a brand / company / organization), not a Profile
2. A free Facebook Developer account (we’ll go through the steps of making this happen)
3. A server with a valid SSL certificate on which to host your Facebook App (we’ll explain this in a bit)

First, we want to create the actual content of our opt-in form. This is found in the Opt-In Forms portion of the Administration section of Publicaster:

facebook_optin

There are three types of forms you can build: Single Opt-in (where a user is automatically added to the list as soon as the form is completed), Notified Single Opt-in (where a user receives an email telling them they have been added to the list) and Double Opt-in (where a user receives a confirmation email with a link they must click in order to be added to the list). For simplicity’s sake, we’ll be using a Single Opt-in form.

facebook_formbuilder

Next, we’ll want to select the mailing list into which this opt-in form will “feed” the addresses. Note that you can add additional lists, so you can have this opt-in form send data to multiple lists at one time. Also, this is where you decide where you want the user to go after they have completed the form — a Publicaster landing page, a page on your website, and so on.

facebook_builder2

On the next page, you’ll select the fields of data that you want to collect; these fields are dictated by the mailing list you selected on the previous page. Note that you can enable Facebook Connect, but that wouldn’t mean much for the purpose of this exercise, as this form is going on Facebook!

Finally, you’ll see the opt-in form code:

facebook_code

We’ll need this later, but not quite right now, so leave your Publicaster browser tab open and go to another one, and navigate to http://developers.facebook.com. If you don’t have a Facebook Developers account, it’s free and very easy to create one.

Once you are logged into your Facebook Developers account, click on the Apps tab of the top navigation:

facebook_devs

Once there, you’ll see a button to Create New App; click that, and we’re on our way.

facebook_create

Choose whatever you want the app to be called. It should include the name of your newsletter and/or company so that Facebook users will know exactly what they’re getting. You’ll also need to choose an app namespace. This is a unique name for the app for Facebook’s database. You’ll also see a checkbox for free web hosting; you can ignore this, because as we’ll see very soon, Publicaster itself takes care of all the hosting!

So, before entering any information on this page, we’re going to return to Publicaster and look at our opt-in form code. The actual code of your app needs to live somewhere outside of Facebook, and there are three ways of making that happen:

1. You can copy this opt-in form code, open up an HTML editor of your choice (Nvu is an excellent open-source option if you do not have Dreamweaver), then paste the code into a blank HTML file. Save that file, and upload it to your website’s secure server via FTP. Note the https URL where this file is stored.

2. Follow the same steps as in Option 1, but — and this is where WhatCounts Publicaster Edition really shines — instead of uploading it to a secure server, upload it to your Publicaster account’s Document Manager. Because, as I’ve been hinting all along, Publicaster’s servers all have valid SSL certificates! The URL for this file will be along the lines of https://cl.publicaster.com/imagelibrary/accountXXX/documents/filename>, where “accountXXX” is the unique ID of your account:

facebook_docmanager

3. If you want to have a Facebook Page Tab that doesn’t have any branding, but is rather a simple opt-in form with no window dressing to speak of, you can bypass the first two options. Go back to the Opt-In Forms landing page in Administration, right click on the Preview button, copy the URL, paste it into a text editor, and change the domain it gives you to https://cl.publicaster.com. Set this document aside.

Note: Only options 1 and 2 allow for any branding or customization of your form, which is done by editing the HTML document you have created.

Note 2: If either Option 1 or 2 throw any errors when you deploy the app on Facebook (later), try changing the filename of your HTML file to .aspx or .php.

Configuring your Facebook App is very simple. Type in the contact email of the person who is administering the app, as well as what website domain the app is being hosted on (note: DO NOT include http:// in this section), then choose a category.

Note that wherever your app content lives, that domain should be in the App Domain section. So, if you chose Option 1 above for hosting your app content, your domain would be http://yourwebsite.com, and your secure domain would be https://yourdomain.com. If you chose Option 2 above, your Page Tab URL and secure URL would be that https://cl.publicaster.com/imagelibrary/accountXXX/documents/<filename> URL we looked at earlier. You can use the same URL for the Page Tab Edit URL. If you decided to take Option 3, go back to that text editor document you created, look at the URL you pasted in there (and remember to change the domain to https://cl.publicaster.com), and use that as your Page Tab URL and Secure Page Tab URL:

facebook_domain

This is also where you would insert a Page Tab Image, which is a 75px by 75px image that should serve as a striking call to action for your App. Make sure there are no green check marks in any other sections, and hit Save Changes; your basic app should be configured and ready to go! Note: Make sure “Sandbox Mode” is disabled. Otherwise, you will not be able to deploy it.

Now, this is where things get weird. Facebook will make you visit a unique URL once in order to install your app. Make a note of your App ID on your basic App Settings page:

facebook_settings

Open up a text editor and put the app ID and URL where the app lives into the following format:
http://www.facebook.com/dialog/pagetab?app_id=YOURAPPIDHERE&next=YOURAPPURLHERE

So, for the app I’ve been building in this demonstration, the URL would look like:

http://www.facebook.com/dialog/pagetab?app_id=516872871695078&next=http://click.bsftransmit1.com/OptInPreview.aspx?pubids=0226%7c6%7c5&digest=ScLB6ehVA6yMayCoVVYqbg&sysid=1

Don’t ask me why it works this way.

This will take you to a page where you will select the Facebook Page you want to add your app to:

facebook_add

Select your Page, hit Add Page Tab … and, voila! You have made a Facebook app!

facebook_added

facebook_app

Obviously this is a very basic implementation of a form, but if you take Option 1 / 2 above and edit the HTML, you can customize the opt-in form however you like, just like any other Publicaster Landing Page!

If you need any assistance with this process, please contact your Services Account Manager or Technical Account Manager today.

Tim Brechlin
Inbound Marketing Manager, WhatCounts

[cta1]

More to explore...

September Holiday To-Dos

September Holiday To-Dos

August Has Come and Gone, and We’re Steadily Heading into the Busy Season for Retailers If you haven’t turned your attention to your holiday strategy,

Read More »

Ready to See WhatCounts in Action?