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)
Related
Does anyone know if a user generated HTML5 Canvas could be attached to a Facebook 'Like' action and shared on a Facebook wall?
I guess the canvas would have to be rendered to an <img> tag and the id of the tag specified in the og:image metadata?
You have two options as I see it.
(1) Use the Like Button and in it put a dynamic url which generates the og tags for the configuration the user has chosen.
In the 2nd step of the like button tutorial it generates the og tags for you so you can see what's needed, then just make sure that your server generates those according to what the user configured.
You'll have to make a request from your page to the server when the user finished his configuration so that this will be possible.
(2) Use the Feed Dialog that comes with the js sdk.
Using that you can specify all of the story fields, for example:
var obj = {
method: "feed",
picture: "URL_FOR_THE_CONFIGURED_BIKES_PIC",
name: "My custom bikes!",
caption: "I just finished building a new pair of bikes",
description: "My configuration: ....."
};
FB.ui(obj, function(response) {
console.log(response);
});
It is of course possible to mix both options into a third, if you have a specific url per configuration then you can simply:
FB.ui({
method: "feed",
link: "URL_FOR_THE_USER_CONFIGURATION"
}, function(response) {
console.log(response);
});
And then facebook will extract the data from the og tags in that link.
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'm creating a facebook dialog here that links to an external site (not from my domain). In the preview the link shows up correctly, but when the message is viewed in the inbox the url has been changed.
Specifically, I call this function:
var link = "http://someexternalsite.com/?id=xxx"
var desc = "a description"
FB.ui(
{
method: 'send',
name: 'title',
link: link,
picture: 'http://mysite.com/somepicture.jpg',
description: desc
},
function(response) {}
)
And the link changes (when viewed in your facebook inbox) to
http://facebook.com/someexternalsite
Is there some unwritten security policy somewhere? Do I need to get permission from someexternalsite.com to link to their site?
Facebook keeps control of the links that are posted. That way if a link is to a virus or a malicious site, Facebook just needs to change their URL.
It seems that facebook take the meta og: property.
I didn't find a way to get the link I wanted without changing the og:url.
Btw the picture is also erase by the og:image tag.
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
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
}
);