Integrating phpList 2 with Facebook

Get to grips with the phpList e-mail announcement delivery system!

 

PHPList 2 E-mail Campaign Manager

PHPList 2 E-mail Campaign Manager

Get to grips with the PHPList e-mail announcement delivery system!

        Read more about this book      

(For more resources on this subject, see here.)

Prerequisites

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

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


        Read more about this book      

(For more resources on this subject, see here.)

Configuring the Facebook 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:

Integrating phpList 2 with Facebook

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:

Integrating phpList 2 with Facebook

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.

Making phpList the default tab on your 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.

Summary

In this article, you've learned about integrating phpList with Facebook.


Further resources on this subject:


Books to Consider

comments powered by Disqus