Once upon a time there were some FBML/FBJS terms used to develop facebook page application. That time you had to learn fbml and fbjs to make simple page application. But the good news is someday ago facebook added iframe support in page application. So facebook page application development now become much easier than ever.
I named this tutorial iSimple, because in this tutorial I’ll teach you how easily you could setup a facebook page application, add in your page, customize your code to make nice app. This is the first part of my 2 parts series tutorial, in the next part I’ll show you more advance techniques to get user’s data via facebook API.
So in this tutorial I’ll explain:
- Simple iframe app setup for facebook page
- Basic php files structure setup
- How to use jQuery javascript library in the app
- How to use facebook’s social plugins
- iframe size changing using javascript code
- Invite Request Box
- Stream Publish in your wall
- Ajax page loading
- How to add application in facebook page
Before proceeding:
Recommended Reading
1. Simple iframe app setup for facebook page
Visit developer application and setup a new app. Give a name to your application and then click Facebook Integration. Now fill the red color selected area. Canvas URL is very important so carefully select your server’s path where you will keep the files. Don’t forget to give a trailing slash ‘/’ in Canvas URL. In the example, I give the name iSimple as tab name. At last click Save Changes.
2. Basic php files structure setup
After download my codes, extract the zip and upload all the files in your application directory. There are total 5 files
- index.php is the main file that will load when user click the tab application. It should contains all types of php and business logic.
- config.php file contains facebook application settings and some more
- home.php, template.php and other.php are template or ui files.
config.php – After uploading my codes, copy your facebook application’s app id, api key and secret key here. And also set the baseUrl, appBaseUrl, pageUrl and appPageUrl.
$fbconfig['appid' ] = "";
$fbconfig['api'] = "";
$fbconfig['secret'] = "";
$fbconfig['baseUrl'] = ""; //"http://thinkdiff.net/demo/newfbconnect1/iframe/isimple";
$fbconfig['appBaseUrl'] = ""; //"http://apps.facebook.com/thinkdiffdemotwo/";
$fbconfig['pageUrl'] = ""; //"http://www.facebook.com/thinkdiff.net";
$fbconfig['appPageUrl'] = "{$fbconfig['pageUrl']}?sk=app_{$fbconfig['appid' ]}";
index.php – this file first includes the config.php and named the inner page is ‘home.php’. Then it loads the template.php file. If you write any business or data related php code, write that above the 2nd line.
include_once "config.php";
$page = "home.php";
include_once "template.php";
template.php – this is the main front end file. Within it all other page should load.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>iSimple - Graph API & Iframe base Facebook Page App Development | Thinkdiff.net</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
a{
text-decoration: none;
color: blue;
}
a:hover{
text-decoration: underline;
color: olive;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#tabs").tabs();
jQuery("#invite").bind('click', invite);
jQuery("#other").bind('click', other);
});
function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
FB.ui(
{
method: 'stream.publish',
message: '',
attachment: {
name: name,
caption: '',
description: (description),
href: hrefLink
},
action_links: [
{ text: hrefTitle, href: hrefLink }
],
user_prompt_message: userPrompt
},
function(response) {
});
}
function publishStream(){
streamPublish("Stream Publish", 'Thinkdiff.net is again awesome. I just learned how to develop Iframe base facebook page application development. ', 'Checkout the Tutorial', 'http://thinkdiff.net', "Demo Facebook Application Tutorial");
}
function increaseIframeSize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
function invite(){
FB.ui({ method: 'apprequests',
message: 'come on man checkout my application. visit http://thinkdiff.net'});
return false;
}
function other(){
jQuery("#pageload").load('other.php');
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : '<?=$fbconfig['appid']?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<?php echo $tutorialLink; ?>
<br /><br />
<a href="<?=$fbconfig['appPageUrl']?>" target="_top">Home</a> |
<a id="invite" href="#">Invite</a> |
<a id="other" href="#">Other Iframe</a>
<br /><br />
<div id="pageload">
<?php
if (isset($page)) {
include_once $page;
}
?>
</div>
</body>
</html>
home.php -inner page of template.php. We are using 2 page, home and other both of this inner pages are loading within template.
<style type="text/css">
#tabs ul li{
font-size: 80%;
}
#tabs pre{
font-size: 138%;
}
#tabs{
font-size: 70%;
}
#tabs div a{
color: blue;
}
</style>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Tab A</span></a></li>
<li><a href="#fragment-3"><span>Stream Publish</span></a></li>
</ul>
<div id="fragment-1">
<a href="#" onclick="increaseIframeSize(300, 500); return false;">Click Here Iframe width=300,height=500</a>
<br />
<a href="#" onclick="increaseIframeSize(500, 1800); return false;">Click Here Iframe width=500,height=1800</a>
<br />
<strong>Aishwarya Krishnaraj Rai </strong>
<br />
<strong>Nickname</strong>
<br />
Ash
Gullu
The Queen of Bollywood
<br />
<strong>
Height
</strong>
<br />
5' 7" (1.70 m)
<br />
<br />
<strong>
Mini Biography
</strong>
<br />
Born into a traditional south Indian family, Aishwarya started modeling at a young age. This green-blue-eyed beauty appeared in advertisements for many prestigious firms; the ones that brought her into the limelight were the garden sari and the Pepsi ad. Crowned Miss India 1994 runner-up, she was a hot favorite in the run for miss world title, which she won, her beauty and charm made her India's darling. Ash stormed into the Indian movie industry, where she has proven herself a brilliant & genuine actress.
<img src="http://www.elsaelsa.com/wp-content/uploads/2009/08/aishwarya_rai.jpg" alt="Aishwarya Rai" />
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=<?=$fbconfig['appid']?>&xfbml=1"></script><fb:comments xid="aiwsh" numposts="10" width="425" publish_feed="true"></fb:comments>
</div>
<div id="fragment-3">
<a href="#" onclick="publishStream(); return false;">Click here and see the publish prompt</a>
</div>
</div>
other.php -other page that will load a site in iframe
<iframe src="http://thinkdiff.net" height="700" width="470" ></iframe>
3. How to use jQuery javascript library in the app
In template.php you’ll see, in the head tag jQuery library is loading.
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
And in template.php line number 20 you’ll see, jQuery functions are calling. You’ll see all the javascript functions are written in template.php
jQuery(document).ready(function () {
jQuery("#tabs").tabs();
jQuery("#invite").bind('click', invite);
jQuery("#other").bind('click', other);
});
4. How to use facebook’s social plugins
In the demo I’m using facebook comment plugin. You can generate comment plugin code from here
In home.php line number 49 you’ll see the code for this plugin. Please keep in mind that, if you already loaded the facebook javascript sdk then you need to just use the xfbml code. As in template.php we already loaded the javascript sdk so we are using only the xfbml parts here.
<fb:comments xid="aiwsh" numposts="10" width="425" publish_feed="true"></fb:comments>
But if you don’t load the javascript sdk then the code will look like
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=<?=$fbconfig['appid']?>&xfbml=1"></script><fb:comments xid="aiwsh" numposts="10" width="425" publish_feed="true"></fb:comments>
Where dynamically replace the appId from config.php .
appId=<?=$fbconfig['appid']?>
You can also generate other plugins code and use like it.
5. iframe size changing using javascript code
To call facebook javascript library function, we will first load the library. In template.php line number 68 you’ll see
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : '<?=$fbconfig['appid']?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
Facebook javascript library is loading here. This is mandatory to parse XFBML codes or to call facebook javascript api.
In template.php line number 49, you’ll see a function. This is used to dynamically change iframe size.
function increaseIframeSize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
This function is called in home.php line number 21
<a href="#" onclick="increaseIframeSize(300, 500); return false;">Click Here Iframe width=300,height=500</a>
<br />
<a href="#" onclick="increaseIframeSize(500, 1800); return false;">Click Here Iframe width=500,height=1800</a>
<br />
6. Invite Request Box
Now you can send request easily from application.
function invite(){
FB.ui({ method: 'apprequests',
message: 'come on man checkout my application. visit http://thinkdiff.net'});
return false;
}
This function is assigned to id=”invite” at line number 22 in template.php.
jQuery("#invite").bind('click', invite);
7. Stream Publish in your wall
Stream publish is very important feature for any type of facebook application. In template.php line number 26 I defined the function
function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
FB.ui(
{
method: 'stream.publish',
message: '',
attachment: {
name: name,
caption: '',
description: (description),
href: hrefLink
},
action_links: [
{ text: hrefTitle, href: hrefLink }
],
user_prompt_message: userPrompt
},
function(response) {
});
}
This function is called from home.php line number 52.
<a href="#" onclick="publishStream(); return false;">Click here and see the publish prompt</a>
8. Ajax page loading
jQuery minimizes ajax functionality by providing some simple functions.
In template.php 62 number line you’ll see
function other(){
jQuery("#pageload").load('other.php');
}
And this function is assigned to a anchor id=other in 23 number line in template.php
jQuery("#other").bind('click', other);
9. How to add application in facebook page
So finally you learned the basic coding structure of facebook page app. Now when you want to add the application in your page just visit the application’s about page and in the lower left side you’ll see below links. Then click Add to my page and select your page to add the app. Now visit your page and click the tab name, in my case iSimple.
I hope this tutorial will help you to use the facebook’s latest feature, iframe support in page application. In my next tutorial I’ll describe some more advance features like:
- fan detection
- facebook’s php official sdk loading and how to use
- graph api usage
- and more
Here is the 2nd part of the series. iAdvance – Graph API & Iframe base facebook page application development
thanks mahmud bahi.
Great as usual. Thank you so much buddy
Thanks Mahmud.
Comprehensive as per usual.
A great addition to your Application tutorial and very timely indeed
Good job!
In the template.php (line 66-67) ready add
I have a question about when add the facebook’s social plugins, need to add the “div” and “js” again (home.php line 49) ?
Thanks Ilex for noticing it. Yeah you don’t need to use the div and js again if you already load the facebook javascript sdk. And in the demo as we already loaded the javascript sdk, we can skip the div and js part in the plugin. So just use
And I’m updating the post.
How can i remove the permission prompt while using Java script SDK for fangating in
face book,I am using the below code,it shows the permission box,i want to remove
that, any insights ?
Below is my code
FB.init({appId: ‘myappid’, status: true, cookie: true, xfbml: true});
//FB login check
FB.login(function(response) {
if (response.session) {
var user_id = response.session.uid;
var page_id = “117058896692″;
var fql_query =
“SELECT uid FROM page_fan WHERE page_id = “+page_id+”and uid=”+user_id;
var the_query = FB.Data.query(fql_query);
the_query.wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
$(“#container_like”).show();
$(“#container_notlike”).hide();
} else {
$(“#container_notlike”).show();
}
});
} else {
// user is not logged in
}
});
Simply amazing the help you give to the community,
1,000,000 thanks to you, over and over again!.
Glad you like it. Thank You.
In div or iframe i want to open facebook wall of company by using only javascript. I tried with iframe but it does not directly open the wall in iframe, rather on iframe facebook logo is displaying and while clicking on it the wall is opening, i want it directly to open it..
Please help me, its very urgent..
Thanks a lot for this tutorial!
However, when I try to display it in a facebook page, I have this error:
“App temporarily unavailable
Parse errors:
FBML Error (line 67): illegal tag “body” under “fb:tab-position”
Runtime errors:
Cannot allow external script”
But if I remove the element, nothing is formated…
Any idea?
Check your facebook application setting, make it iframe not fbml in the page tab type setting.
Hi mahmud,
Thanks for your reply. All settings are already set to iframe. That’s why I don’t understand this FBML Error…
i have been having the same problem and no solution yet. have u been able to fix it?
@robin, @marek: maybe you can try to upgrade your page.
@marek: Still not fixed…
@marek: What do you mean by “upgrade”? I cannot find this option in settings.
not in the settings. just upgrade your page into the new layout here:
http://www.facebook.com/pages/status/
Perfect! Many thanks Harrynov, it works now!!
Thank You harrynov for your useful solution
Hi. just have a question about if it is possible to allow the app to add itself to a fan page/ welcome page?
I’m surprised to hear your question. My example of this tutorial is in fanpage.
Mahmud, you have explained one of the most essential techniques for the newly introduced Fan pages. Great job, man! Keep up the good work!!
Mahmud,
With the comments plugin, when it posts to my wall the data is all linked to my ‘baseUrl’ and won’t link back to my appPageUrl.
I’ve used the returnurl in the fb:comments, but no love.
Any ideas??
I figured it out!
http://www.facebook.com/pages/The-Fan-Page-iFrame-Diva/193175194040411#!/note.php?note_id=194985040526093&id=193175194040411
How you did it Amelia?
Nm. Got it.
Thank you great work
Hello,
Thank you for your great post. I have followed your tutorial, but I cannot get the comments plugin working, nor the Invite as well. And if I go to your demo page in Facebook I cannot see the comments area there and the invite link gives me an error message as well. What could be the reason? Thank you in advance.
Sometimes if you visit the link directly the app doesn’t load, i don’t know why, so click the iSimple in the page again, then you’ll see the app in page.
Thanks a lot!
i have done my facebook appliction from your help… but i dunno what is this facebook application.. why we are used? i knew the question is stupid, but i want the answer, i dunno where i got the right answer thatsy i asked you, please reply me… thank u
Hi,
I need some help to customize “like” button functionality on an image.
Here is a referece URL where you can see practical example.
http://www.facebook.com/FanPageEngine
When user press “Like FanpageEngine” button the functionality of like is done and the image is changed to “Continue” button.
Can you give me such type of customization.
Thanks
Amir
great tutorial thank you a person like me can do this that means eveyone else can do it easy with your help.
can you please help with Stream Publish on application user’s wall when each time they use the application? without asking them click or prompt for publish?
thank you
Hi!
I created a facebook app using your tutorial, however the AJAX is not working.. Even in your facebook app, the Update Status via AJAX and PHP API is not working. Pls help on how to make this work!
Looking forward for your response asap.
Thank you!:)
Hi Mahmud,
Thank you for the tutorial, it is great.
How do you know the different method options of FB.ui?
I can’t find it in FB documentation.
Thanks,
Mika
Hello,
i am just getting a facebook logo in the iframe. if i click the fb logo i get redirect to the app url. can anybody help please. thanks…
great article. i am running a test app from wamp server. the url is : apps.facebook.com/****
consider the following details :
Canvas Page
http://apps.facebook.com/gamebits/
Canvas URL
http://127.0.0.1/demo/
how do i define the following things in your config.php :
$fbconfig['baseUrl']
$fbconfig['appBaseUrl']
$fbconfig['pageUrl']
hi gamebit07
$fbconfig['baseUrl'] -> is your canvas url;
$fbconfig['appBaseUrl'] -> is your canvas page url
example
$fbconfig['baseUrl'] =http://127.0.0.1/demo/
$fbconfig['appBaseUrl'] =http://apps.facebook.com/gamebits/
$fbconfig['appPageUrl'] = “{$fbconfig['pageUrl']}?sk=app_{$fbconfig['appid' ]}”;
check it
I am getting the same problem as Anna, any one got an idea please? If it makes a difference it’s on a business page rather than a fan page.
@jeremy: use the CANVAS URL as TAB URL instead of the CANVAS PAGE URL…
Bingo! Thank you very much Anna.
hi gamebit07
$fbconfig['baseUrl'] -> is your canvas url;
$fbconfig['appBaseUrl'] -> is your canvas page url
example
$fbconfig['baseUrl'] =http://127.0.0.1/demo/
$fbconfig['appBaseUrl'] =http://apps.facebook.com/gamebits/
$fbconfig['appPageUrl'] = “{$fbconfig['pageUrl']}?sk=app_{$fbconfig['appid' ]}”;
Thanks for tutorial
But i am not getting what to write in
$fbconfig['pageUrl'] = “”; //”";
and how to display this application in fan page i am getting this output
http://outofthebox.in/facebook/cutting_chai_to_pilo/
$fbconfig['appPageUrl'] = “{$fbconfig['pageUrl']}?sk=app_{$fbconfig['appid' ]}”;
check it
Hi, Great tutorial!
In check demo, beside the “iSimple”, the below clickable button “Hyperlink”,”Fangpage Template”,”Comments” these function how to do it in FB.
Before I checked in FB development page is nothing relate content. I saw Nike also used it:http://www.facebook.com/nike
Please help, thank.
I getting FB undefined
add mme publish stream
Hi Mahmud,
I see when you set up this application – your tab URL is apps.facebook.com/blahblah/ – can you tell me how you prevent the BLUE facebook header from appearing in your iframe? – ie your basically loading the canvas page into your iframe? – but in your application on your page, you odn’t see this facebook header?
Hi Mahmud,
Facebook recently updated the FB.UI method where they are now using the “feed” instaed of stream.publish to post on users wall. can you please check the same and tell all of us how it works, since stream.publish falls under OLD REST API which will be soon depricated.
http://developers.facebook.com/docs/reference/javascript/FB.ui/ Check out the link for more details
I put some simple html code up on a page to try to get used to the new way to add tabs and I am having no luck. I get a 405 error. Here is the page with the code: http://www.freedomhair.com/iframetest
Here is the page where the tab should show up: http://www.facebook.com/pages/Silkn-Pro/197123736964881#!/pages/Silkn-Pro/197123736964881?sk=app_172909219434481
When I look at the tab, I get the 405 error. Can you help? Thanks.
first of all, Mahmud, developing for facebook is not an easy task and your tutorial is amazing. great job, realy !
now, i have a bit of a weird problem… when i put my facebook application in a fan page the application doesn’t get any parameters (POST and GET)… this is realy weird because i need the “code” parameter from facebook to get the access token but i just can’t get it in my code even though i can see it in the URL… i print the $_REQUEST, $_GET and $_POST parameters and they are all empty (except for the signed_request parameter)… when i go to the canvas page of the application it works fine…. any help would be greatly appreciated, thanks.
Did you check if a form submit works or not and you can get $_GET or $_POST values from form ?
Mahmud you rock!!! Thanks for all the articles.
I’ve googled a lot and I’d need a bit of help. I have a canvas app. What I need to do is, that the app has to check whether it’s been installed (added) to the page when I click the button (the page is selected from dropdown) and add it to the page automatically if not. I suppose that I do the redirect to http://www.facebook.com/add.php?api_key=XXX&pages=1&page=PageID, What is that api_key? Could you point me somewhere where could I find more details pls? Thanks a lot, much appreciated
Milan
When you create an application you’ll see API Key in the application setting
Got you Mahmud, thanks. And how can I check whether the app has been added to the page pls?
Hello Friends,
i am getting problem while logout to my applcation
using php sdk….
in fbmain.php login and logout code is as per
$loginUrl = $facebook->getLoginUrl(
array(
‘scope’ => ‘email,offline_access,publish_stream,user_birthday,user_location,user_work_history,user_about_me,user_hometown’,'user_likes’,'friends_likes’,
‘redirect_uri’ => $fbconfig['baseurl']
)
);
$logoutUrl = $facebook->getLogoutUrl();
and using this code in index.php
would u plz suggest me some solution
thanks in advance
Mahmud !! Thanks for all the articles. Can you send aspx code for this articles.
I never worked on ASP.
Seems that the notification (after i invite someone) redirects to http://www.facebook.com/4oh4.php and not the fanpage :/
Any help?
Hi,
Is it possible to recommend a page to friends instead of the app itself? So that the URL the friends clicks does go to my page instead of my app page?
Pass the page url within the invite message.
How? Can you give an example?
Visit the app http://www.facebook.com/thinkdiff.net?sk=app_188467014521635 and click invite you’ll see my blog link is provided within the invite message.
Thanks a lot Mahmud for cool article.. Seems you have explored all api’s of FB. Glad I could get to your site.. Its a treasure ..
I have added Like box plugin to my site because of which page load time has increased a lot.. Is there any way I can reduce this load time on page refresh as well as on first time loading?
Thanks in advance,
Rajeshwari
Hi Rajeshwari,
I think there is no way, as the like box load from facebook server. So depends on your network it may take time to load.
How to track User on like..?
hi friend…
How do i hide(or)remove “go tp app” button next to the like button in my facebook page.
Is it possible?, i saw some apps page they only show like button. After likes only, apps will be displayed. but my page, if any user with out like the app they using “Go to App” button and access the applicetion.
how do i fix that problem?
Please help me..
By
Maharajan Ravi.
hello
many thanks for your tutorial,but i have a problem i had a facebook application from past year but when i load it now again the application not load in facebook iframe it redirects me to my server when I enter back button it display in the facebook correctly pleeeease tell me how to solve it urgently
FB.ui({ method: ‘apprequests’,
message: ‘test message.});
When I invoke this method I am getting prompt with friend list and send request button. In notification area “ABC” sent you request in “XYZ” is visible but Message is not visible. What to do?
Error
Sorry, the application you were using is experiencing a problem. Please try again later.
how to solve this error
Hi Bro, Thank for the lovely post i think i spent more than a day on searching resources fro FB application development. here i got lot of stuff which is helpfull to move forward.last thing i have done all setup and configuration but still getting error “API Error Code: 191″ i am new to FB dev so any help will be highly appreciated
Thanks
Hmm, strange. Please check the following page http://forum.developers.facebook.net/viewtopic.php?id=105039 to know if any solution is there.
Hi,
I want to create a facebook fanpage and want to install application on that page,
I have created application successfully but not be able to add it on my fan page so please help me how can I add it on fanpage , previously method of adding on fanpage was quit easy but the new look of facebook change add to page method so please let me know how this will…?
Facebook new version i can’t see the Add to my page in application settings page. I don’t know how to add into my page. please help me.
hi,
Finally i got it, see the documentation:
https://developers.facebook.com/docs/reference/dialogs/add_to_page/
Every once in a while I get a pop up that says “To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier.” I am trying to show the users name, photo, and invite box with friends listed. any ideas??
hey…Demo link not working here.