Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Adding a newsletter subscription form to your Facebook company page

You can add a subscription form to your Facebook company/product page by adding a new tab that will load the newsletter signup form.

You can see a simple example on the MailUp Facebook page: notice the "MailUp Newsletter" tab in the screen shot above (or visit the page on Facebook).

In a nutshell:

  1. Create a subscription form that posts to your MailUp account. There are several ways to do so (see below).
  2. Host it on a page reachable on the HTTPS protocol
  3. Use that URL in Facebook to create a new Facebook page tab

Here are all the details.

About Facebook page tabs

Facebook Page Tabs allow you to load on Facebook a page hosted elsewhere, controlled by you. This gives you great flexibility on both appearance and functionality.

The tab is basically an iFrame containing another page, hosted on a secure URL outside of Facebook. 

There are a couple of important limitations to keep in mind:

  • The page must be hosted on the HTTPS protocol
  • The page cannot be an HTML page (if must be a *.aspx, *.php, *.asp, or other dynamic page)

As far as we are concerned, this means that you can load a newsletter subscription form, controlling both contents and look & feel of the form.

Preparing the signup form

The newsletter signup form:

  • Must be hosted on the HTTPS protocol. MailUp-hosted forms are not hosted on HTTPS, so you can't just use one of those hosted form pages. That said, you can certainly take the form code and use it in a page hosted on the HTTPS protocol.
  • You can create the form in a variety of ways:
    • Copy the HTML source code from a MailUp-hosted form
    • Copy the HTML source code from a custom form
    • Use the code from the quick form feature
    • Create a newsletter signup form from scratch: the form can contain anything, as long as the syntax is correct and compatible with your MailUp account. Technically savvy users: see detailed syntax options here

How to create a Facebook Page Tab

Now that you have the form ready, you will use it to populate a Facebook Page Tab.

A Page Tab is considered an App by Facebook, so you will need to create a new app. Here are the simple steps to follow:

  1. Visit https://developers.facebook.com/apps
  2. Click on Create New App
  3. Enter the name of the application (this is not the name that will be shown on the Tab) and a Namespace. Facebook will check availability and correct syntax.
  4. You have created a new app.
  5. Now, under App Type, select Page Tab in order to create a Facebook tab
  6. Enter the required paramenters. For example, in this screen shot you see some sample data used for our newsletter signup form. Of course, you need to change those parameters with your own.

  7. Note that the icon must be 111 x 74 pixels, and remember that the page must be hosted on the HTTPS protocol
  8. Also note the width of the page, which should be compatible with the selected option (810px or 520px)
  9. Click on Save Changes to continue
  10. Now go back to the top part of the page (Basic Info)

  11. Specify the app domain, without specifying the protocol (e.g. www.mailup.com and not https://www.mailup.com). This must be the domain that is hosting the page loaded in the Page Tab.
  12. Keep the Sandobx setting Enabled while you are testing. Just remember to disable it when you want to go live. When it's enabled, the new tab will be shown on the Facebook page only to its admins.
  13. Save the changes
  14. You can now tell Facebook to add the tab to the page. To do so, load in your browser the following URL, where YOUR_APP_ID is your app id (found at the top of the App page), and YOUR_URL is the secure path used for the Page Tab URL.

    https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&redirect_uri=YOUR_URL

    Please note the "uri" parameter is not a typo: that's the correct syntax (if you used "url" you would receive an error)
     
  15. Load the URL in your browser address field and press Enter. Select the page that you wish to load this tab on, if you manage more than one page.
  16. The new Page Tab is now available on Facebook, allowing Facebook users to sign up to your newsletter(s) right from your Facebook company page.

Troubleshooting

405 Error - HTTP verb used to access the page is not allowed

If you received a 405 error when loading the page tab, the problems is very likely that you are attempting to load an HTML page. You must instead load a dynamic page.

For details, please see: http://stackoverflow.com/questions/6841139/server-error405-http-verb-used-to-access-this-page-is-not-allowed

  • No labels