Tuesday 26 April 2011


IFRAME TUTORIAL


Find us on Facebook



Facebook recently announced that on March 11, 2011, the Static FBML application will no longer be available to be added to Pages and that no new FBML applications can be created after that date.

While Facebook indicates that current Static FBML and FBML tab applications will continue to function for now, it strongly encourages everyone to move from FBML to using iFrame applications.
 





 What is an iFrame application?

An iFrame application you allows you to embed an external Web page in your Facebook Page tab (in the new Page layout, "tabs" have been moved from the top of the page to the left column.).

The good news is that the iFramed Web page, because it isn't hosted on Facebook, can use standard HTML, CSS, and JavaScript like any other Web page does.
 
The downside of this approach is that you need to be familiar with those technologies and you will need a Web-accessible server where you upload the files for your application page. 

First make your page

We Will make it using HTML then upload the HTML file to any free hosting site such as

zymic


After making a free account on the site you will need a free FTP client software like

filezillato upload your files

Here
is a tutorial from zymic how to configure filezilla and how to upload files.




Second go to facebook developer
 The first step in creating an application in Facebok is to install the Facebook Developer application.

To do that, log in to Facebook and then visit the URL
Facebook Developer

 If this is your first time installed the Developer Application, you will see the Request for Permission dialog  and mobile Verfication so, after you verified your account by mobile follow the following instructions:

Creating your iFrame application

Now that you have the Developer App installed, click on the Set up New App button.

 









GO TO YOUR PAGE ENJOY!!!!!
And here is my HTML code of this page and i made it by notepad and saved as index.html
designed by
Osama Ibrahim
Posted by at

7 comments:

  1. Anonymous5 May 2011 at 10:14

    can us using iframe from our blog url

    ReplyDelete
  2. Osama5 May 2011 at 10:27

    yes you can do

    but the disadvantage :that the blog page width is greater than 520 the width of the facebook page allowed so there will be scrollbars on your iframe tab,but it will work normally

    ReplyDelete
  3. Christopher Hopper21 May 2011 at 18:40

    Osama, thanks for taking the time to post this tutorial. But I got stuck on the Facebook Developer site. I'm stuck and not sure where to actually click to download the app. have they changed it up since you wrote this? Thanks. ch:

    ReplyDelete
  4. Osama22 May 2011 at 12:27

    what is appeared to you when you go the Facebook Developer http://www.facebook.com/developers/?ref=ts

    it shows me the first image i put in the tutorial which contains Add New APP on the right

    ReplyDelete
  5. m_lateef26 May 2011 at 02:45

    @Osama when i added your html to my page tab, scroll bars appear which i don't want how can i get rid of this scroll bars
    see my tab here
    http://www.facebook.com/pages/Untitled-2/120297838049307?sk=app_211731822192753
    Thanks in advance :)

    ReplyDelete
  6. Osama26 May 2011 at 03:35

    @ m_lateef

    i have i code for that but it seems that i can't post it here every time (Tell me error)

    so can you leave here yr Facebook account and will sent you the code in a message

    ReplyDelete
  7. m_lateef26 May 2011 at 07:41

    @Osama
    this is my facebook account
    http://www.facebook.com/teherefa
    i'd be very grateful with that
    thanks in advance
    :)

    ReplyDelete

Subscribe to: Post Comments (Atom)