I am trying to show a 'Post to Your Wall' feed dialog with the following code in a facebook iframe app:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId:'249725835046216', cookie:true,
status:true, xfbml:true
});
FB.ui({ method: 'feed',
message: 'Facebook for Websites is super-cool',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
});
</script>
The problem is that it is appearing in a new popup window like this:
Instead of appearing as like this without appearing in a popup window:
I don't want the feed dialog to appear in a new popup windows because in most modern web browsers where popups are blocked. I don't know why this is happening. Please help.
I'm pretty sure that you get a popup if the user has not authorized your application. Facebook made it work that way for security reasons. If you prompt for authorization first, then you should get the inline dialog.
Note that the request for authorization will itself be a popup, but you only have to have that happen once. I have things working this way, the way you want, in the someecards Facebook app. Feel free to grab the javascript code, it's not specific to the app.
Try this, put FB.ui inside FB.getLoginStatus:
FB.getLoginStatus(function(response) {
if (response.authResponse) {
FB.ui({
method: 'feed',
...
display: 'dialog'
});
}
});
in my case the problem seems to have been solved by seting display to async
display: 'async',
i think this is default for page tabs and canvas, but from time to time, instead of appearing within the main window it would load a new popup..
after setting it though (page tab in my case) i haven't noticed any pop up coming up since then..
I know this is a bit old, but I stumbled across this page when trying to solve this problem for myself and none of the answers here worked for me.
For the benefit of anyone else who has this problem, this was happening for me because I was trying to call the dialog on page load. Moving it to a user triggered event (such as a click) resolved it for me.
I have the same UI issue and I don't like the pop up window too.
I just found a link.
It helps us to redirect the page in same window. But it does not solve our problem perfectly.
There's a "URL Redirection" section in the docs for the Feed Dialog:
https://www.facebook.com/dialog/feed?
app_id=145634995501895
&display=popup&caption=An%20example%20caption
&link=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
&redirect_uri=https://developers.facebook.com/tools/explorer
So you can do window.location=(this url) in Javascript, setting the redirect_url correctly, and this should work without a popup.
Note that the Feed Dialog is now deprecated in v2.0, so check out the Share Dialog instead:
To share a link:
https://www.facebook.com/dialog/share?
app_id=145634995501895
&display=popup
&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
To share an Open Graph story:
https://www.facebook.com/dialog/share_open_graph?
app_id=145634995501895
&display=popup
&action_type=og.likes
&action_properties=%7B%22object%22%3A%22https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F%22%7D
&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
The 'display=popup' bit affects how the share screen looks, it doesn't open a new window. Possible values for display are:
async, iframe, page, popup, touch, wap
Related
I am trying to share content from a website that I own to my Facebook page like this (using django but I don't think this causes the problem):
document.getElementById('FBshareBtn').onclick = function() {
FB.ui({
method: 'share',
display: 'popup',
href: '{{ site_url }}{{ request.get_full_path }}',
}, function(response){});
};
Everything works as normal. Sharing pop up window opens up and I choose to post to a page that I manage as the administrator of that page.
Content is indeed shown to my facebook page after a while, but only me can see it. Users that have liked/are following the page cannot see it.
They can see content created from inside my facebook page, though.
For some reason, content shared from another website is "hidden".
PS: I haven't purchased a domain, yet, for my website so I am using numerical IP (e.g. 'http://188.55.66.28:8008/articles/view/1') when I am sharing.
What am I doing wrong?
If posted stuff is only visible to you, go to "App Review" in your App settings and make sure the checkbox for live is set to the correct status:
ON - Your app is currently live and available to the public.
We developed a website with fb share dialog to share GIF's into facebook, here is our code snippet for this feature:
FB.ui({
method: 'share',
href: 'gif_480x480_px_url',
hashtag: '#hashtag'
}, function(response) {
});
We use the share dialog as you can see above, because we need the response to use for a feature, anyway we tried the share.php as well (like here: http://jsfiddle.net/stichoza/EYxTJ/), but this one does not work neither unfortunately.
The bug is the following: if the user shares a GIF in Windows Firefox, the facebook's dialog pop-up will open much bigger (and without a scrollbar) than it would be necessary, and most importantly hiding the buttons on the bottom making the share literally impossible because the dialog window is not able to be resized manually. Please see the issue on this screenshot.
In the fb docs, there is no parameter to add max height to the window.
Huge thanks for your help to debug in advance!!!
i am trying to add the stream.publish functionality to my web app, but i'm having a problem with the 'feed' dialog.
My code is the following:
var obj = {
method: 'feed',
display: 'iframe',
name: data.name,
link: data.link,
picture: data.picture,
caption: data.name,
description: data.description,
message: data.message,
actions: [{
name: data.actions.name,
link: data.actions.link
}],
user_message_prompt: ''
}
var resp = FB.ui(obj, function(response) {
alert("DONE");
});
I can make it work if i use 'popup' instead of 'iframe' but that's not what i want.
Any ideas why the feed is just not appearing in my screen???
Thanks!
As described in Dialogs documentation
If you specify iframe, you must have a valid access_token. To get a valid access_token, please see the Authentication guide
Update:
Seems there is couple of other statements that may lead to this behaviour:
iframe: Display the dialog in a lightbox iframe on the current page. Because of the risk of clickjacking, this is only allowed for some certain dialogs, and requires you to pass a valid access_token.
And this one.
On Facebook canvas pages, Dialogs are supported only for iframe applications
There is also open BUG #246637628719849 about "Send Dialog" not working with as iframe in Page Tabs (which may, or may not be related).
Update2:
Actually in all my applications I've user FB.ui without specifying display since at the time of implementation of Dialogs iframe wasn't working well in most cases, and without it Facebook JS-SDK trying to use most appropriate display mode...
Update3:
OP had fb-root within other DOM element which was hidden, causing Dialog to be invisible (as he stated in comment)
I am trying to display a Facebook UI dialog inside my iframe app, so that I can get an extended permission that we don't presently have. This was easily achieved using the old SDK. However, using the new library, I get a Facebook iframe dialog that appears modally, but never stops loading. Changing the method to "page" means I get a popup browser window that simply says "An error has occured". My code follows:
var attachment = {
display: 'iframe',
method: 'oauth',
scope: perms,
access_token: '<?php echo $this->accessToken; ?>' // this is definitely valid access token
};
FB.ui(attachment, function(response){
pr(response);
});
I'm hoping this is possible using the new SDK, the docs certainly state that iframe is a valid display param.
Thanks in advance.
G
iframe is not a valid display param for oauth dialog because of the risk of clickjacking. Also I'd suggest to use FB.login to get an extended permission:
https://developers.facebook.com/docs/reference/javascript/FB.login/
hope this helps
This has been broken for a while. (Take a look at the bugtracker with "FB.ui permission" as search words.) A work-around is to use FB.login instead of FB.ui. This means getting a pop-up instead of an iframe, of course.
I'd simply like to make an image-click in my FBML page to trigger facebook's ajax dialog box. How do I accomplish this?
I have an FBML tab on my facebook fan page. In the content of that tab, I would like an image to function as a share button.
By following these directions, I can customize a share button, but the image itself that the user clicks on is not customizable. I want to be able to provide my own image, not use the silver share button provided by facebook.
By following these alternative directions I can use my own image. Perfect! Except on thing... Share.php opens as a page instead of as a javascript dialog. So when the user completes the dialog, it closes the whole page!
Here's what it looks like right now. Sorry, you have to click "Like" to see the share image. When you click the image, the share page opens, but I just want the ajax dialog.
I believe you can do what you want using the facebook feed dialogs:
http://developers.facebook.com/docs/reference/dialogs/
this is the javascript that you will have to bind to your onClick event of your link:
FB.ui(
{
method: 'feed',
name: "Name",
link: "http:\\www.facebook.com\pages\#\page_id_here",
picture: "http:\\path\to\image\file.jpg",
caption: "Caption",
description: "Description",
message: "Message"
},
function(response) {
//callback function
}
);