FB.UI using imaging staging - facebook

I have a standard file-upload form, which I want to use to collect a user's image and than upload to Facebook.
If I post the upload form to the FB 'staging' url, I get the encoded staging reference - but when I try to launch a FB.UI() feed dialog, supplying the staging token as a "picture" parameter it fails?
Is the staging URL strictly for use in creating a graph object w/o using the dialog? And if I want do use the dialog do I have to upload the image somewhere else and than reference it ?
Here's my example:
$('#picture_upload').submit(function(e){
e.preventDefault();
$(this).attr('action',$(this).attr('action')+'?access_token='+accessToken);
$(this).ajaxSubmit({
success: function(response){
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
picture: response.uri,
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
} //call function after success
});
});
The response contains something like:
{"uri":"fbstaging://graph.facebook.com/staging_resources/MDAxMDE1MTU3NjIyNzExNzYwNA=="}
Which is obviously invalid as a picture parameter in the FB.UI function

Related

Facebook jssdk customizes the shared feed interface. Why don't the parameters of picture work?

According to the official Facebook document,url:https://developers.facebook.com/docs/sharing/reference/feed-dialog
But the parameters in the "Deprecated Parameters" column below do not work.
Is the interface function turned off?
I hope someone can help me. Thank you.
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
redirect_uri:location.href,
link: location.href,
picture: 'https://pic3.zhimg.com/80/37e17fa3d5d60f9e8bcba3bdc7e7dc06_hd.jpg',
caption: 'Reference Documentation',
description: 'tDialogs provide a simple.',
message: 'tFacebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
console.log(response)
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
But the parameters in the "Deprecated Parameters" column below do not work.
That is why they are in the deprecated section (deprecated means "old" or "gone"), they don´t work anymore since a very long time. You have to provide that data with Open Graph tags in the source of the shared URLs.
More information about Open Graph tags: https://developers.facebook.com/docs/sharing/webmasters/#markup

Trouble linking to images on localhost in a post from a Facebook application

I use the following code to publish to a users wall in my Facebook app I have just started:
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://localhost:8888/project_images/110/110.png',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
Sadly this does not display the image eventhough when I enter: http://localhost:8888/project_images/110/110.png into my browser the image displays without an issue. Also, when I use the default from the example: http://fbrell.com/f8.jpg as the picture: parameter the image shows up fine. Is this not working because of the localhost? I am running localhost off MAMP.
I ran into this issue as well. I think it is because Facebook attempts to fetch the image, and cannot get to localhost.

using facebook stream publish

I want to publish a URL as an attachment to a friends wall:
var attachment={'name':'favor','href':'http://128.196.239.71/movie.php?mid=<?php echo $_GET['mid']; ?>'};
Facebook.streamPublish('',attachment,null,friends[i],comment,callback);
Doing the above gives me a Facebook undefined, what should I do to remedy this?
Do I need to set a special permission in order to do this to the sender of this message?
You do need the stream.publish permission in order to use the stream.publish method or the equivalent graph API call.
You can check that the user has already granted this permission with something like this:
FB.getLoginStatus(function(response) { if (response.perms) { /* check perms */ } })
You can request the permission with something like this:
FB.login(function(response) { /* check perms */ }, {scope: 'publish_stream'})
Then in the response you can check to see if it was actually granted, then you should be able to do stream publish calls.
However, I don't recognize the format of your call "Facebook.streamPublish". I think the new API requires you to do a call more like
FB.api({method: 'stream.publish', message: 'hello'}, function(response) {})
Alternatively to all this, you can use the dialogs API to create a post and show it to the user, and have them approve it or disapprove it. This does not require the stream.publish permission. Something like this (the example given in the FB.ui API docs):
FB.ui(
{
method: 'feed',
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.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
At the rate Facebook changes, I hope some of this information is still accurate by the time you read it (or even accurate to begin with).

Facebook application, dialogue to publish on user's wall, using Javascript API, pop-up blocked in browsers

I am using JS-API to generate a dialogue which asks for permission to publish the status message generated by my Application. Given below is the screenshot of what I am talking about:
Here is the code:
FB.ui(
{
method: 'feed',
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.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
I use the sample JS code as told in the documentation and it works well if pop-ups are not blocked in the browser settings. but without status message being displayed there's no utility of the app!
Please help; I'm stuck at the last stage.
I don't see why it's bothering you. If the user is blocking FACEBOOK pop-up then it's his loss!
Anyway, if you really need to handle all cases, then you can choose a different way. Have a read of the Feed Dialog.
What you could do is when you are done from the previous step you redirect your page to the Facebook feed method so it'll open as a page:
http://www.facebook.com/dialog/feed?
app_id=123050457758183&
link=http://developers.facebook.com/docs/reference/dialogs/&
picture=http://fbrell.com/f8.jpg&
name=Facebook%20Dialogs&
caption=Reference%20Documentation&
description=Dialogs%20provide%20a%20simple,%20consistent%20interface%20for%20applications%20to%20interact%20with%20users.&
message=Facebook%20Dialogs%20are%20so%20easy!&
redirect_uri=http://www.example.com/response
The important part to change here is the app_id and redirect_uri, so your code would look like:
...
previous code
...
inside previous code success response
...
var url = "http://www.facebook.com/dialog/feed?" +
"app_id=" + YOUR_APP_ID + "&" +
"link=http://developers.facebook.com/docs/reference/dialogs/&" +
"picture=http://fbrell.com/f8.jpg&" +
"name=Facebook%20Dialogs&" +
"caption=Reference%20Documentation&" +
"description=Dialogs%20provide%20a%20simple,%20consistent%20interface%20for%20applications%20to%20interact%20with%20users.&" +
"message=Facebook%20Dialogs%20are%20so%20easy!&" +
"redirect_uri=" + YOUR_REDIRECT_URI;
top.location.href = url;
Your code is fine. It brings up the Feed Dialog for me. Your problem is somewhere else. Did you add the <div id="fb-root"></div>? Make sure it is at the top of the page just after the <body> tag.
Also make sure you are loading the FB Javascript SDK properly:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
Use this code
you have forget to add display property
FB.ui(
{
method: 'feed',
display: 'popup',
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.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);

Simple FB.ui Dialog

I have a fb.ui modal popup on my page to let users update their status on my page. It works great so far. Now i tested and it seems to be that the postpicture, title and description are automatically pulled from my page - I didn't define them in my script. It doesn't look very nice to be honest, and i would like to remove that for my users benetit, because it looks like they are directly advertising my page. Is there any way to have the fb.ui dialog in a simple way, only that their message will be published?
Thanks for all your kind help!
EDIT: MY CODE
FB.ui(
{
method: 'feed',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
Check the fb.ui feed page for a list of parameters being passed:
https://developers.facebook.com/docs/reference/dialogs/feed/
Some options like name, description and image will be generated automatically based on your page content, you can set them to an empty string or something more appropriate from within your code.
FB.ui(
{
method: 'feed',
message: 'Facebook Dialogs are easy!',
description: '',
name: '',
picture: _some_default_picture_
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);