PHPList 2 E-mail Campaign Manager

Prerequisites

For this section, we’ll make the following assumptions:

• We already have a Facebook account
• We already have a Facebook page
• We already have the Facebook developer’s application installed (http://www.facebook.com/developers)

Preparing phpList

Facebook allows us to include any content on our page in an iframe with a maximum width of 520 px. phpList’s default theming won’t fit in 520 px and so it will either get cut off and look odd, or will invoke awkward scroll bars in the middle of the page.

To resolve this, we’ll need to change the styling of phpList. Note that this will also affect how the public URLs to our phpList site are displayed outside of Facebook (that is, the default sign up page).

Navigate to the configure page in phpList’s admin interface, using the right-hand navigation panel:

Scroll down to the section starting with Header of public pages and click on edit. This is the HTML code that is added to the top of every public (not admin) page.

In the following example, we’ve removed the background image, the HTML table, and images, but left the CSS styling unchanged:

Having saved your changes, edit the next section labeled Footer of public pages and make the corresponding changes:

Remember that the actual content that the user sees will be “sandwiched” between the header and footer. This means that if you open a tag in the header, you need to make sure it’s closed again in the footer.

Again in this example, we just closed the HTML body tag in the footer:

Having changed the header and footer of the public pages, browse to your default public page (http://your-site.com/lists/, for example) to see how the page looks:

Note that there is hardly any styling now, but that there are no fixed-width elements which will cause issues with our iframe. Tweaking the design of using the public header and footer code is a task left to the reader.

Creating the Facebook app

Before we can add phpList to our Facebook page, we need to create an App.

From http://www.facebook.com/developers/, click on the Set Up New App button:

Click the radio button to indicate that you agree to the Facebook terms and then click on Create App:

Prove you’re a human by completing the CAPTCHA:

You’re taken to the edit page for your new app. Under the Facebook Integration section, enter at least the following details:

• IFrame Size: Auto-resize (we don’t want scrollbars)
• Tab Name (what the tab will be called when your page is displayed)
• Tab URL (the full URL to the page you want loaded in your iframe. Generally, this would be a phpList subscribe page)

Once you’ve saved your changes, you’re taken to your list of applications. Click on Application Profile Page to see the application as other Facebook users would see it (as opposed to the developer):

On the application’s profile page, click on Add to My Page to add this application to your Facebook page:

When prompted, choose which of your pages you want to add the application to. In this example, we’ve created a page for this article, so we add the application to this page: