Facebook fb.ui dialog no popup on Safari - facebook

It works fine on Firefox, Chrome and IE, but no pop up on safari and no exception and error.
Tested several safaris on different machines. Safari block pop ups by default. is there any way to unblock it automatically?
shareButton.on('click', function(e) {
// do something
shareAction();
}
function shareAction() {
// do something
share();
}
function share() {
// do something
submitShare();
}
function submitShare() {
// do something
// use the default fb.ui settings
FB.ui({
method: 'feed',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
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.');
}
}
);
}

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

FB.UI using imaging staging

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

FB.ui returns Error: element not specified

Using the example from the developer site:
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'https://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.'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
I get the following back:
Error: element not specified
innerError: undefined
message: "element not specified"
At first I thought I was missing the "fb-root" element, but I have it in my body:
<body onLoad="onLoad()">
<div id="fb-root"></div>
</body>
Now I'm thinking it has something to do with my Backbone/jQuery Mobile usage, because the body is cleared once the first page is loaded. However, the FB object is loaded, so I really don't know what's wrong. Any ideas to try and fix this?
Thanks.
I had the same issue and I figured out that was happening just with Chrome. Which browser are you using?
What worked for me was specifying
display: 'popup'
inside FB.ui {}
At the moment I check the browser and if Chrome I use 'popup', if not 'iframe'
var display = 'iframe';
if (navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
display = "popup"
}
FB.ui({
method: 'share',
display: display,
href: 'https://developers.facebook.com/docs/reference/dialogs/'
},
function (response) {}
);
Should work also with feed, but I haven't tested it yet.

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.

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