Today I am going to share you exactly How to create iFrame App for your Custom Facebook Landing Page?

It is the second part of the tutorial in this series - Complete customization of Facebook Landing Page with Apps.

Before creating Facebook iFrame app, you first need to create your Facebook landing page. So, go through the first part of the tutorial – how to create your own custom-made Facebook landing page, create your custom-made Facebook landing page. After that, this second part of the tutorial will actually be effective for you.

Now, let us find…

What is iFrame?

iFrame or inline frame is an html tag that allows you to load separate web document into an existing web document. An iFrame can be placed anywhere in parent document. CSS, Javascript can be used to manipulate its properties such as its position and size.

What is Facebook iFrame App?

A Facebook iFrame app or application is placed on your Facebook landing page and through this app you are allowed to embed an external web page or web application into your Facebook page. You can build your iFrame application using any language or tools that supports web programming such as PHP, Java or C#.

The concept is …

• Create your own Facebook page. You may call it your Facebook landing page if you want people to land on it.
• Create a Facebook iFrame app and add it to your Facebook landing page.
• Create a web page on your own website that should encourage people to like you.
• Populate your web page into your Facebook iFrame app by calling its URL from your iFrame app.
• As your Facebook landing page has an iFrame app on it and this app populates your web page, therefore your web page content will be visible to people on your Facebook landing page through your iFrame app.

I think… the concept is clear to you. Now lets go straight to the topic today.

In this post I am going to show you step-by-step how to create an iFrame app on your Facebook landing page so that you can easily create your own iFrame app within minutes.

How to create iFrame App for your Custom Facebook Landing Page?

Before proceeding further, here is my observation on Facebook for you.

Facebook is always experimenting with its look and functionalities to provide the best possible platform for the people and that’s the main reason they are making continuous changes in it.

Sometimes it irritates people. The methods that worked for months… don’t work now. It is quite obvious that the same thing will happen in the near future too.

So, whatever steps I put down here in this tutorial may not work in the future and it should be acceptable to all of us unless and until we ignore Facebook. This tutorial is published here is expected to be effective from October 2011 anticipating the changes made by Facebook till date.

Step 1:

1. Create your custom Facebook landing page.

Step 2:

1. Login into your Facebook account. You will be in a page like Fig. 1.

2. Go to the bottom of the page and click the link Developer.

Step 3:

Now you will be in a page like Fig. 2.

1. Click the link Apps at the top middle of the page.

Step 4:

Now you will be in a page like Fig. 3.

1. Click the button + Create New App at the top right corner of the page.

Step 5:

It’s a pop up window looks like Fig. 4. Creation of your new Facebook app starts here.

1. Enter the name of your application in the textbox App Name.

In this example I entered appjoinme as my application name simply because it is an application and I want it to be used by users, who want to join me.

2. Select your language from the options given in Locale.

3. Agree to the terms and conditions provided by Facebook by clicking the checkbox called I agree to Facebook Terms.

4. Press the button Continue.

Step 6:

It is another pop up window (Fig. 5), which is used by Facebook for security checking.

1. Enter the security text visible to you in the text box called Text in the box.

2. Press the button Submit.

Step 7:

This is a page (Fig. 6) where you need to provide two sets of information.

1. Enter basic information of your application such as Application Display Name, App Namespace, Contact email, Category and a sub category.

In this example, the application display name is appjoinme, which was already entered in Step 5.

Now, you need to select those options from the list depending on how your app integrates with Facebook.com.

2. Select two options – App on Facebook and Page Tab.

In this example, I selected the same options. I selected option App on Facebook as I wanted to build an app on Facebook. I selected another option called Page Tab because I wanted to build a custom app tab or application tab on my Facebook landing page, which I already created and described step-by-step in my previous blog post.

Here you have other two options – Website and Mobile and Devices. In this example, I am not selecting them because I don’t want to use them in this demo example. So you can ignore them too.

3. Click the button Save Changes.

