Blog

Just like we promised, Brag Interactive now has a free Facbook iFrame template you can download for free. All that we ask is you please “Like” Brag Interactive on Facebook. Once you like our fan page you will be able to download the Facebook iFrame template we created. You can make any changes and customizations to fit your needs.

Head over to our Facebook page and check it out. The download has a PDF on how to add the Facebook iFrame page to your profile. If you don’t have a program to open a PDF file, you can following the steps below.

Server

The first thing you will need to do is make a directory on your server. Log in to your FTP of choice and make a directory called “fan-page-demo” on your server. This is the folder that you want to put all the files included in the downloaded file from Brag Interactive.
Facebook iFrame files
We have provided all the code and images for the fan page, so all you will need to do is set up your Facebook application to point to the newly created directory.

Facebook Developer

To make your Facebook application, you will need to install the Facebook Developer application. Go to http://facebook.com/developers

If this is your first time to use the developer application, you will need to Allow permission for the developer app. Once you have installed the developer application, click Set Up New App in the top right corner.
Set up Facebook Application
Type in the name of your application, click Agree to the terms, and click the Create App button.
Facebook iFrame App Name
The next screen will be the captcha. Fill this out and click Submit.
Facebook captcha
Now you should be on the About tab of your new Facebook application.
Facebook Application About
On the About tab you can type in basic information about your application. Type in the Application Name and upload the Icon and Logo for your page. The Icon will be the little image under your profile picture, so pick a good one!

You can click through all the tabs to customize your application, but the only other tab that is necessary to get your new iFrame page going is the Facebook Integration tab.
Facebook iframe integration
If you created the “free-page-demo” directory on your server, the settings in the screenshot above should be the only fields you need.

The Canvas URL is the location on your server where you put all your application files. The Tab Name will be the title of your tab under the profile picture on your page. Make sure you have iFrame selected by the Page Tab Type heading and the Tab URL is pointed to the page you want to load first when your Fan Page is loaded.

Once you complete this page click Save Changes

Adding the application to your fan page

Now that you have created your Facebook application, you need to add it to your page. After you have saved your application settings you want to go to the Application Profile Page.
Facebook iFrame Profile
On the following page click Add to My Page and select the profile page you would like the application to display on.
Add iFrame to Facebook page
Go to your page and look for the application under the profile picture. Click on the newly created tab and you should see your beautiful new iFrame fan page!
Facebook iFrame Demo

Customizing your fan page

All of the text on the fan page can be edited when opening the index.html file. The template is fully customizable and you can change whatever you would like. To get going, add your own facebook like button(http://developers.facebook.com/docs/reference/plugins/like/), link to your Twitter and RSS feed, change the logo, and change all the filler text.

You can also change the header graphics and style the fan page however you would like. This should be a good base for whatever look you are going for.

Questions?

If you run into any problems or have any questions feel free to use the comment section below or contact Brag Interactive.

We can also help you develop and design fan pages with more features and functionality. If anyone is interested we can make a multi-page Facebook page using jQuery.

Do you have a custom page or have any links to great page designs? Lets see them!

Tagged with:
  • Pingback: How do I create a successful Facebook page for my company? - Quora

  • hrimsolutions

    Hi Braginteractive,

    We are trying through this tutorial, but we are getting message as below.

    The page cannot be displayed

    The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.

    HTTP Error 405 – The HTTP verb used to access this page is not allowed.
    Internet Information Services (IIS)

    Please advice.

    • Brag

      This issue has been resolved on our Facebook page. You can view the solution there. Here is the outcome from the user. “I fixed it. I had a rouge PHP file in my directory. All good now. Thanks for your help.”

    • Brag

      Looks like a hosting issue.

  • Mylovefami

    Not Working for me…showing an error message…Need help please…

    • http://braginteractive.com Brad

      Can you provide a little more detail? When and where are you getting the error message?

  • http://braginteractive.com Brad Williams

    No, you will not be able to use Paypal as your server to host your page. You will need to get your own hosting account.

  • Serge de Vries (Dutch)

    error message 
    Secure Canvas URL will be required on October 1, 2011.
    Secure Page Tab URL will be required on October 1, 2011.

    I dont have a secure website (https) so i cant find my app-icon under my name, thus i cant add it to my fanpage…. or can i?
    http://apps.facebook.com/sergedevries 
    so this is as far as i can get…

    • http://braginteractive.com Brad Williams

      Serge, you need a SSL certificate on the domain that hosts your fan page tab content. Facebook now requires that you have the content hosted on a secure server.

  • followilko

    What if you want to add multiple tabs in this way? For a reason facebook only allows me to set up 1 app. When i set up another one i can’t go to the “Application Profile Page”. This url isn’t visible then.. Do you have a solution?

Recommend on Google