Apr
19
2011

 

This is intended for non programmer as a step by step guide of how to to display Flash content in a Tab page. (Note: technically, there’s no longer Tabs in Facebook pages since Facebook moved the tab to the left Sidebar, but I will still refer them as Tabs).

Non developers no need to freak out about the term ‘Application.’  Even though you are only intending to create a Tab page, the content of your tab page is considered an Application, it’s just the term. The so-called Tab Application can even be a static html that will just be IFRAMED inside the Facebook Fan Page.

Example Page

http://www.facebook.com/pages/Permadicom/102374649838897?sk=app_218249174859000 (the Jigsaw app in the sidebar)

Guide

So let’s say you have a page here for a Jigsaw game, containing a Flash movie that you want to put in a tab like below:

Take look at the html here, and do view-source to see that it’s just regular embedded Flash movie:
http://www.permadi.com/games/jigsaw-2011/. The only thing you should be aware here is the width of the Flash movie shouldn’t be more than 520 pixels because otherwise it won’t fit inside the Fan Page.

Let’s put this page into a Fan Page step by steps:

1. Register as a Facebook Developer if you haven’t already

http://developers.facebook.com/setup/

2. Create the Facebook Application

Go to the Create New Application link or here:
http://www.facebook.com/developers/createapp.php

Review the Facebook Terms and enter a name for the application. My application is called Jigsaw and this name will be referred throughout this guide.

If you Agree to the Facebook Terms and submit the form, you will then be shown something like below (I don’t know how to proceed if you do not agree to the term:):

Upload an icon, enter other fields as desired, such as the description, etc.  You can always edit this form later but I recommend you at least upload an icon at some point  (it could be jpg or png files) because this icon will be displayed on the Tab.  If you do not upload an icon, a default icon will be displayed.

3. The Web Site Section

Click the Web Site tab on the left sidebar, then enter your domain name in the Site Domain field (no need to enter the http:// part).

For the Site URL, you can put the full URL of the folder where the content of your tab page will reside, such as http://permadi.com/myTab/, or any path above it (i.e.: just http://permadi.com/).

Click Save Changes.

4. The Facebook Integration Tab

Go to the Facebook Integration section.


There is a lot of fields here but most are optionals.  Here I will only show the items that are required for a Tab application. Very little is required here as you will see.

Scroll to the bottom until the Page Tabs section, then enter the Tab Name and the URL of your page in the Tab URL field (you can ignore the other two fields).  The Tab URL should contain the full URL of the page that you want to put inside the tab iframe.  You can see I entered the html page that you saw earlier: http://www.permadi.com/games/jigsaw-2011/.


Notice that the Tab URL may contain a basic html page or scripted page such as php, asp.

Click Save Changes and you will be shown the summary page.

Now the Application is set-up and ready to be added into a Fan Page or User Page.

5. Adding The App To A Page

Click the Application Profile Page link (on the right side of the summary). You should be directed to a page similar to this:

Click the Add To Page link on the left sidebar (marked with red circle on the screen above). You will then be presented with list of pages that you manage. Select to which page or you want the app to appear.  Example page: http://www.facebook.com/apps/application.php?id=218249174859000

Running The App In Page Tab

Ggo to the page you selected in the previous step and you should see the Application listed among the icons in the left sidebar:

Above, you see the one I added, called Jigsaw (your icon should appear here if you added an icon in Step 2).  Click the link and the Application should show up:

You can try this example page at: http://www.facebook.com/pages/Permadicom/102374649838897?v=app_218249174859000.

If you get a blank screen with your app, make sure that the URL you entered in Step 4 is correct.  Open that URL in a new browser window to make sure you haven’t mistyped anything.

If you want to send link to this tab, you can copy the URL on the browser bar while you are on that tab (circled in red above).

Advanced Settings

You can change the text of the tab in Step 4, but if you want to change it for a specific page only, you can go to the page settings.

Click Edit Settings in the App.

Removing From Tab

From the Edit Settings section of the page (shown above), click the remove in the dialog.

Making The Tab Default Tab For A Page (This Only Works For User That Hasn’t Liked The Page)

Click Manage Permissions and set the Default Landing Tab to the App.

Links

The Jigsaw app running in the tab: http://www.facebook.com/pages/Permadicom/102374649838897?sk=app_218249174859000

The same Jigsaw app as stand-alone: http://www.permadi.com/games/jigsaw-2011/

One Response to “Playing Flash In Facebook Tab Page”

  1. [...] Playing Flash In Facebook Tab Page [...]

Leave a Reply

*