FB.ui popup window doesn't close - facebook

The initialization code:
FB.init({
appId: '123456789012345',
channelUrl: 'http://localhost/Some/Url/FacebookChannel',
status: true,
cookie: true,
oauth: true,
xfbml: true
});
The following code is called with an onclick:
FB.ui({
method: 'feed',
name: settings.facebookShareName,
link: settings.facebookLinkUrl,
caption: settings.facebookShareCaption,
description: settings.facebookShareDescription,
message: message,
display: 'popup'
});
This code works fine in FF and Chrome, and mostly works in IE8. The popup is shown and the user can post to their wall, but after submitting, the window doesn't close. It turns white with no further interaction, but must manually be closed by the user.
Why doesn't the window auto-close in IE, and/or are there any workarounds to force the popup to close?
Edit:
This issue may be related to this outstanding bug.

I have the same problem and have never been able to get a response from Facebook for the callback function. I don't see anything in console.log or any alerts I insert in the function.
My solution was to put a URL in FB.ui's redirect_uri that goes to an HTML page with self.close (or window.close). The FB.ui popup redirects there after the user's input and immediately closes. Remember to change your FB app's Site URL setting so it matches the domain the file resides on.
Here's my code, tied to my form's submit action. The function(response) callback is still there but not used. If anyone sees a syntax error please comment on it.
FB.ui ({
method: 'feed',
name: '',
link: '',
picture: '',
caption: '',
description: '',
actions: {name:'',link:''},
redirect_uri: 'http://.../self.close.html'
},
function(response) {
console.log(response);
if (response && response.post_id) {
alert('yes');
self.close();
} else {
alert('else yes');
}
});
The line of code in self.close.html:
<script type="text/javascript">self.close();</script>

A bit old thread, but this might help someone...
The popup will self close if you neglect to put in the "redirect_uri" parameter. (plus, the response callback will now work too)

add return false; to your method call.
onsubmit="someMethod(); return false;"

Not an easy one... but it could work:
First, to force closing the dialog you must pay attention to the response:
See the entire documentation and example here: https://developers.facebook.com/docs/reference/javascript/FB.ui/
Once you have the response you should close the dialog:
See: http://facebook.stackoverflow.com/questions/4646441/how-to-close-a-facebook-sdk-dialog-opened-with-fb-ui
Hope that helps! :)

The pop up will close if you do not give the redirect_uri as mentioned above - as well as if you do not give display (that is, do not give display: 'popup' or display: 'iframe').

Make sure 'http://localhost/Some/Url/FacebookChannel' hosted in the same domain with your app callback url.

Related

Facebook Page Tab : Error 191 (The specified URL is not owned by the application) but URLs are set

