What is an iFrame application?
An iFrame application you allows you to embed an external Web page in
your custom Facebook Page tab.
Because this iframed page isn’t hosted on Facebook,
it 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.
(In this article, the Facebook SDK is not required.)
1.Setting up your server
Facebook’s HTTPS / Secure Hosting Requirement
The first thing to know is that wherever you host the index page of your
Facebook iFrame application, the server will have to be secure, i.e.,
have an SSL Security Certificate for the domain under which it’s hosted.
The first thing to know is that wherever you host the index page of your
Facebook iFrame application, the server will have to be secure, i.e.,
have an SSL Security Certificate for the domain under which it’s hosted.
If your index page is not hosted on an SSL secure URL, or you
don’t specify a Secure URL in your app settings, your tab will not
display for those using Facebook under Secure Browsing. Instead, the
user will see:
Read our article on Facebook Page , and Iframe tabs
The other assets called into your page (images, JavaScript, CSS,
video, etc.) will also have to be hosted under HTTPS. You can see in Facebook HTTPS article. how make secure protocol
2.Create your iFrame application
On your secure Web server, create a directory for your iFrame
application. In this example,example in server create a new directory
called “facebook” and then a subdirectory called “myIframe”. The file
path will look something like this in your FTP program:
://httpdocs/facebook/myiframe
You will want to put all of your files (HTML, CSS, Javascript, PHP,
etc) in the “myiframe” folder or its subdirectories.
3.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>
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.
4. creating an application in Facebokinstall the Facebook Developer application.
Click the Allow button to proceed.
5. click on the Create
New App button.
your application name in “App Display Name”
and your name in “Namespace”
(for use with Open Graph — 8-character minimum;
alpha, dashes and underscores only — keep trying until you get a
Namespace that hasn’t been used).
tick the “I agree to Facebook
Platform Policies” ;click the Continue button.
On the next screen, enter the security phrase and then click Submit.
6.The Settings Tab
you’ll see the App ID and App Secret values.
most
frequently you’ll be using your App ID to integrate with Facebook.
notice the “edit icon” below the App Secret.
for note :The dimensions 16 x 16
pixels.
If you don’t create your own icon, your tab will have a generic
Facebook-tab icon: 
Basic info:
- App Display Name: Make this the same as the original value you provided;
- App Namespace: Make this the same as the original value you provided;
- Contact Email: Where you want Facebook to send emails regarding your app;
- App Domain: just put “mydomain.com” where “mydomain.com” is your secure hosting server;
- Category: Select a category from the pulldown list.
but in this article it is not include cloud service
8.Select how your app integrates with Facebook
An explaination of the Facebook-integration values
select “Page Tab” from
the various integration options.
- Page Tab Name: The displayed name of the tab in the Page navigation;
- Page Tab URL: The unsecure URL (HTTP) of your index page if the index page is named either “index.html” or “index.php” you can just put the directory with a trailing forward slash (as in my example above); OR you can specify a file name in the directory, eg myapp.html or myapp.php;
- Secure Page Tab URL: Same as the “Page Tab URL” but with HTTPS instead of HTTP;
- Page Tab Edit URL: You can create any URL at your domain here and then set up that URL to redirect to the Edit Page for the Facebook tab. This is commonly done using a 301 or 302 Redirect. I’m not covering 301/302 redirects in this tutorial;
9. If you want to use calls to the Facebook JavaScript
SDK on your tab – Add “App on Facebook” values
Facebook JavaScript SDK
in your Page Tab for example,
you will also need
to select the “App on Facebook” integration, and add the same URL values
as for “Page Tab”:
NOTE: The “App on Facebook”
URL MUST be a directory, not a specific file:
http://www.myDomain.com/facebook/myiframe/
NOT
http://www.myDomain.com/facebook/mytestapp/mycanvaspage.php
you’ll need to
use “index.html”, “index.htm” or “index.php” for the file name of your
canvas page.
The “Canvas Page” value is autofilled by Facebook, with your
Namespace value.
Click “Save Changes” and done!
10.Installing your iFrame application on your Fan Page
If your App is only to add a Page Tab to your Facebook Page, and not
an App that you want to make available to multiple pages, you can simply
navigate to this URL in your browser:
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
Replace “YOUR_APP_ID” with your App ID and “YOUR_URL” with your App’s
Canvas URL, both of which values are available in your app settings.
- Tab: If it says “Available (add)”, click “add” to add it to your navigation; if it says “Added (remove)”, you’re set;
- Custom Tab Name: You can override the default tab name by entering a new name in this field, up to 32 characters, and then clicking “Save”.
Click “Okay” to save.
11.Troubleshooting
Check your URLs!
Error messages from your server (error 405 – HTTP verb or similar)
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.
API Error Code: 191 Popup Dialog
when using an embedded
Share Button or other feature that requires the Facebook JavaScript SDK,
it’s may be because you haven’t specified the “App on Facebook” URLs.
Scroll Bars – Getting rid of them!
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.
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>
0 komentar:
Post a Comment
thank your for your comment