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

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

Related

Featherlight on ajax loaded content

I have an issue with Featherlight lightbox on ajax loaded content.
On an upload page, i display a gallery with images opened with the lightbox. It works well on first load. But as soon as i upload a new image, the gallery is refreshed by ajax and the lightbox doesn't work anymore.
I load Featherlight via Jquery that way :
jQuery(window).on('load', function(){
var lightbox_url = 'js/jquery.magnific-popup.min.js';
jQuery.getScript( lightbox_url, function() {
$('.lightbox-img').magnificPopup({type:'image'});
});
});
I don't see any option on the documentation for this (https://github.com/noelboss/featherlight/).
Thanks for any help !
Whenever you invoke an ajax call changing the images you have to re-call the featherlight initiation function.
$.ajax({url: "xx", success: function(result){
//your code here
$('.lightbox-img').magnificPopup({type:'image'});
}});

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');
});
});

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

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

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

Facebook connect in iframe- popups shows inside the iframe

I'm implementing Facebook connect for a website. The Facebook Connect code is inside an iframe. Everything works well but when Facebook is supposed to show a popup dialog (for example FB.Connect.showFeedDialog or FB.Connect.streamPublish) The popup shows inside the iframe.
Since its a small iframe window the popup is half hidden.
Any idea on how to solve it is very much appreciated.
Note: the FB login and logout popups do show well.
My window was too small to show the FB iframe properly, so I overrode the private _openFeedDialogIframe function to call the _openFeedDialogWindow:
var init = function()
{
FB.Connect.get_status().waitUntilReady(function(status)
{
FB.Connect._openFeedDialogIframe = function(b, a, f)
{
FB.Connect._openFeedDialogWindow(b, a, f);
};
});
};
FB.ensureInit(init);
This forces a popup every time an iframe is to be shown.