How to make Facebook pages serve content from your website

This is a short HowTo for making a Facebook page and inserting an iFrame from to a website.

Note: SSL became mandatory for page tab apps in October 2011. This post has not been updated.

This is a short “How To” document for making a Facebook page and inserting an iFrame from your website into that page. For more information see the Apps on Facebook.com documentation. (Update: Since this was written, Facebook has introduced Timeline and SSL requirements for iframes. Your mileage may vary.)

Make a page

Go to the very bottom of this page and click “Create a Page“.

Choose a type of page, a category, name, agree to the TOS and “Get started”.

“Edit Page”, “Manage Permissions” (2nd from the top on the left) and make sure Page visibility is set to “Only admins can see this page”. Take note of the “Default Landing Tab”: you can change that to decide what your visitors see first (i.e. your app).

Now “Manage Admins” (below the orange flag on the left), and add me.

Make an App

Go to the Developer page and (if you can) add the app. From the same page “Set Up New App”.

Choose a name, security check, you’ll get to the “About” tab of the App configuration page. Go to the bottom and add me as an Administrator.

How to get your website into your Facebook page

Facebook uses iFrames to embed your information in their Pages. (It’s dangerous as hell for users, but that’s what they do.) You will need a webpage that’s the right size to fit into their format, but you can tinker with that after we get you set up.

App configuration page

About tab: Whatever you like

Web site tab: Site url is “http:/www.yoursite.com”. Site domain is “yoursite.com”

Facebook Integration: Canvas Page is your app’s slug at FaceBook. If this app is just for your use, it really doesn’ t matter (if it’s for everyone else, something descriptive is a good idea). Canvas URL is the location of the page that will display on your app’s home page: “http://www.yoursite.com/facebookapp”. If you have SSL on your website, you can have a Secure Canvas URL too. Skip down to “Page Tabs”: Tab name is how your app will appear on the Facebook sidebar; Tab URL is the page that will show up when the app is installed. IMPORTANT: the Tab URL must be a subdirectory of the Canvas URL. i.e. “http://yoursite.com/facebookapp/tab”

Save and go back to “My Apps”.

My Apps

Select your app’s tab from the menu to display the summary page. On the right menu, select “Application Profile Page”. On the bottom left menu, select Add to My Page. When you go to your page’s URL, you’ll find the app installed on the left menu (probably under Photos).

Leave a Reply

Your email address will not be published. Required fields are marked *