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

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.

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:

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 book, so we add the application to this page:

Now that we've added the application to our Facebook page, view the page and click on the Edit Page button:

Under the Apps section, you'll find your application listed. Click on Edit Settings:

The only setting available to us is adding a tab, so click on Add to do so:

You are prompted for a custom name for your tab. The default name you chose when creating the application will be used, unless you enter a custom name. Click on Okay to complete:

The next time you view your page, you'll notice an additional tab created for your application:

Clicking the tab will show you your phpList installation inside an iframe:

Obviously, any adjustments you make to the styling of the header and footer inside phpList will alter the way the phpList content is displayed on the Facebook page.

You may want the phpList page to be the default tab on your page, so that when someone visits the page, the first tab they see is your phpList sign up form.

To change your page's default tab, edit the page again and click on Manage Permissions. Set the Default Landing Tab to the tab created by your app and click on Save:

This tab will now be shown to visitors by default, as opposed to the Wall or Info tab.