FB.Connect.showPermissionDialog

facebookpermissions

If your facebook iframe applications need extra permissions granted, you can use Facebook JavaScript Api to generate modal window over your content to request permissions from users. For this purpose I created a simple FB_test_perm() function. It takes 4 arguments:

facebook_permission_test.js

function FB_test_perm(api_key, xd_receiver, permission, callback)
{
	FB.Bootstrap.requireFeatures(["Connect"], function()
	{ 
		FB.Facebook.init(api_key, xd_receiver);
		FB.Connect.requireSession(function()
		{
			FB.Facebook.apiClient.users_hasAppPermission(permission, function(result) 
			{
				if (result != 0) 
					return callback(true);

				FB.Connect.showPermissionDialog(permission, function(result)
				{
					return callback(result == null ? false : (result.indexOf(permission) != -1));
				}, true, null);
			});
		});
	});
}

index.html

<html>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script src="facebook_permission_test.js" type="text/javascript"></script>
<script type="text/javascript">
	function FB_perm_result(value){
		alert(value ? "granted" : "not granted");
	}
	FB_test_perm("***", "xd_receiver.htm", "publish_stream", FB_perm_result);
</script>
<!-- Note: Include this div markup as a workaround for a known bug in this release on IE where you may get a "operation aborted" error --> 
<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div> 
</body>
</html>

xd_receiver.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Cross-Domain Receiver Page</title>
</head>
<body>
    <script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?v2" type="text/javascript"></script>
</body>
</html>

If you can not get your facebook showPermissionDialog popup opened, make sure you set Canvas Callback URL, Connect URL, Base domain, Connect Preview URL correctly:

Clipboard01

Make sure you embed flash in transparent / opaque wmode and iframe size (width, height) is enough to display facebook modal window.

25 comments so far

  1. doc October 22, 2009 21:36

    can’t seem to get it to work when it’s an iframe. if i open the iframe in a new window… then the button works. but it not, it won’t. makes me think the whole “set the urls part” has been done incorrectly.

  2. Jozef Chúťka October 22, 2009 21:57

    well, it works for me, make sure your iframe height is enough

  3. Marcos November 9, 2009 19:19

    Great resource!
    Very useful! Thanks for sharing it!

  4. David November 11, 2009 07:58

    Thanks – I could not get anything to work for the permissions and this finally did it! Thank you!

  5. Saltymule December 11, 2009 06:21

    Finding the sentence “make sure you set Canvas Callback URL, Connect URL, Base domain, Connect Preview URL correctly” made my day!

  6. Dennis Field December 15, 2009 22:25

    Thank you so much. I was really hitting a wall with this. Much appreciated.

  7. Suma Gowda December 16, 2009 00:30

    This was a great help. Thanks 🙂

  8. rick January 10, 2010 10:22

    Please, could you show the sample actionscript to call this?

  9. Jozef Chúťka January 10, 2010 21:26

    hi rick, to call javascript function from actionscript, use ExternalInterface class.
    read more here:
    http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/external/ExternalInterface.html
    sample here:
    http://blog.yoz.sk/2009/10/flex-iframe-web-browser-in-flash/

  10. John Nagle January 11, 2010 04:20

    Hi,

    This is very useful, thanks. But a question…of most of the flash games I’ve played, I don’t recall having to explicitly give them permission to post stories to my wall. When a user installs an application, the default setting is already to allow this…why is this extra step necessary?

    Thanks,
    John

  11. Jozef Chúťka January 11, 2010 10:41

    hi John,
    there is more different types of permissions user can grant to your app, read more about it here:
    http://wiki.developers.facebook.com/index.php/Extended_permissions
    for example I use publish_stream permission when I need my app to upload a photo into an album and make the album and each photo automatically public (without user confirmation for each photo / album)

  12. Fabio February 5, 2010 20:37

    Great post!! Thanks. It perfectly works

  13. Brad February 9, 2010 10:46

    Well, my problem is for testing my iFrame app, I use a dynamic IP address for Canvas Callback URL, which works fine. But facebook setting page won’t let me use an IP address for Connect URL. Therefore, when I call showPermissionDialog, facebook callback is made to my real site domain and not the IP I’m testing on and I don’t get the response back. Is there anyway to point facebook respnse to a test IP address instead of site base URL?

  14. Jozef Chúťka February 9, 2010 11:13

    Hi Brad, I am also having difficulties with testing applications before launch. Is the ip you are trying to use public one? If public and facebook just won’t let you do that, try create some testing domain, or just map your ip to subdomain (via dns)

  15. Miha February 9, 2010 15:29

    Hi!

    Thanks, article helped a lot!

  16. Aykut March 10, 2010 10:57

    Hi,

    This is article helped me a lot so thanks. But I found one more detail here. The permission dialog sometimes don’t show up because firebug is enabled in FF.
    I’m using FF 3.5.8, Firebug 1.5.2, OS Win Xp SP3

  17. wirelezz March 14, 2010 09:49

    HEY very nice… now a little question:

    I used this useful tutorial to gain access of offline_access and stream_publish, but I would like to know HOW DO I SAVE THE SESSION KEY?

    I’m sorry I’m kinda newb on javascript, I would like to know how can I save on a MySQL database. Maybe redirecting the page to a php site and do the magic with the sessions keys

    thank you in advance

  18. Jozef Chúťka March 14, 2010 10:41

    Hi wirelezz, thanx for your comment
    In case when user already allowed your application, your iframe receives fb_sig_session_key as an request GET parameter. That is accesible via javascript (client side) or any backend (php…), so it is pretty straight how to use it, but I wonder why would someone do that. fb_sig_session_key is not meant to be used as identificator
    http://wiki.developers.facebook.com/index.php/Authorizing_Applications#Parameters_Passed_to_Your_Application
    http://forum.developers.facebook.com/viewtopic.php?pid=41894

  19. Chris March 21, 2010 14:25

    Thanks heaps! Great info – it saved me a lot of time.

  20. Fernando June 21, 2010 02:57

    I have used successfully your code. However, I have a problem when I try to get the permits for email. Do you know how to solve this?

    thanks in advance

  21. Jozef Chúťka June 21, 2010 11:41

    Hi Fernando,
    in facebook developer / your app / migration / set New Data Permissions = Enabled, now you may use any permissions from:
    http://developers.facebook.com/docs/authentication/permissions

  22. Ian Ferd July 21, 2010 11:32

    I’m just wondering, is there any way to request multiple permissions
    like “read_stream, publish_stream, upload_photo”. thanks

  23. Jozef Chúťka July 21, 2010 11:46

    @Ian, it is possible read http://developers.facebook.com/docs/reference/oldjavascript/FB.Connect.showPermissionDialog … but this is a part of old JavaScript API that may become obsolete soon

  24. Alina July 23, 2010 09:26

    hi all,

    its a useful thing but i am unable to get email permission popup on my game iframe. I am new to the facebook api. I have an iframe in which i embed my swf file of game. I need to get email permission from user and i am unable to get this popup. In my index.php file I have the iframe in which my game is loaded. and this swf file is embedded in another page index2.php. I load this index2.php in that iframe. where should i write this js code? in index.php or in index2.php? I have tried it in index2.php but its not working. I will appreciate your help in this regard.

    thanks

  25. Jozef Chúťka July 23, 2010 13:42

    @Alina, facebook has introduced new permissions since this article. Read more here http://developers.facebook.com/docs/authentication/permissions . This article has been published 9 months ago. Its like an dinosaur with all the everyday facebook api changes… however I recomend to require all permissions with application authentication

Leave a comment

Please be polite and on topic. Your e-mail will never be published.