How To Set Up Your Facebook Fan Page

Creating Facebook Fan Pages and iFrame Tabs

Unfortunately, Facebook’s new policy of using iFrames is a double edged sword. On one hand, you can now use your WordPress pages in fan page tabs thanks to Fanpage Connect. On the other hand, it does take a little work to actually set up your Facebook Application, and there’s nothing that can be done to make it any simpler.

So let’s walk through first creating your fan page, then your Facebook application, and finally, enabling pages on your blog for use on your new fan page tab. Ready? Let’s go!

How to Create a Facebook Fan Page.

I’m going to assume that you have a Facebook account, so let’s get to creating the fan page.

  1. In your facebook account, click Ads and Pages. If you don’t see the option, click More, and it should be there. If it’s still not there, you can click this direct link to Create a Facebook Fan Page.
  2. Choose what type of page you’re creating – Local Business, Company, Brand or Product, Artist, Entertainment or Cause and fill in the appropriate details.
  3. Once you’ve accepted Facebook’s terms of service and clicked the Get Started button, your page is created!

Now, you’ll need to eventually upload your page profile picture (maximum of 180 x 540 pixels in size) and edit your basic info, but you can do that later. Let’s move on to that pesky Facebook application…

How to Create a Facebook Application

To create an iFrame tab on your fan page, you now have to create a Facebook Application and add it to your page. Weird, but stick with me and we’ll get it done!

  1. First, you need to add the Facebook Developer App to your account. Click this link to go to the Developer Application. Once there, add the app.
  2. Now that you’ve added the app, you’ll see a button on the right side that says Set Up New App. Click it!
  3. Enter the name of your new app – I use the basic site name. For the Fanpage Connect fan page, I used – what else – “Fanpage Connect”. Agree to the terms and move forward!
  4. Once your application is created, make note of the Application ID and the Application Secret – we’ll need these when we set up the fan page enabled page on your website!

How to Set Up Your Facebook iFrame

(Updated 2011-04-17 )
Cool, we’ve got the application created. Not so bad, and we only have a little farther to go. There are only a few settings we’ll have to mess with to get our iFrame tab enabled for your fan page.

  1. The first setting is the Canvas URL. This will be the base address for your fan page. Since your fan page is hosted on your site, you’d use your website address here. You can do this a couple ways. You can use just the base URL of your site, or if you’re going to maintain a whole set of fan pages, you may consider creating a parent page on your site like “facebook apps”.If you’re going to use just your base domain, then the URL would be something like http://www.yoursite.com/.If you’re going to create a parent page, then it might look like this: http://www.yoursite.com/facebook-apps/.This is assuming that in WordPress, you’ve got “Pretty Permalinks” enabled.
  2. You can set up the Secure Canvas URL if you can access your site via HTTPS. This is so that users logged in to Facebook securely will be able to see your tab. It’s important to note that if you don’t have a secure canvas URL defined, users browsing securely will not see your fan page tab!In order to access your site securely, you have to have an SSL certificate installed on your domain. You can either buy a secure certificate through your host, GoDaddy, or even get a free, 1 year SSL cert through StartSSL.If you don’t have a secure certificate installed and don’t plan on it, then leave this box blank.
  3. Next up is Canvas Type. This is a no-brainer – set it to IFrame.
  4. This next setting I enable no matter what, but it is optional. It’s IFrame Size, and I set it to Auto. This ensures that your fan page tab won’t have those pesky scrollbars.
  5. We’re moving right along now. The Tab Name will be what displays in the menu of your fan page. It can be anything you want, but if it’s the landing page, I call it “Welcome”.
  6. On Page Tab Type, again we’d set this to IFrame.
  7. Last but not least, your Tab URL. this will be the first page your fan page iFrame pulls up. This page needs to be created and be published on your WordPress site. So enter the full URL to your page here. Make sure that you use the trailing slash if you’re using pretty links or WordPress might get cranky!
  8. Again, we’re presented with an option fro a secure address, the Secure Tab URL. If you have that secure certificate installed on your site like we mentioned above, then you’d put the full URL to your page here. If not, then leave this blank – you can always edit the settings later if you decide to enabled SSL on your site.
  9. At this point, you’re done creating your Facebook Application iFrame. Click Save Settings!

Now, remember the Canvas URL setting? You need to take that along with the page name you entered into the Tab URL box and combine them. As an example, the page that is in the the Fanpage Connect’s iFrame on Facebook is: http://www.fanpageconnect.com/fb/.

Whatever combination of URL and pages you used to set up your application, that URL needs to point to a page on your site!

How to Add Your Facebook iFrame to Your Fan Page

Once you’ve saved your settings, you’ll be back at your application’s main screen. Click Application Profile Page on the right, then click Add to My Page on the left.

A lightbox will pop up with a list of the fan pages you administer. Pick the fan page we created a few minutes ago. Your iFrame is now added to your page!

How to Configure Your Facebook iFrame Tab

  1. From your profile page, go back to Ads and Pages, then select your fan page. From there, click Edit Page.
  2. Click Apps, and then click the Edit Settings on the iFrame application we just created. Here you can edit the name of the custom tab.
  3. Next, click Manage Permissions. If you want your new iFrame tab to be the default landing page (and who doesn’t), then select the drop down menu by Default Landing Tab and pick your iFrame tab, then click Save Changes.
  4. At this point, click View Page up in the right corner. You’ll either see your WordPress page in the iFrame or a 404 Error. If you see your page, then congrats! If you see a 404 error, then there may be a few things wrong:
    1. The URL for the Canvas and Tab were entered incorrectly,
    2. Your page on your WordPress site doesn’t match your Canvas and Tab URL, or
    3. The page hasn’t been created yet.

    Whatever the case may be, you can easily correct the mistake by editing your application settings.

Sound off!

Leave a Comment