How to make facebook app authorization popup show in overlay on facebook page - facebook

there is exactly what I saw.
http://www.facebook.com/cocacola?sk=app_192765884109675
I don't know how they did it. I tried fb.ui change the display options. It always just give me a pop up window. so how to do the overlay?
Thanks in advance!

Finally answer is:
All you need ask authorization:
FB.ui({ method: "permissions.request" });
from:
http://www.facebook.com/mypage?sk=app_1234567890
voila: you have popup in iframe.
However from:
http://apps.facebook.com/myapp
you will have popup without iframe

Related

How to customize a Facebook Send Button?

I'm trying to customize the appearance of a facebook 'Send' button.
I generate the button using the code provided in the docs, however I don't have a clue of how I could modify the button's image or text ?
Could anyone give me an example? I guess javascript is my only option here?
My code looks like this right now:
<fb:send href="http://www.mywebsite.com/something"></fb:send>
This generates a button that looks like this:
Thanks!
You cannot customise the <fb:send /> button. However, you can achieve the same functionality using FB.ui (http://developers.facebook.com/docs/reference/javascript/FB.ui/). Use the send method, eg.
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html',
});
You can always create your own link and style it however you wish, then add the link from this list of all social sharing button links list - this works for sharing to all sorts of social sites.
For Facebook's share link, replace [URL] and [TITLE] with your data using urlencode()in the following code in your link's href:
http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
You're pretty much SOL when it comes to customizing these Facebook buttons. They have intentionally designed their buttons so that you can't change or customize them beyond the limited scope provided by Facebook.
Facebook's send button is in an iframe. If you wait for the iframe to load, you can select its contents with $('iframe').contents(). So replacing the text would look like
$(function(){
$('.fb_iframe_widget iframe').on('load', function(){
$(this).contents().find('.pluginButtonLabel').text('Custom Text');
});
});

Facebook dialog content doesn't move window to screen

I'm trying to pop open an apprequests dialog using the following cod:
$("#fbInviteButton").click(function(){
FB.ui({
method: "apprequests",
message: "Test"
};
});
When the button is clicked, a box pops up with the loader and just sits there. In the developer console in Chrome, I can see the ajax request complete and content come back.
When I look at the HTML source, I see the other dialog (class: "fb_dialog fb_dialog_advanced"), with populated content, and when I toggle the CSS for that window:
top: -10000px
the dialog with content comes into view.
So for some reason, when the content is loaded, it doesn't pop into place and replace the loader. Any idea what would cause this?
The application is Ruby on Rails using the Asset Pipeline.
I believe a bug in Facebook's JavaScript SDK causes this problem. I am currently using an older version of SDK taken from here as a workaround.

How can i do smooth scrolling in fluid iframe facebook application?

I have this button:
Top
I'd like to know if is possible to do something like this jquery code does, inside facebook application iframe:
$('#toTop').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});​
Thanks ;)!
EDIT 1 (Following Matthew Johnston Answer):
This is what i mean: http://jsfiddle.net/ajXjg/4/
NOTE: FB.Canvas.scrollTo doesn't work with fluid canvas setting
EDIT 2 (For someone who need [i hope for now]):
The only way is to use anchor link, you don't get smooth scroll :(...and in firefox they don't work!
It doesn't look like this works, I just set it up and it failed to happen. You do have the Facebook Javascript SDK method FB.Canvas.scrollTo which will allow you to scroll to specific locations in an canvas app, however it won't be smooth.

How to display the facebook request dialog inside our app page?

I'm using the facebook request dialog from http://developers.facebook.com/docs/reference/dialogs/requests/ and its working fine.
Now it displays a popup dialog window with the friends of my facebook account.
Now i tried to display the dialog inside my application page itself and i tried to change the display property to 'page' and also 'iframe' and it doesn't seems to be working..
I'm sure that i've initiated the fb using fb:init and it was working fine when i remove the 'display' property.
How can i do that?
Here's my code..
function newInvite(){
var receiverUserIds = FB.ui({
method : 'apprequests',
display: 'page',
//filters: ['app_non_users'],
message: 'Come on man checkout my new application',
},
function(receiverUserIds) {
//my own callback fun
}
);
}
I've a button for invoking this request and i'm calling this function using jquery as
$('#invite_frd').click(function(){
newInvite();
});
just find the below part in url
display=wap
and change it to
display=touch

It goes to top of page on using facebook stream.publish method

I am using following code for stream Publish, it is working but when this dialog box opens my page scrolls upward and dialog box is down some where so user need to scroll page to see dialog box so why is it hapenning ? how can I correct it?
var attachment = {'media':[{'type':'image','src':image,'href':'<?php echo CANVAS_URL; ?>'}]};
var action_links= [{ 'text':"Music Mood", 'href': '<?php echo CANVAS_URL; ?>' }];
FB.ui({'method':'stream.publish','message':message,
'attachment':attachment,
'action_links':action_links
});
I am using facebook iframe app.
Please reply,
thanks in advance.
use javascript:void(0); in href of your link