For a contest page, I use Page Tab within a Facebook App, but I can't set a Share dialog without getting this error.
window.fbAsyncInit = function()
{
FB.init({ appId: '##### (correctly set)',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setAutoGrow();
}
window.fbAsyncInit = function()
{
FB.ui({
method: 'feed',
name:'name',
link:'https://expertsmo.ca/_fb/concours/1', // https://apps.facebook.com/expertsmo
caption:'test'
});
}
Here is the App conf
I checked many posts on this error code, most of these problems are caused by the URL not being set; in my case, URL is well set and I still get this error. I tried many many things, still not working ( this solution of a similar case doesn't seem to work because I can't find the field "Website With Facebook Login").
I also use PHP sdk to find out if the user likes the page already, or not.
Really, I can't find the solution to this problem ... any idea? Thanks...
You include the JavaScript SDK two times in the code, only one time with an App ID (that is different from the FB.init call). Make sure you are using the latest code from the Facebook docs and clean up old stuff. That error message comes up when the App ID is not correct, the settings should be fine.
https://developers.facebook.com/docs/javascript/quickstart/v2.0
You also use window.fbAsyncInit in a wrong way, this should only be used once when you open the page. FB.ui should get called on user interaction or you will also get problems with popup blockers.
Btw, you should put ALL JavaScript code right before the closing body tag (for many reasons). Not sure why you put the async function after the opening body tag.

Custom image in facebook send dialog?

I am trying to send a facebook private message via facebook send dialog in my facebook app, i have a problem while setting the custom image each time user clicks on it, i am sending the parameters as
send msg
and on the function side,
FB.init({
appId: '<?=$this->facebook->getAppID()?>',
xfbml: true,
cookie: true
});
function send_message(user_id, image_name) {
FB.ui({
to: user_id,
method: 'send',
name: 'The Image',
description: 'Description here',
link: 'https://www.something.com/',
picture: '<?=baseurl()?>imagepath/'+image_name
});
}
It works fine without picture parameter, but all the time it uses default image that facebook automatically pick from my link.
please your kind help will greatly be appreciated!
Using HTTPS protocol in picture link (if you do so), you might cause your problems. Take a look at Images not working in FB.ui

Facebook dialog post with embedded swf showing only sometimes

I'm trying to do a basic facebook wall post with an embedded flash object based on the following documentation:
https://developers.facebook.com/docs/reference/dialogs/feed/
I'd like to do this using just a direct URL, like (note parameters get encoded):
https://www.facebook.com/dialog/feed?
app_id=SOME_APP_ID&
link=http://www.myregisteredfbdomain.com/someurl&
picture=http://www.myregisteredfbdomain.com/cfg/media/imagelink.png&
name=Flash%20Test&
caption=Just%20a%20test&
description=A%20Description&
redirect_uri=http://www.myregisteredfbdomain.com/someurl&
source=http://www.myregisteredfbdomain.com/facebook/aflashfile.swf
Although I've also tried it using javascript, with the same result:
<script>
FB.init({appId: SOME_APP_ID, status: true, cookie: true});
function postToFeed() {
var obj = {
method: 'feed',
redirect_uri: 'http://www.myregisteredfbdomain.com/someurl',
link: 'http://www.myregisteredfbdomain.com/someurl',
picture: 'http://www.myregisteredfbdomain.com/cfg/media/imagelink.png',
name: 'Flash Test',
description: 'A Description',
source: 'http://www.myregisteredfbdomain.com/facebook/aflashfile.swf'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
When I do the post under my development fb account, the post shows up fine, and I can click on the icon which displays the flash correctly.
However when I post under my own personal fb account, the post shows with the image only, but no flash activation when I click it - it just goes to the link/redirect link I defined.
Can anyone give me any pointers as to why this might be the case?
Found out why - It's because I'm accessing the post to my personal account through a https connection, which doesn't show the flash - it's linked via a http connection.

facebook apprequests dialog error “An error occurred. Please try again later.”

I was searching all possible topics but now solution works for me.
There is my code, which works in all browsers except Chrome. There is just window with An error occurred. Please try again later..
It is identical code from FB documentation.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : {$appId},
frictionlessRequests: true
});
function sendRequestViaMultiFriendSelector() {
FB.ui({ method: 'apprequests',
message: '{_"FACEBOOK_INVITE_WINDOW_MESSAGE"}'
}, requestCallback);
}
function requestCallback(response) {
//callback code
}
</script>
<a onclick="sendRequestViaMultiFriendSelector(); return false;">
This might be because your application is still in sandbox mode.
You have to specify the display option for the dialog ('popup, 'iframe'...)
For example:
FB.init({
appId : {$appId},
frictionlessRequests: true,
display: 'popup'
});
You have not stated if your application is on Facebook or not. The reason this is important is because of the canvas_url parameter of your application settings. If you are on apps.facebook.com/app_namespace, then you'll already have this field filled out. However some projects simply do not operate on Facebook itself. In such cases people don't really "need" to fill in this parameter. It is however necessary for app requests to work.
When a user acts on an application request (IE accepts it), they are redirected to the canvas url of that application. Not specifying the canvas url can nullify the request. This might also be the reason for the error.
Try setting your canvas url. You can even have it redirect to your proper URL, it doesn't have to "do" anything else.

Sending message via Facebook throws 500 error

I am sending a private message via facebook from my app (website). It is an invitation link to the website - however, it gives the following error:
The website encountered an error while retrieving https://www.facebook.com/dialog/send. It may be down for maintenance or configured incorrectly.
Here are some suggestions:
Reload this webpage later.
HTTP Error 500 (Internal Server Error): An unexpected condition
The link invitation link being sent is something like
http://myapp.com/invitation - doesnt work
http://myapp.com - works!
How can I make it work with something after a forward slash?
The actual code:
:javascript
$(function(){
$('li.friend:not(.invited) label').live('click', function() {
FB.init({appId: #{Rails.application.config.fb_app_id}, xfbml: true, cookie: true})
FB.ui({
method: 'send',
display: 'popup',
name: 'New Invitation',
link: 'http://myapp.com/invitation/',
to: this.parentNode.getAttribute("data-id"),
frictionlessRequests:true,
show_error: 'true'
})
$(this).parent().addClass("invited")
$(this).siblings().prop("checked", true)
})
});
You have 'frictionlessRequests' and 'method: send' there; those aren't compatible options. The frictionlessRequests: true, should be in your FB.init() call and affects how the Requests dialog works when pre-filling recipients, what you have there is a mix of parameters from different dialogs
A sample send dialog call is:
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',
});
and a sample apprequests dialog:
FB.ui({
method: 'apprequests',
message: 'Come use this app with me.'
});
}
Also (as you discovered) the link needs to resolve correctly a return a 200 response; if it redirects immediately it won't work correctly