Step 8:

Step 8 is an important step. Here you are in a page (Fig. 7) where you need to provide few important inputs for your Facebook application. They are Canvas URL, Secure Canvas URL, Page Tab Name, Page Tab URL and Secure Page Tab URL.

1. Enter your canvas URL in the text box Canvas URL.

A canvas is basically a blank container within Facebook on which your iFrame application or web application runs.

You need to create your web page or application or content using any programming language or tools that supports HTML, Javascripts, CSS, PHP and place it on your own website.

In this example, I created an web page index.php and uploaded it in a folder called npmfacebook of my website for my Facebook app. Therefore, the URL of my index.php is http://www.netprofitmagic.com/npmfacebook/. I have entered this URL as my Canvas URL because I want this web page to be populated on my iFrame app.

We don’t need to write the URL as http://www.netprofitmagic.com/npmfacebook/index.php. When Facebook finds the folder npmfacebook on my website it will automatically pull the content index.php to my iFrame app.

Here you need to remember two things about Canvas and it’s URL.

• You are asked to save your web content in a PHP file. If you save it as HTML file, it will not work.
• The maximum width of  your web content must be 520 pixels otherwise it will be truncated.

2. Now enter your secured canvas URL in the text box called Secure Canvas URL.

The concept is – Keep a copy of your web page for your iFrame app in a secured folder of your website. Otherwise, users on HTTPS visit your Facebook app will not be able to see it. So, you need to upload a copy of web content and all its images into a secured folder of your website and enter its address as your secure canvas URL. In this case, the URL of your web content starts with https://… From October 2011 onwards it is required.

3. Enter your page tab name in the textbox named Page Tab Name.

Page tab name is the title of your Facebook iFrame app that your users actually see. In this example, my iFrame app name is appjoinme and I would like my users find it as Join Me. So, I put Join Me as my Page Tab Name.

4. Enter your Page Tab URL.

Page Tab URL is the URL of your website content, and it will be pulled from your website to load on your Facebook page when users visit your app tab or application tab. This URL is the same as your canvas URL.

5. Enter Secure Page Tab URL.

Secure Page Tab URL is exactly your Secure Canvas URL. It is the URL of your secured web content, which will be pulled from your website to load on Facebook when users on HTTPS visit your app tab or application tab. It is going to be a required field from October 2011 onwards.

6. Keep the text box Page Tab Edit URL blank.

This is not required until and unless you authorize some one else to admin your Facebook app. This URL is basically the URL given to your page admins to edit or customize their page tab app.

7. Press the button Save Changes.

Step 9:

Now you are in a page, which is as similar as Fig. 8.

1. Click the link View App Profile Page at the left hand side of your page.

Step 10:

Now you are in a page just like Fig. 9. In this page, you can see the name of your app at the top of the page. In this example, it is my app appjoinme.

1. Click the link Add To My Page at the left hand side of the page.

Step 11.

It is a pop up window just like Fig.10.

Here you need to select the Facebook page that you created previously (See my previous blog post) on which your iFrame app will load. In this tutorial you already learned how to create that iFrame app.

In this example, I am creating an app callled appjoinme. You already know that. I am creating it for my Facebook page Debabrata welcomes you, which I described step-by-step in my previous blog post. So, I selected the page Debabrata welcomes you as my page where I add my current app appjoinme.

In Fig.10, you can see that there is list of pages. It is because of the fact that I created a few pages on my Facebook account. If you created only one page there will be one item in the list. So, don’t be confused.

1. Select the appropriate page from the left column and click the corresponding button Add to Page at the right.

Step 12:

Now you are in a page like Fig. 11.

1. Click the button Edit App at the top right corner of the page.

Step 13:

Here you are in a page like Fig. 12. In this page you will be able to edit many settings of your app like App Information, App Settings, Wall Settings, Contact Importers, Mobile etc. But, you need to edit one setting now.

1. Click the link Edit under App Information.

