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
Related
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.
I've follow this tutorial: https://developers.facebook.com/docs/reference/javascript/#loading , this is code in common/myapp.html in my IBM Worklight app:
<!DOCTYPE HTML>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta charset="UTF-8">
<title>Buy3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/Buy3.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<!--application UI goes here-->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxx', // App ID
channelUrl : 'http://stormy-sands-2143.herokuapp.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth: true
});
};
// 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 = "http://connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
//Log.i(TAG, "Logged in...");
});
}
</script>
<!--Below we include the Login Button social plugin. This button uses the JavaScript SDK to-->
<!--present a graphical Login button that triggers the FB.login() function when clicked.-->
<div id="user-info"></div>
<button id="fb-auth" onclick="FB.login();" >Login</button>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="js/initOptions.js"></script>
<script src="js/Buy3.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Here are some of the values from my Facebook Application configuration:
App ID: "XXX"
Display Name: "[blah blah blah]"
Namespace: jfgjfgjhfgjh
App domains:stormy-sands-2143.herokuapp.com
HostingURL: https://stormy-sands-2143.herokuapp.com
Sandbox Mode: "Disable"
Site Url: http://stormy-sands-2143.herokuapp.com/
Canvas Page: http://apps.facebook.com/jfgjfgjhfgjh
Canvas URL: http://stormy-sands-2143.herokuapp.com/
Secure Canvas URL: https://stormy-sands-2143.herokuapp.com/
Page Tab URL: http://stormy-sands-2143.herokuapp.com/
Secure Page Tab URL: https://stormy-sands-2143.herokuapp.com/
Notice that I had to change the js.src parameter near the bottom of the code from the example given in the tutorial same with parameter in my channel file.
Then when i click login button i seen facebook Login Dialog,i've put email and password then click ok and i've got error:
Given URL is not allowed by the Application configuration.: One or
more of the given URLs is not allowed by the App's settings. It must
match the Website URL or Canvas URL, or the domain must be a subdomain
of one of the Apps domains.
I've search everything on stackoverflow and google but can't solve this error.
Thanks for any help!
Ok i've got it,just remove every things about heroku, then app config like this
App domains:localhost
HostingURL:
Sandbox Mode: "Disable"
Site Url: http://localhost/
Canvas Page: http://apps.facebook.com/jfgjfgjhfgjh
Canvas URL: http://localhost/
Secure Canvas URL: https://localhost/
Page Tab URL: http://localhost/
Secure Page Tab URL: https://localhost/
Then
//channelUrl : 'http://stormy-sands-2143.herokuapp.com/channel.html'
in HTML.
For anyone need it
This question might be somewhat open ended.
How would I go about switching from using FBML in my application to using the Javascript SDK and Social Plugins. Im dealing with a massive application so it's hard to tell how FBML was implemented and how the SDK should be implemented now. First I decided to switch this line.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
To this:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://ogp.me/ns/fb#">
Also, this piece of code (which looks like it loads the sdk) is there
window.fbAsyncInit = function()
{
//initialize
FB.init({
appId : myid,
status : true,
cookie : true,
xfbml : true
});
};
(
function()
{
var something = document.createElement('script');
something.async = true;
something.type = 'text/javascript';
something.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(something);
}()
);
Anything else needs to be done?
In addition you need to:
Define an HTML element: <div id="fb-root"></div> inside the <body>.
Search for elements starting with <fb: and remove those associated with FBML.
I have been building a facebook tab using html and css and facebooks javascript SDK.
I having problems with the iframe resizing to the size of the content.
I've managed to get it to work on initial load which is cool, using this below script...
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
-
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '00000000000000', // App ID
channelUrl : '//www.mywebsite.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoGrow();
};
// 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>
and my channel.html looks like this...
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
Like I said the initial page load resizing is perfect, but as I navigate around the iframe, it does not autogrow to my content.
Can anyone advise as I'm very new to this facebook iframe biz.
Thanks in advance
Please check these:
A, Do you have <!DOCTYPE html> at the top of the HTML?
B, Do your app generates valid HTML? Here is the validator tool: http://validator.w3.org/
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.