Membuat Tab IFRAME Dalam Facebook Fan Page
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, they are strongly encouraging everyone to move to using iFrame applications rather than FBML ones.
Over the coming weeks, we will be posting a series of tutorials to help you get started with using iFrame applications on your Fan Page.
iFrames are now supported on Page tabs
Prior to February 10, 2011, Facebook had disallowed iFrames on Page tabs and, although were allowed on Canvas pages, they required a user to click activation text or an image to load the iFramed content.
However, as of February 10 iFrames are allowed on both Page tabs and Canvas pages AND they don't require an activation to load them!
What is an iFrame application?
An iFrame application you allows you to embed an external Web page in your tab on your Facebook page (in the new Page layout, "tabs" are on the left side of your Page, rather than appearing on the top).
The good news is that this Web page, because it's not hosted on Facebook, can use standard HTML, CSS, and JavaScript like any other Web page does. Interactions with Facebook content are done using the Facebook Software Development Kits (SDKs) and XFBML tags. (For this tutorial, the Facebook SDK is not required.)
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.
Setting up your server
On your Web server, create a directory for your iFrame application. In this example, we are going to create a new directory on the server called "facebook" and then a subdirectory called "mytestapp". The file path will look something like this in your FTP program:
You will want to put all of your files (HTML, CSS, Javascript, PHP, etc) in this folder or its subdirectories. If you don't know how to do this, read this FTP tutorial.)
Your HTML file
Remember, in your HTML file you can utilize CSS — and inlining styles with the <style> ... </style> tags works fine with iFramed HTML files — and JavaScript (Do not use FBML or FBJS!).
You'll want to set the main container DIV for your content to 520 pixels wide. Here's a very stripped-down example of your HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<div id="container">
<p>This is some HTML content</p>
</div>
</body>
</html>
In the above example, I include both the code for an external stylesheet called with the <link /> tag, as well as inlined styles called with the <style> ... </style> tags, in case you want to do it that way. Either should work fine.
Installing the Facebook Developer Application
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 http://facebook.com/developers
If this is your first time installed the Developer Application, you will see the Request for Permission dialog show below:
Click the Allow button to proceed.
Creating your iFrame application
Now that you have the Developer App installed, click on the Set up New App button.
Give you application a name, click the Agree bubble and then click the Create App button.
Enter the security phrase and then click Submit.
There are a lot of options you can tweak related to your application. In this post, we are going to focus on the basics needed to get your application up and running.
The "About" Tab: Name your application and set a small and large icon
Give your app a name that is short and descriptive. This name will appear on your list of apps on your developer page.
The icons are quite important, especially the small one now that it's shown in the left-column navigation. So make it eye catching. If you don't create your own icons, you'll get the defaults, as shown below.
The "Facebook Integration" Tab: The really important stuff!
Click on the Facebook Integration tab on the left to get started.
In the Canvas section, enter the URL for the location on your server where you are storing your application files.
Further down on that tab, enter information about your Tab in the Page Tabs section.
- The Tab Name is what will appear on the sidebar of your Fan Page. It can be up to 16 characters in width;
- The Page Tab Type should be set to iFrame;
- The tab URL is the file name of the file that should be loaded first when the Tab is loaded into your Fan Page. It will generally be index.html, index.php or something similiar. Make sure to put something in the field or your tab will not appear on your Fan Page.
Click the Save Changes button.
Installing your iFrame application on your Fan Page
Once your Facebook application has been created, you will need to add it to your Fan Page. To do that, click on the Application Profile Page link on the right side of your application page.
Now click the Add to My Page link on the left.
A dialog overlay will open and will show any pages that you are an Admin on.
Find the page that you want to add the Tab to and click the Add to Page button.
Your new iFrame app should now appear on your Fan Page. If you don't see it there right away, you may need to adjust your Page settings. From your Fan Page, click on the Edit Page link. Then click on Apps and find the application that you just added. Click on the Edit Settings link next to the app and Add link.
Troubleshooting
Based on feedback to this post, we are starting to compile some iFrame App Troubleshooting Tips. We will update this section as new questions some up.
Check your URLs!
Make sure that the URL you set for your iFrame is correct. Try accessing it directly, via your browser, instead of via your Page tab. Bad URL addresses are the most common problem. If the URL to the Web page or image you want in your iFrame Page tab is incorrect, obviously the tab won't work.
You can also test the validity of your URL by right-clicking the area where your iFramed content should be and then select "This Frame: Open Frame in new window" or something similar (each browser presents this option a little differently).
Error messages from your server
If your server returns an error when Facebook tries to load the HTML page into the iFrame, you may need to change the file extension from .html to .php or .aspx (depending on the server platform you are using). When Facebook loads the iFrame, they do a POST to the index page in order to pass some data to your application and it looks like some servers are set up to not allow a POST to a file with the .html extension. We will be taking a look at how to access the data that Facebook passes in the next tutorial, but I wanted to mention this now since it caused issues for some people.
Scroll Bars
If your iFrame content causes a horizontal scroll bar to appear, something is causing the width to exceed 520 pixels, which is the maximum that Facebook allows.
We recommend adding some CSS (either inline as shown below or in your separate CSS file) to remove margin, padding, and border from elements by default. Many browsers add spacing around certain elements by default which can cause the scrollbars to appear unexpectedly.
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
}
</style>
Next Steps
If you are famaliar with HTML and CSS, you can begin building your tab page content right away. In future tutorials, we will be looking at adding interactivity to your Tab using the PHP SDK and XFBML tags.
Up next: Creating a Reveal Tab on an Facebook iFrame application using the PHP SDK
We would love to hear what you would like to see in this series -- If you would like to know how to do something specific using iFrame applications, just note it in the comments and we will see what we can do.
Yuk kasih tau teman-teman kamu di facebook, twiter, atau myspace!
What happened to the My Urban Kvetch blog of yours? It doesn't load right aomynre, and sometimes the content totally disappears. Should I link you here instead?
What happened to the “My Urban Kvetch” blog of yours? It doesn’t load right anymore, and sometimes the content totally disappears. Should I link you here instead?
Hi Diana, I have recently discovered that Static Pages as of March 18th can no longer be added to Facebook pages. Facebook has moved to a new format called iFrames. Leave it the to them to keep changing things. If you currently have a static page - you are allowed to keep them (at least so far), so this tutorial would help. I need to make an updated announcement on this post once I know for sure the details of this to let future readers know this. However, I am trying to learn this very confusing new "iFrame" stuff that Facebook makes you use know. I'll will do a simple tutorial on that once I figure it out.
As of the date this post came out Facebook as still allowing Static pages to be added. I'm so sorry is wasn't able to help you.
http://www.getautoinsurquotes.com/|auto insurance quotes 3445 http://www.findairflights.com/|cheap air flights =)
http://www.tzrinski.com/|online viagra >
http://www.prowomanprochoice.org/|propecia viagra 721
Thanks for this site..it really helped me a lot and will let me learn a lot
Love your blog..keep it running..you may visit this site also http://www.anabelsorientalrugs.com/rug-buying-guide/
Thanks for such an awesome web page here. I am a huge fan of Facebook so I am trying to read as much about it as I only can. I just hope that you will keep publishing such nice posts here in the nearest future too.
regulated forex brokers have membership of a regulated financial authority. This requires that their company activities are monitored and that they adhere to a strict set of criteria set out by the regulatory body in order to run their business.
http://www.onlinecheapautoinsurance.net/|new york car insurance >:-) http://www.bestquotesga.com/|car insurance quotes ga %OOO http://www.treatpatternhairloss.com/|propecia eok
http://www.nycarinsurquotes.com/|nj car insurance limgxl http://www.quotesfromtopinsurers.com/|buy auto insurance online wpwet http://www.aboutcarinsurancerates.com/|car insurance jeq http://www.treatpatternhairloss.com/|buy propecia usa vhnsba
http://www.autoinsurers4u.com/|car insurance quotes kofjon http://www.onlinecheapautoinsurance.net/|carinsurance =-D http://www.aboutcarinsurancerates.com/|cheap auto insurance =-)))
http://www.aboutcarinsurancerates.com/|eastwood auto insurance xnlav http://www.bestautoinsurancepolicies.net/|auto insurance stbaj http://www.treatpatternhairloss.com/|buy propecia lowest price 39019
http://www.autoinsurers4u.com/|auto insurance samn http://www.lifeinsuranceshopping.net/|life insurance policy hwe http://www.mylifeinsuranceguide.net/|low cost life insurance mwhwj http://www.aboutcarinsurancerates.com/|car insurance %-]]]
Very significant article for us ,I think the representation of this article is actually superb one. This is my first visit to your site
Thank you very much for this usefull information! I really understand the topic now!thank you……..
Certainly a fantastic piece of work ... It has relevant information. Thanks for posting this. Your blog is so interesting and very informative.Thanks sharing. Definitely a great piece of work Thanks for your work.
Wow, nice post,there are many person searching about that now they will find enough resources by your post.Thank you for sharing to us.Please one more post about that..
Wow, thats amazing.I love the way you write. Do you provide an RSS feed?
Yes, the post is very interesting and I really like.
You have done really nice job. There are many people searching about that now they will find enough sources by your tips.
You provided a valuable service to the community. Thank you for doing such a great job all these years.
http://www.msgvarsitysummerstars.com/|affordable car insurance 900 http://mybestonlinecollege.net/|online college wboau http://www.lowestdrugprices.net/|cialis 87536
http://www.edmedicationguide.com/|cialis levitra vs 3361 http://www.onlinemedsshop.net/|cialis viagra exs http://www.alexandrubitca.com/|carinsurance =-DDD http://www.genericdrugonline.net/|cialis generic
O
http://www.besttreatmentfored.com/|best buy generic viagra 053 http://www.getyourquotesonline.com/|discount auto insurance =]] http://compareonlineclasses.com/|online classes :-]
http://wycogreencorridor.org/|cheap california auto insurance sjv http://www.distancelearningprojects.com/|distance learning 3710 http://www.edbestmeds.com/|cialis %-D http://www.clemsondsp.org/|free car insurance quotes >:-(((
http://www.insureyourcaronline.com/|discount auto insurance bswfp http://www.carinsurquote.net/|buy car insurance online mbowxm http://www.locatemedsonline.com/|viagra >:-(
http://www.bestcarinsurrates.com/|nj car insurance =[ http://mybestonlinecollege.net/|college online degrees %]]] http://www.chooseonlinecolleges.com/|online colleges 599
http://www.swuse.com/|buy cialis online 8PP http://www.lowestdrugprices.net/|buy cialis =PP http://www.childrensheartcircle.com/|viagra online vuzoe http://www.mdicamentsenligne.fr/|Cialis en ligne 7435
http://www.pricesforedmeds.com/|cheap levitra online vardenafil >
http://www.insurcomparisonservice.com/|car insurance quotes 8] http://www.findbestinsurquotes.com/|auto insurance quotes 517 http://www.topinsurdealsonline.com/|car insurance quotes houqac http://www.listofcarquotes.com/|new york car insurance urwr
http://www.stuartmckeown.com/|state auto insurance zrxer http://www.edpricelist.com/|viagra >:] http://www.locatemedsonline.com/|viagra 04329 http://www.mallettsbaymarina.com/|free car insurance quotes 474971 http://www.findbestinsurquotes.com/|car insurance in florida
http://www.shopforedtabs.com/|viagra :]