Uncaught ReferenceError: FB is not defined - javascript

I know this question is asked frequently, but I have not found the solution.
I use this code:
open the html tag with
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
in the index immediately after the opening tag I entered this
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'MY_APP_ID', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(){
// If we've already installed the SDK, we're done
if (document.getElementById('facebook-jssdk')) {return;}
// Get the first script element, which we'll use to find the parent node
var firstScriptElement = document.getElementsByTagName('script')[0];
// Create a new script element and set its id
var facebookJS = document.createElement('script');
facebookJS.id = 'facebook-jssdk';
// Set the new script's source to the source of the Facebook JS SDK
facebookJS.src = '//connect.facebook.net/it_IT/all.js';
// Insert the Facebook JS SDK into the DOM
firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement);
}());
</script>
finally, the button
<fb:like href="http://mydomain.it/" layout="button_count" action="like" show_faces="false" share="false"></fb:like>
<script>
FB.Event.subscribe('edge.create',
function(href, widget) {
alert('Ti piace ' + href);
});
</script>
the like works, but does not open the alert and I got this error in console.
Uncaught ReferenceError: FB is not defined
Any solutions?

See this thread: FB is not defined in Facebook Login.
You are trying to use FB right after your button, and it's not defined yet:
<fb:like href="http://mydomain.it/" layout="button_count" action="like" show_faces="false" share="false"></fb:like>
<script>
FB.Event.subscribe(...
^--- FB isn't defined yet!
Move that FB.Event.subscribe code inside your window.fbAsyncInit function, where you have that comment "Additional initialization code"

Another reason why you get this error is because you are missing ; after the fbAsyncInit definition bracket.
window.fbAsyncInit = function() {
};

Related

How do I use Javascript to auto resize the height of my Facebook tab?

I am trying to create a simple HTML Facebook tab for my page, but I can't seem to find a fix for how to change the max height of the tab.
I should mention that I'm a beginner in coding, I know very basic HTML, but I've tried to avoid JavaScript since I have no experience with that whatsoever.
Unfortunately it seems like I can't do this without JavaScript, so my problem is most likely me doing something wrong.
The code looks something like this (the rest of the codes, including closing HTML-tags comes after the JavaScript part, and is working fine).
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '***********', // App ID
channelUrl : '//**********', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setAutoGrow();
</script>
I've pretty much copied the Javascript SDK from Facebook's developer pages and then found a small piece of code that should automatically set the height. I've googled for answers, but haven't been able to find anything that could fix this (or explain it in a way that an absolute newbie like me would understand).
Hope you can help me out.
//Frederik
Since You mentioned you know very basic html I assume you are not aware of the CSS possibilities as well, so I suggest you to replace this:
<div id="fb-root"></div>
with this:
<div id="fb-root" style="max-width: 100px;"></div>
Move this code FB.Canvas.setAutoGrow(); inside fbAsyncInit function, Example:
window.fbAsyncInit = function() {
FB.init({
appId : '***********', // App ID
channelUrl : '//**********', // 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();
};
If you want to set the size manually, you could do by using FB.Canvas.setSize() function:
FB.Canvas.setSize({height: 800});
Change the above number 800 to whatever size you want it to increase.

Facebook example JS login not loading

I'm trying to replace my PHP login for my canvas app with a JS one and have copied the Facebook example almost exactly from here https://developers.facebook.com/docs/reference/javascript/ and here https://developers.facebook.com/docs/reference/javascript/FB.login/. However even though the alert prompt is opening the prompt for the user to accept the permissions isn't. Can anyone see why from the code below? I've been at this for hours now and I can't see how my code really differs from what was suggested. Could it have something to do with the browser protection not running javascript?
<?php
require_once 'config.php'; // This contains app information
//include_once 'scripts/mysql_connect.php'; // This is the database connection configuration
require_once 'Database.php';
$fbconfig['appUrl'] = "https://localhost/FindAFlatmate-Dev/";
?>
<html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Profile Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '127865210690483', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
alert('Api loaded');
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
</html>
However even though the alert prompt is opening the prompt for the user to accept the permissions isn't. Can anyone see why from the code below?
You are calling FB.login directly on page load, with no user interaction – so it’s most likely your browser’s popup blocker that is preventing the login dialog from showing at all.
The general recommendation for FB.login is to call it only on explicit user interaction, like the user clicking on a link/button that says “login” or something. This way the popup FB.login opens is less likely to be blocked, since the default configuration for popup blockers in current browsers is to block only popups that are opened “automatically” without the user requesting them in any way.

FB.Event.subscribe code not working

I am using this code to get the response:
<fb:like layout="button_count" notify="true" colorscheme="dark" href="http://www.fbrell.com"></fb:like>
<script>
// this will fire when any of the like widgets are "liked" by the user
FB.Event.subscribe('edge.create', function(href, widget) {
alert('You liked ' + href, widget);
});
</script>
It's not giving any response. Can anyone tell what wrong am i doing ?
Assuming that you have the FB Like button appearing, so you must be including the SDK correctly, I was in exactly the same situation - all you're missing is setting the subscribe up in the fbAsyncInit() function.
window.fbAsyncInit = function () {
FB.Event.subscribe('edge.create', function (targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});
};
If you're doing this you don't need an application ID nor do you you need to use the FBML code, you can use the HTML5 inclusion code like <div class='fb-like' data-href='...
You're missing the inclusion of the javascript SDK files.
You're missing the FB.init
You're not running your code within the fbAsyncInit() function.
See https://developers.facebook.com/docs/reference/javascript/ for more information.
Checklist:
(Im assuming you have setup the Javascript SDK)
run the FB linter on your url, errors here may stop it working
http://developers.facebook.com/tools/debug
Include this at the top of the page
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
If your liking an app, include on your app page
<meta property="fb:app_id" content="Your app id" />
Like button, change href to your link
<fb:like layout="button_count" show_faces="false" height="21" href="http://facebook.com"></fb:like>
If its an app, FB prefers HTTPS
function init() {
FB.init({
appId: APP_ID,
status: true,
cookie: true,
xfbml: true,
oauth: true
});
//uncomment if required
//window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
//}
}
init();

FB.Canvas.setUrlHandler

Are someone succed to use the method FB.Canvas.setUrlHandler please?
I've already read the following URL's
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setUrlHandler
http://​developers.facebook.com/blog/​post/555
but it still don't work... Someone to help me please?
Thanks in advance.
Here is my source code , when I execute this, nothing gets logged in the console:
<html>
<head>
</head>
<body >
<div id='fb-root'> </div>
<script type="text/javascript" src="http://?connect.facebook.net/en_US/?all.js"> </script>
<script type="text/javascript">
FB.init({
appId : 'MY_APP_ID',
oauth : true,
status : true,
cookie : true,
oauth : true,
xfbml: true
});
function testUrlHandler(data) {
if (data.path.indexOf("test1"?) != -1)
console.log('test1');
else if (data.path.indexOf("test2"?) != -1)
console.log('test2');
else
console.log('default');
}
FB.Canvas.setUrlHandler(te?stUrlHandler);
</script>
</body>
</html>
Per the documentation, the callback is only for links on the parent iframe (Facebook UI)
Registers the callback for inline processing (i.e. without page
reload) of user actions when they click on any link to the current app
from Canvas, including:
All ticker stories
Bookmarks
Requests from the bookmarks drop-down list
Request Notifications stories.
Your links in app wont fire the event.
I've spend 3 hours trying to understand what's wrong with it. Sometimes (really rare occasions ) this thing works just fine, and sometimes FB api just ignores this callback.
Solution - set the callback with delay after init, solution: How to work with facebook setUrlHandler?

Facebook share/comments don't work like they should

In my page I've added Facebook Comments as well as Share button. Everything was done according to their instruction, so :
I've included loading script :
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '161771113844567', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
and then on pages that use comments/share:
<div class="facebook-comments">
<fb:comments xid="{{star.uniq.id}}" url="" title="Test"></fb:comments>
</div>
and:
<a name="fb_share" type="box_count" share_url="url"
href="http://www.facebook.com/sharer.php">
Share
</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
but the comments are loaded only from time to time (otherwise a FB.provide is not a function error is shown) and share button shows 0 all the time. Is there a way to fix this ? I've tried downloading all.js but then comments where not loaded at all.
You are using both the old javascript SDK and the new one. The facebook sharer.php is no longer recommended an is being replaced by the like button. The solution is to remove the Facebook Share and replace it with a like button. This way you will only be using the new Javascript SDK http://connect.facebook.net/en_US/all.js. You cannot use both of these at the same time. static.ak.fbcdn.net/connect.php/js/ is the old SDK and is being deprecated.

Categories

Resources