Facebook API Request Dialog not working with Safari - javascript

I have the following code that logs the user in and displays the "Select Friends for Request" dialog ("apprequests"):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Test</title>
<script type="text/javascript">
function facebook(){
FB.login(function(response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
FB.ui({
method: 'apprequests',
message: 'Sample Title',
max_recipients:1
}, function(response){
console.log('OK');
});
}
}, {scope: 'publish_stream'});
}
</script>
</head>
<body>
<p>Test</p>
<div id="fb-root"></div>
<script type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=0&appId=XXXXXXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
The code is working with all major browsers (Firefox, Chrome, Opera, IE11, Safari for IOS, Android browser). Safari (for Mac/PC) is the exception: it's opening the "apprequests" dialog but the dialog comes up empty. If you change the dropdown options (to "Friends to Invite" and then to "All Friends" again) the friend list finally appears.
Any idea how to fix this bug?
Thank you!

It is reported bug of Facebook-API. As mark wiltse stated here:
We have managed to reproduce this issue and it appears to be a valid bug. We are assigning this to the appropriate team.
There is no need to handle separately for safari. You just need to on-hold this task until this bug get resolved by facebook developer.

Related

Facebook social plugin doesn't working on internet explorer

I'm new on facebook developer and i have created a page tab which contains a login using facebook php sdk (works on all browsers), and like button + feed dialog using facebook javascript sdk (works on all browsers -chrome, FF, safari- except IE).
After 4h of research and tests, I have created a simple page test.html which displays a like button. When I opened it directly outside facebook it worked on all browsers except IE. The IE console shows no error message in this page test.
I use IE 11 but when i emulated IE11- the problem is still here.
Note 1 : in the code, i call window.fbAsyncInit and IE doesn't show the alert.
Note 2 : the domain is in https
The entire code of the page test.html :
<!DOCTYPE html>
<html>
<head lang="fr" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
test<br /> <!-- just shortcut to reload -->
<div id="fb-root"></div>
<script language="javascript" type="application/javascript">
window.fbAsyncInit = function() {
alert(1); // IE only doesn't shwo this alert
FB.init({
appId : 'XXXXXXXXXX', // my api ID
xfbml : true,
version : 'v2.2',
cookie : true
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/sdk.js";
//js.src = "//connect.facebook.net/fr_FR/debug.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="https://www.facebook.com/naintrepides" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
</body>
</html>
There were online discussions that IE doesn't support the MIME type value of "application/javascript". I was hoping that at this time and age it should especially with the recent version of IE you are using.
Try changing it to:
<script language="javascript" type="text/javascript">
instead.

Facebook SDK with Javascript failing, cannot tell why

Here is my simple html:
fb_driver.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Facebook Driver</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="fb_driver.css">
</head>
<body>
<script>
window.fbAsyncInit = function() {
alert("why can i not see this?");
FB.init({
appId: 'my-app-id',
xfbml: true,
version: 'v2.0'
});
FB.ui({
method: 'feed',
name: 'The Facebook SDK for Javascript'
});
alert("hi");
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
alert("hello");
</script>
<div id="fb-something" class="fb-like" data-send="true" data-width="450" data-show-faces="true">
</div>
</body>
</html>
It is essentially copied directly from https://developers.facebook.com/docs/javascript/quickstart/v2.0. The "hello" alert at the end of the script shows, but the "why can i not see this?" and the "hi" do not (they are inside window.fbAsyncInit = function() {...}). "why can i not see this?" is literally the first thing inside the fbAsyncInit block but still fails to show. Can someone help me with why this is not working?
One thing I can think of is that, even though the above link says nothing needs to be imported or downloaded and just need regular javascript, perhaps there is something in earlier instructions that I missed.
It ended up being that the '//' before 'connect.facebook.net/en_US/sdk.js' is no good for just opening the html file locally (which is what I'm doing just for playing around right now). I added 'http:' so it reads 'http://connect.facebook.net/en_US/sdk.js' and that got me to a different bug, which is progress.

Facbebook Feed Dialog not working

I am trying to use the Facebook Javascript SDK feed dialogue to create a share button on my app.
I am using the php sdk on my app which is a codeigniter build deployed on Facebook.
I used the following on my php page.
<script type="text/javascript">
function share(){
FB.ui({
method: 'feed',
link: 'https://apps.facebook.com/myapp',
caption: 'An example caption',
}, function(response){});
}
</script>
<button onclick="share()">Share this Video</button>
When I attempt to run this on my canvnas page, (when button is clicked), I get a pop up with error:
An error occurred. Please try later
.
On localhost, when I try this I get a pop up with error:
API Error Code: 191 API Error Description: The specified URL is not
owned by the application Error Message: redirect_uri is not owned by
the application.
I've been looking at other question with similar problems but now luck in getting this working.
How can I fix my code to work so that when the button is clicked, I get a prompt to publlish to my wall, and enter a message.
Can this be done with the php?
EDIT:
Did some checking, does this fb.ui need to be used with this, or can it be used?
Try this. It working fine form me.
Script:
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=1234567890";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
FB Button:
<div class="fb-share-button" id="fb-root" data-href="<?php echo $yourlink; ?>" data-type="button_count"></div>
Put this after body tag or before script.
<div id="fb-root"></div>

FB Share button Javascript error in IE8

I am getting a javascript error for the FB Share button only in IE8. This started after the old Share button was disabled and subsequently re-enabled (see Facebook Share button: is it officially dead?)
The error I am getting is:
Message: Object doesn't support this property or method
FB.Share Line: 128
Code: 0 Char: 188
URI: http://static.ak.fbcdn.net/connect.php/js/FB.Share
Any ideas on how to fix this?
How about doing it this way?
http://www.facebook.com/sharer.php?s=100&p[title]=SHARE%20ME&p[summary]=SOME%20CONTENT&p[url]=http://www.google.com&p[images][0]=http://fakeurl.com/shareImage.gif
Breakdown:
http://www.facebook.com/sharer.php?s=100 - MAIN URL
&p[title]=SHARE%20ME - SHARE TITLE
&p[summary]=SOME%20CONTENT - SHARE PARAGRAPH
&p[url]=http://www.google.com - URL TO SHARE
&p[images][0]=http://fakeurl.com/shareImage.gif - SHARE IMAGE THUMBNAIL
I had a similar issue and removing the following line worked for me after hours of searching online.
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
I used a slightly modified version of the answer in the link I gave originally:
<html xmlns:fb="http://ogp.me/ns/fb#" lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID"; // appId must be valid
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:share-button type="button" href="http://www.foobar.com"></fb:share-button>
</body>
What I found is that if you can set IE8 in protected mode by selecting Internet options -> Security ->Trusted Sites ->Enable Protected Mode, the page is working fine.

Facebook JS SDK - Login Button Integration

I have this basic HTML page with a Facebook login button. The ID below is the ID of an app I created in my developer portal. When I run this page, it only shows the text “Login with Facebook” and not the actual button. I know it’s not succeeding to initialize the SDK but I can’t tell what is going on. Any ideas?
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '232894623452511',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-login-button">Login with Facebook</div>
</body>
</html>
Your code seems to work. See example of your code running here: http://jsfiddle.net/dmcs/HXRUv/3/
You might want to check your browser plugins. My Chrome is only displaying text, but it has do not track me plugin, Firefox works fine.

Categories