Facebook JS SDK Syntax not recognized
I don't know why it's not finding the libraries I loaded for JS:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link href="Content/Styles/Site.css" rel="stylesheet" type="text/css" />
<title></title>
<script src="Content/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Content/js/jquery.cookie.js" type="text/javascript"></script>
<script src="Content/js/FacebookAPI.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="facebookPhotos-iFrameContent">
<div>
<p>Log into facebook by clicking on the button below</p>
<p id="facebook-LoginButtonContainer">
<input type="image" id="btnFacebookLogin" src="images/facebookLoginBtn.jpg" />
</p>
<p><asp:DropDownList ID="facebookAlbumDropdown" runat="server" /></p>
<div id="facebookPhotosContainer" />
</div>
</div>
<div id="fb-root"></div>
</form>
<script type="text/javascript">
var facebookApplicationID = '13xxxxxxxxxxxxx'; // edited out for this forum thread
window.fbAsyncInit = function()
{
FB.init({ appId: facebookApplicationID, status: true, cookie: true, xfbml: false });
};(function ()
{
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
$('fb-root').appendChild(e);
} ());
</script>
<script type="text/javascript">
var photosContainerDivID = 'facebookPhotosContainer';
var loginButtonID = 'btnFacebookLogin';
var dCookieValues = null;
var accessToken = null;
var userID = null;
// WIRE UP EVENTS //
$('#' + loginButtonID).click(function ()
{
alert("inside $('#' + loginButtonID).click(");
LoginToFacebook();
});
...
When I load the page I get the following errors:
FB is not defined
[Break on this error] FB.getLoginStatus(function (response)
FacebookAPI.js (line 195)
I've loaded the Facebook JS SDK in the what is this a callback?
;(function ()
{
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
$('fb-root').appendChild(e);
} ());
not sure what I'm missing here.
UPDATED:
var facebookApplicationID = 'xxxxxxxxxxxxxxxx;
window.fbAsyncInit = function () {
alert("got here");
// Initialize/load the JS SDK
// cookie is set to true to activate JS SDK cookie creation & management
FB.init({ appId: facebookApplicationID, status: true, cookie: true, xfbml: false });
// now that the Facebook JS SDK is Initialized, continue with core logic
FacebookJsSdkInitializedCallback();
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
$('fb-root').appendChild(e);
} ());
</script>
<form id="form1" runat="server">
<div id="facebookPhotos-iFrameContent">
<div>
<p>Log into facebook by clicking on the button below</p>
<p id="facebook-LoginButtonContainer">
<%--<asp:ImageButton ID="btnFacebookLogin" runat="server" ImageUrl="images/facebookLoginB开发者_运维百科tn.jpg" />--%>
<input type="image" id="btnFacebookLogin" src="images/facebookLoginBtn.jpg" />
</p>
<p><asp:DropDownList ID="facebookAlbumDropdown" runat="server" /></p>
<div id="facebookPhotosContainer" />
</div>
</div>
<div id="fb-root"></div>
</form>
<script type="text/javascript">
var photosContainerDivID = 'facebookPhotosContainer';
var loginButtonID = 'btnFacebookLogin';
var dCookieValues = null;
var accessToken = null;
var userID = null;
function FacebookJsSdkInitializedCallback()
{
// bind the login button
$('#' + loginButtonID).click(function () {
alert("inside $('#' + loginButtonID).click(");
LoginToFacebook();
});
}
I'm getting these errors now and I still don't know why. I've obviously now added a callback so I know that the Init is done. But I the code that I believe is loading the library into the page is failing:
$("fb-root").appendChild is not a function
[Break on this error] $('fb-root').appendChild(e);
So it's prob because the jQuery library was not loaded yet but this async method ran before it was loaded. So not sure then how to handle this. You can see my jQuery includes at the top.
As you are using async loading method for FB API, it is not getting loaded when you are calling it few lines later. You have two options:
1) Switch to synchronous loading method (see first example on this page)
2) Add some callback to window.fbAsyncInit() function so you know when API is loaded and ready to use:
window.fbAsyncInit = function () {
FB.init({ appId: facebookApplicationID, status: true, cookie: true, xfbml: false});
fbInitializedCallback();
}
function fbInitializedCallback() {
// WIRE UP EVENTS //
....
LoginToFacebook();
}
BTW if you choose to stay with async method you should really put that code right after opening <body> tag, it wouldn't slow down your page load.
加载中,请稍侯......
精彩评论