Example of facebook iframe app using graph-API calls through php-sdk
Important notice! This post is probably outdated and my examples don't work due lack of "https".
This works now with PHP SDK (v.3.0.0) and up. I have changed this post after initial publish.
This is simple example of facebook iframe application which is not using FBML and it has link to authorise and gain access to "publish_stream" permission. It demonstrates how to use new php-sdk library and graph API for that. I was pretty much puzzled at first, because there was many ways and apis to achieve this.
Documentation and examples are confusing at moment to get started with apps. Especially when it comes to iframe app which has to ask permissions to access user data. Confusion is even greater because there is old way and the new way to do it. I wasted many hours to figure things out and get this basic sample working. Therefor I share this example and hope it saves hours for them who are also lost in documentation and examples.
Check it out
This app is published in facebook at moment. Feel free to check it out before trying it. Or download the source code right away. It is also aivable at github.
Some screenshots
If user has not logged in or not given any permissions for app, it will show
following contents. You could do automatic redirection, but I find this kind of approach much more user friendly
because it can see (if presented) upfront what value this app promises.
After clicking allow link, it will direct user to permission request dialog.
Notice the target parameter in that link. If it is not set "_top" it will show one extra (blank) FB page which is confusing.
After allowing this app, it will redirect back to previous page and this time we can do some interesting stuff.
Like posting post on user's wall and accessing friends list. Of course there is much more you can do.
Set it up
So you want to try this out and start developing your own cool facebook application based on this. Here is quick step-by-step walk trough.
2. Unzip contents into your web server. e.g: http://www.example.eu/fb-app-test/ where index would be accessed eg: http://www.example.eu/fb-app-test/index.php
3. Download latest 'facebook.php' (php-sdk) from github and place it next to index.php and config.php
4. Go to Facebook developers app - allow access if needed
5. Find the "Create new app" button on the top and click it
6. Fill in essential information form and click "Continue" button.
7. After creating app you should be in editing view. Find submenu canvas settings in "On facebook" menu on the right side
8. Set Canvas Page to whatever you like. It will be your application's URL at facebook
9. Set Canvas URL. This must point to URL where you unpacked package at second step, without the index.php. e.g: http://www.example.eu/fb-app-test/
10. Set Canvas type to Iframe
11. Fill in config.php which variables should be pretty much self explanatory. Values can be found here after clicking on your app.
12. Save and you should be done. Go have a test-drive by entering newly created FB canvas url into browser.
UPDATES
There has been some changes in facebook after writing this post. My example didn't work (2011 april) but when I enabled "OAuth 2.0 for Canvas" in advenced tab, it started to work again. 2011 july edited my app to work with latest PHP SDK (v.3.0.0) (and up)
Categories:
Facebook
- Programming
It is called iframe app because it runs inside facebook page trough iframe.
Its not working, Its not getting session becasue when i click on "Allow this app to interact with my profile" nothing happen it shows again this message instead of form. and i dont see any allow fb login box
url is http://apps.facebook.com/hassanfawad/
I got this error in facebook.php file:
Fatal error: Uncaught exception 'Exception' with message 'Facebook needs the JSON PHP extension.' in /var/www/vhosts/traffup.net/httpdocs/facebook/app/facebook.php:23 Stack trace: #0 /var/www/vhosts/traffup.net/httpdocs/facebook/app/index.php(8): require() #1 {main} thrown in /var/www/vhosts/traffup.net/httpdocs/facebook/app/facebook.php on line 23
Your servers PHP installation needs JSON extensions in order to get Facebook PHP-SDK to work. It's not SDK issue.
have a great day!
bye
$user = $facebook->getUser();
if ($user) {
try {
// Proceed knowing you have a logged in user who's authenticated.
$user_profile = $facebook->api('/me');
} catch (FacebookApiException $e) {
error_log($e);
$user = null;
}
}
"an error occurred, try later"
After the user clicks "Allow" the web browser is redirected to http://my-site/my-fb-site and not to http://apps.facebook.com/my-fb-site
What can I do? I'm using your latest version.
Made minor correction. Should be fine now.
Now the redirection is fine but when the web browser is redirected to http://apps.facebook.com/my-fb-site the "$user" variable is zero.
$user = $facebook->getUser();
echo $user;
// 0
$user = 0
I can't seem to get your code to work...
I keep being redirected to the page with the 2 links and the text. No code in the URL either..
I guess i'm making the same mistake as Hassan, a little further up, but his question was never answered... :(
-Mo
Have you tried using FBML tags? I want to use tags like fb:friend-selector, fb:name, fb:dialog etc...
Thanks. But I have not used FBML tags somewhere yet.
1. Paste this code just after your <body> tag:
<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 : '<?php echo $fb_app_id; ?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
2. Wrap your fbml tag inside a fb:serverfbml block as follows (using friend-selector as an example):
<fb:serverFbml style="width:195px;height:17px;">
<script type="text/fbml">
<fb:fbml>
Choose a Friend: <fb:friend-selector />
</fb:fbml>
</script>
</fb:serverFbml>
That's it. You will see the ajax loading animation and the fbml tag will render in a few seconds :-)
when click the ,
Allow this app to interact with my profile
it is reloaded the same page... not apps open
what i put in action=""
i used pretti the same code as you for my app (and tested also with ecactely the same as you)
now my problem is: i get this: $user = $facebook->getUser(); fine.
But then i try:
if ($user) {
//get user data
try {
$userData = $facebook->api('/me');
} catch (FacebookApiException $e) {
echo $e;
}
}
this doesnt work since a few days, i alwas get the "echo $e" wich is: OAuthException: (#5) Unauthorized source IP address
(and logically the $userData dosnt get filled with data)
do you know what the problem is and how i can fix it?
thanks already for your help
I choose some users as testers or insight users, but when they accept the permissions, they receive this error in their URL:
?error_reason=user_denied&error=access_denied&error_description=The+user+denied+your+request.&state=eyJyIjoiaHR0cDovL2FwcHMuZmFjZWJvb2suY29tL25pdmVhdGVzdGVydCJ9
I myself only can use of the application
Please help me to solve this problem
Thank You, Regards
In my sample I have not covered this yet.
I want add some permissions but I don't where can I do that in your file index.php (read the location and hometown's user)
Thanks
From a particular webpage, I would like to offer users to log in with their facebook account. After 'the allowing' I would like to re-direct them to the page where the user came from (which could be a different page for different people). Is this possible?
Hope you know if this possible or not!
Thnx,
When I accept the application it come back to my web site:
http://www.mysite.com/facebook/test/#_
You can see the #_ chars? why?
ty
Hey! i have a question! i will show my oauth dialog via iframe in php. i will use fancybox.What parameters do I have to. What should I do? thanks
Posting to my own wall with the application doesn't work either... :-(
Hope to make it!
Thank you all
That seems like a nice post. I am stuck as the app is not able to proceed further in base_facebook.php and gets caught at curl exception. Would be great if you could temme how to fix it?
Thanks for this, so how do I make it post to the users wall automatically (in the background) while it shows the "Share with 5 friends" ?
Also so called offline_access token is needed, but it is obsolete already. New solution is somewhat different and I have not investigate it.
You could check out my other articles about FB http://eagerfish.eu/category/facebook/page/1
please considere update the same
thanks..
Thanks
I have some input from my side.
Along with things done abov we also need to include base_facebook.php file from PHP_SDK.
Because facebook.php file somewhere references this file.
Thank You for your post.
when i try to post my 600 member it give me this error
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.
Apache Server at wa3y.net Port 80
;)
Thanks
Mario
(p.s. let me know when you will do, i will appreciate it very very much)
:D