how to add iframe to facebook fan page?
how to add iframe to facebook fan page?
Recently Facebook announced 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. they are strongly encouraging developers to move to using iframe rather than FBML.
“iframes are allowed on both Page tabs and Canvas pages without require an activation to load them”
An iframe application allow you to embed an external Web page in facebook fan page(note:1.web pages are not hosted on Facebook 2. can use HTML, CSS,php, JavaScript,jquery,etc like any other Web page does. 3.Interactions with Facebook content are done using the Facebook Software Development Kits and XFBML tags)
how to add iframe Application to facebook fan page
STEP 1:On your Web server, create a directory for your Iframe application (eg.http://howto-how.com/directory name).
STEP 2:Create your html file.
You will want to set the main Outer container DIV for your content to 520 pixels wide. following are the basic example :
<!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; }
#Outercontainer{width:520px;}</style>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<div id="Outercontainer">
<p>small example for facebook application</p>
</div>
</body>
</html>
STEP 3: Configure Facebook Developer Application (They may ask some verifications , do necessary verifications).
To do that, log in to Facebook and then visit the URL http://facebook.com/developers
If you are using first time the Developer Application, you will see the Request for Permission dialog show below:-
Facebook developer application
Click the Allow to proceed.
STEP 4:After configured Developer App installed, click on the Set up New App button.
How to Setup new facebook iframe app
Give your application name and click the Agree, then click the Create App .
create-facebook-application
Enter the security phrase and then go forward
Enter the security phrase and then click Submit.
Fill up following form.
facebook-application-form
Go to Facebook Integration Tab
facebook_integration
In the Canvas section, enter the URL for the location on your server where you are storing your iframe application files.
facebook_iframe_form
STEP 5:After saving you will directed to following page,and then click on application profile page
application-profile-page
Click on add to my page link
Facebook: add to my page link
A dialog box 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 newiframe application should now appear on your Fan Page.
Iframe-on-fan-page
how to change the height of a facebook iframe application
Copy the following code and past it in your index page
<body onLoad=”FB.Canvas.setSize({width: 520, height: 1500})” style=”overflow:hidden”>
<Div id=”fb-root”></div>
<Script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<Script type=”text/javascript”>
FB.init(
{
appId: FB_APP_ID,
Status: true,
Cookie: true,
Xfbml: true
});
window.fbAsyncInit = function().
{
fb.canvas.setautoresize();
}
</Script>
hey ,how can i add facebook reveal tab in ifame?