Creating a Facebook Page Newsletter Signup Form

Advertisements

Recently, I started subscribing my blog visitors to a newsletter. Also, signup below and thank you. Anyway, I started using MailChimp which is a good service and offers a Facebook Page app for free. Alas, I went ahead and integrated MailChimp into my Facebook Page. However, I found that there was limited customization to the form. For example, I couldn’t reorder or disable the fields. This left the form appearing very odd like asking for a date of birth. Don’t get me wrong, in some cases, that can be necessary but not mine. I wanted just a simple form with First Name, Last Name and Email. As a result, I scoured the interwebs and came across this post which was exactly what I was looking for creating a newsletter signup for a Facebook page. Unfortunately, and as with many blog tutorials, they only take you so far and the rest you need to figure out on your own. That is like all of life overall, really. Anyhow, after reading through the post I found a few items I needed.

  1. I wanted to store my code publicly in GitHub and I don’t want to store my super-secret MailChimp API keys in code. This is just bad practice and never do it.
  2. After a form completes successfully, it should clear the fields. That’s just good user experience and always do it.
  3. I wanted to host this on Microsoft Azure because they have a free websites tier which includes SSL for the azurewebsite.net domain. Which is perfect for a simple Facebook App.

All right that about sums it up, let’s start creating a newsletter signup for a Facebook page using MailChimp, PHP and jQuery.

What ls Needed

  1. A Facebook Page
  2. A MailChimp Account
  3. A Microsoft Azure Account

Don’t have these? I recommend going to Facebook, MailChimp and Azure to create an account. I will not bore anyone with those details.

Software I am Using

  • Visual Studio Code
  • FileZilla
  • Firefox Developer Edition

Overview of Steps

  1. Gather MailChimp API Key and List Id
  2. Create Azure Website
    1. Add Api Key and List Id to Azure Website Application Settings
  3. Create Facebook App
    1. Add Facebook App to Facebook Page
  4. Clone this GitHub Repository
  5. Create validator.js File
  6. Customize index.php File
  7. Customize subscribe.php File
  8. Add web.config File
  9. Deploy to Azure
  10. Test on Facebook Page

Gather MailChimp API Key and List Id

Getting an Api Key

Navigate to your account

mailchimp account link

Select API Keys under Extras

mailchimp api keys link

Select create key

mailchimp creat api key button

Copy the provided API Key and store it somewhere safe.

Getting your List Id

Navigate to your lists

mailchimp account lists link

Select your list

mailchimp list link

Choose List Name and Defaults from the settings drop down

mailchimp lists name and defaults link

In the top right column is your List ID section

mailchimp list id

Grab that and store it in a safe place, preferably, the same place as the API Key

Create an Azure Web App in the free tier

Select the large plus sign at the top left

azure new resource link

Search Web App

azure resource search ui

Enter the required information.

Two things:

  1. Turn on app insights it is an amazing resource for debugging, views and availability.
  2. Make sure to create an App Service Plan in the free tier.

azure create app service form

Add Api Key and List Id to Website Settings

Select resource groups from the top left of the navigation bar

azure resource group navigation button

Select your new resource group

azure resource group link

Select Application Settings

azure web app application settings link

Scroll down to the App settings section and enter the following

azure app settings form

Delete the Additional Default Documents

Keep the index.php but remove the rest.

azure web app default document list

Save your changes

azure app settings save button

Create Facebook App

This is straight forward. Head over to developers.facebook.com, setup your account and select add a new app.

facebook add a new app drop down

Add your display name and email.

facebook create a new app id form

Here it will land on the select product page, don’t bother with this. Just go to Settings.

facebook app settingsd navigation button

Select + Add Platform and choose Page Tab

facebook add platform ui

On the App and Page Tab section enter your app domain, Secure Page Tab URL and Page Tab Name

facebook page tab and app id settings

Save Your Changes.

Adding the App to your Page

Simply, sign in, edit the below URL with the app id and secure page tab URL, navigate to it via web browser and select the desired page.

http://www.facebook.com/dialog/pagetab?app_id=FB_APP_ID&next=FBAPP_SECURE_URL

Clone GitHub Repository

Navigate to your repos folder

command prompt to navigate to development folder

command prompt to clone git repo

Create the validator.js File

Below is the validator.js file. Just move the original code into this file and reference in the index.php file.

validator.js file snapshot

There is really no change compared to the original post. Furthermore, there was a comment on the post to clear the form upon successful submission. The writer said to just use the submit handler with some added code to the post function. However, this would clear the form each time and the end user would need to re-enter their information. Not a good user experience. I moved the functionality to the subscribe.php document on a failed submission as noted below.

Customize index.php

At this point, anyone can go and download my GitHub repo, deploy it to Azure and have an app up and running but I want to discuss the changes I made to index.php. Below is the code:

index.php file snapshot

First, I moved the jQuery script into an external file source appropriately named validator.js. Having JS in your HTML is untidy. Second, I moved the references to JavaScript files below the content in the body. This gives a perceived faster page load time.

Customize the subscribe.php File

I improved the subscribe file with 2 changes.

Code for the first section.

subscribe.php file snapshot 1

The added section removes the Api Key and List Id hard coded variables. In addition, I search the folder for a debug.ini file to read debug settings if developing locally which I provide a detailed walkthrough here on a Windows machine. If the file is missing, I then do a switch case on the key/value pairs of server variables which includes the application settings we manually set in the Add Api Key and List Id to Website Settings section. This enables scalability and simple change configuration management.

Code for the second section.

subscribe.php file snapshot 2

In the second change, I echo out a script to clear out the form on success. If the MailChimp Api fails, I only output a dummy message. Before, it was reading out a verbose message which I do not want end users reading or even thinking about.

Add Custom Web.config File

The final file that I added is optional and only needed for hosting on Azure or IIS. The infamous web.config file. Below is the code.

web.config file snapshot

I created rules to force SSL redirect and rewrite all requests to index.php. This is because Facebook forces all apps to use SSL and Azure web apps provides a free SSL with the azurewebsites.net domain. In addition, I don’t want people hijacking requests using different default documents which is why I removed them in the Create Azure Web App step. I personally don’t think forcing SSL is a terrible thing. Every website should do it.

Deploy to Azure

In the web app on Azure, navigate to your web app

azure web app link

Select get publish profile and save it in a safe place

azure web app get resource publish profile button

The publish settings file is just xml with a different file extension. In the publish settings file, search for FTP and grab the Host, Username and Password and enter them in your favorite FTP client.

filezilla ftp client site manager

Copy your files over to the wwwroot folder in Azure and voila! App deployed.

Conclusion

Navigate to the Facebook page and there it is.

newsletter signup form on facebook page

Now, go forth and style the form as desired. In fact, I plan to add the MailChimp icon so that end users are more comfortable providing their first name, last name and email.

For the record, I am aware that I could’ve just deployed the original post’s GitHub repo with my super-secret keys in the code and it would work just fine. But I am a stickler for best practice and simplicity. Knowingly, it seems simpler to just put the repo out there but if I take extra care to deploy and configure the app properly, in the long-run, it is simpler. Trust me. Lastly, my GitHub repository is here. Please feel free to reach out if you have any questions. Happy dev’ing.

Advertisements