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.
Related
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.
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.
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.
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.
I'm trying to use SDK Facebook to detect the click on the button "like" of the likebox and call a function , but it not working .
Here's my code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxx', // App ID
channelURL : 'xxxx/facebook/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(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>
<script type="text/javascript">
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
</script>
<fb:like-box href="http://www.facebook.com/MarwenClubiiste" width="292" show_faces="false" stream="false" header="false"></fb:like-box>
</html>
Please Help , I really need this
Like box has a known bug, where the edge.create event doesn't work if the user is logged out of facebook and has to login to LIKE the page.
However it works fine if the user is already logged in.
Here is a mention of this bug :
https://github.com/facebook/connect-js/issues/82
http://forum.developers.facebook.net/viewtopic.php?id=75166
The Like button does not have this bug, and fires the event in both cases.
You may have to replace the LikeBox with a Like button + some custom HTML of your own.
Try using non-async loading of facebook JS as well . Here is more help :
http://forum.developers.facebook.net/viewtopic.php?id=87926