Step 14:

You are in a page just like Fig. 13. Here you can see the summary of your Facebook iFrame app. There is another field called Access Token, which prompts you to click a link within it to grant permission to your app to get an access token.

1. Click the link need to grant permissions in the field called Access Token.

Step 15:

Here you are in a pop up window, which is similar to Fig. 14. It tells you that the access token of your Facebook app created.

1. Click the button OK.

The page where you reached looks like Fig. 15.

This page showed that creation of your own Facebook app has been completed. It displays your app name at the top left corner and the summary of it’s settings on the middle part of the page.

In this page you don’t have anything to do.

Step 16:

1. Just copy the URL of your custom Facebook landing page that you created with the help of my previous tutorial.

I think you kept your Facebook landing page URL in a safe document after creating it. If you did not, and want to create it now, then keep it safe for your further use. Just copy the URL and paste it on the address bar of your browser or simply write it down on the address bar of your browser.

Alternatively, you can find your own Facebook page tab at the left hand side of your Facebook home page. You can go to your homepage by clicking the link Home at the top of any of your Facebook pages or you just log out and login into your Facebook account to view your Facebook homepage.

Here I directly typed the URL of my Facebook page Debabrata welcomes you at the address bar of the browser. The page will look like Fig. 16.

Here in this Fig. 16, you can see my Facebook page Debabrata welcomes you. If you go to your own Facebook page, you will find similar things on it.

2. Click the button Edit Page at the top right corner of the page.

Step 17:

Now you are in a page, which is similar to Fig. 17. Here you will find many things to edit. But the most important action in this step is setting up your default landing tab. Normally default landing tab is Wall if you didn’t change it previously.

1. Click the option Default Landing Tab. Select the option that you entered at time of naming your Page Tab Name in Step 8.

In this example, my application name is appjoinme and the page tab name is Join Me, which I have selected as my default landing tab shown in the following Fig. 17.

2. Click the button Save Changes at the bottom of this page.

Step 18:

You are in a page like Fig. 18.

1. Click the link Account at the top right corner of the page to get a drop down list where you will find Log Out at the bottom of list. Just select Log Out.

Step 19:

1. After logging out of your Facebook account, Type the URL of your Facebook landing page on the address bar of your browser.

Here I typed the URL http://www.facebook.com/pages/Debabrata-welcomes-you/165449700200074 of my Facebook landing page Debabrata welcomes you.

It looks like Fig. 19. It is my Facebook landing page Debabrata welcomes you where my recently created iFrame app Join Me has been populated. And if you notice the left hand side of the page you will find that my page tab name Join Me is highlighted.

Thanks you for your patience. If you are following the steps described in this tutorial, you already created your iFrame app. You also find that you are in your Facebook landing page with your recently created iFame app populated on it.

Remember that, you will get this view ( i.e. your iFrame app on your custom Facebook landing page) when you are not logged in that means when you are logged out.

The reason behind it …

When your people come and visit your Facebook landing page by clicking the reference link (e.g.Like Debabrata on Facebook) on your website, blog, newsletter or anything else, they will find your iFrame app on your Facebook landing page. This iFrame app will encourage them to like you. If they like you, they will click the Like button to join in your community and become your friends.

Conclusion:

I think this tutorial is little bit lengthy. Actually I tried to explain each and every activity in details that needed to create your Facebook iFrame app and add it to your Facebook landing page.

If you find this tutorial useful and actually helps you create your own iFrame app, only then my work will be meaningful.

Go through this tutorial How to create iFrame app for custom Facebook landing page, follow the steps and create your own iFrame app on your Facebook landing page at ease.

Off course don’t forget to comment your feeling on this blog. It will encourage me to create this kind of tutorial in the future for you.

Your friend in the business,

Debabrata Dhar

Tags: Facebook iFrame App October 2011, Facebook iFrame App Tutorial, How to create Facebook iFrame app, What is Facebook iFrame App, What is iFrame