3 min read


PHPList 2 E-mail Campaign Manager


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:

Integrating phpList 2 with Facebook

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.

Integrating phpList 2 with Facebook

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

Integrating phpList 2 with Facebook

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

Integrating phpList 2 with Facebook

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:

Integrating phpList 2 with Facebook

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:

Integrating phpList 2 with Facebook

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:

Integrating phpList 2 with Facebook

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

Integrating phpList 2 with Facebook

Prove you’re a human by completing the CAPTCHA:

Integrating phpList 2 with Facebook

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):

Integrating phpList 2 with Facebook

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

Integrating phpList 2 with Facebook

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:

Integrating phpList 2 with Facebook


Subscribe to the weekly Packt Hub newsletter

* indicates required


Please enter your comment!
Please enter your name here