Monday, April 18, 2011

How to Create IFrame-Based Facebook Pages

These are the pages that are customized with your own graphics and branding to set you apart from other facebook pages. You can get as creative as you want to catch eyes!

This is a basic tutorial for setting up your own custom iframe for your facebook page. My book "The Hairstylist's Guide to Social Networking" will soon be updated to include different websites that are easy to use to program your own iframe for your facebook page with link embeds as well as tools for interacting with your clients.

but for those who are computer savy here is a tutorial to get you started on building your own custom page!

1. On your Facebook page, click on “Edit Page” (in upper right corner).

2. Click on “Apps” at the left hand side navigation. This will show a list of
any tabs that you currently have along with other installed applications.

3. At the very bottom of the Apps page, click on “Browse
More Applications”.

4. In the search box, enter “developer” to search for the
Facebook Developer app. Use the smaller search box on
the left and not the main Facebook search bar at the very
top of the page.

5. Click on the Developer app, then select “Add to my Page”
under the logo at left. A box will pop up to show which
pages you can install the app on. If you do not already see
your page listed there, the app is likely already installed. If
your page IS listed, click on “Add to Page” (left navigation
towards the bottom) to install. After you have installed
the app or if it is not listed, close the pop up window and
click on the “Go to App” button under the logo on the

6. Click on the “Set Up New App” button at the top of the page.

7. You’ll need to have a name for your page. This name will be what
displays on the “tab”, so choose wisely.
There should be a security captcha at this point.
There are now three screens that you will need to fill out to properly set
up the app.

8. The About screen contains basic information about the page/app. You
can upload a logo for the page and will need to add your privacy policy
and terms URLs to this page. NOTE: You MUST add either a trailing slash
or a ‘?’ after your URLs for privacy and terms. This is required by
Facebook to submit the form.

9. The Web Site screen contains information about your own company
domain. NOTE: Like on the About screen, you will need to enter a
trailing slash on your website URL.

10. The Facebook Integration screen is where many of the setup details are entered.

Canvas Page: Should be something short and memorable as part of the
URL for the app you are creating. This will become the URL for the
Facebook app that will appear in your iFrame.

Canvas URL: The actual page on your server with the content designed
to appear in the iFrame, e.g., ‘Thanks for visiting our Facebook Page’.
The Canvas Page will grab this URL and place it in the iFrame. Must have
the ‘/’ at the end or a ‘?’. You can also supply a secure (https) version.
Once you have completed these three screens, click “Save Changes”.
You will be able to come back later and edit these settings as needed.

11. After saving , click on the “Application Profile Page” (right hand
navigation column, 2nd item from the top) link to add the new Facebook
tab page to your Facebook page.

12. Once on the Application Page, click on “Add to My Page” (left hand
navigation column) to add the new content to your Facebook Page. A
pop up window will appear. Click on the “Add to Page” button adjacent
to your Facebook page name.

13. Go to your Facebook page. If you don’t see the new Tab Page listed
under the logo, you may need to change the order. Simply click on
“More” then “Edit” and drag your Tab page higher in the order to
ensure it is a page that shows in the menu there by default, if you prefer

14. Preview the tab page by clicking on it. Make sure that the layout works
the way you want. If it doesn’t, you can always edit your style sheet or
page on your own website to ensure it fits properly.
If your server refuses to display your Canvas URL and it is a .html page
you can try renaming the page with a .php extension.

No comments:

Post a Comment