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/facebookLoginBtn.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.