When attempting to use the Facebook JS SDK, I keep running into the error FB undefined.
When I watch it through the JavaScript debugger on IE it runs through correctly during the page load, then at the end it is just undefined and no events that are subscribed to fire.
The goal: to make a page tab refresh the top most level page, to get past the fan gate.
Any ideas on what I am missing here?
Code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
FB.init({
appId : 'APP CODE INSERTED HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'URL to Channel .ASPX'
});
// Additional initialization code here
FB.Event.subscribe('edge.create',
function(response){
top.location.href = 'Page to refreshed inserted here';
});
};
(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>
Your JavaScript to load the SDK Asynchronously doesn't match what the Facebook SDK documentation currently shows. See below:
// 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));
Both blocks of JavaScript to load the SDK are very similar. Your JavaScript uses:
d.getElementsByTagName('head')[0].appendChild(js);
To load the SDK. The most current version as documented by FB uses:
ref = d.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(js, ref);
Your version adds the source reference to load the FB JavaScript by appending to the HEAD HTML tag. The most current version does this by finding the first SCRIPT reference and inserting the FB reference before that reference.
Perhaps your issue is caused by the subtle differences between these two methods.
One way to rule this out would be to temporarily hard code the loading of the FB JavaScript synchronously by placing the following HTML into your page's header:
<head>
<script type="text/javascript" src="http://connect.facebook.net/en_us/all.js"></script>
.
.
.
</head>
Related
I have two apps on my webisite
Customer Chat plugin (taken from Facebook Fan Page)
Facebook login app
Fist one loads
js.src = '//connect.facebook.net/en_EN/sdk/xfbml.customerchat.js';
Second one loads
js.src = "//connect.facebook.net/en_EN/all.js#xfbml=1&version=v3.3&appId=MYFACEBOOKID";
Both apps won't work together - if one work tne other dont.
So if Faecbook login SDK will load as first then Customer chat throw's that console notice:
The CustomerChat plugin is no longer part of the main Facebook SDK.
To continue using it please use the correct SDK URL,
meaning replace sdk.js with sdk/xfbml.customerchat.js.
For more details see https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk
Otherwise if only Customer chat is loaded then
FB.login() called before FB.init().
occur...
Ideas?
That piece of code is from Customer Chat plugin (generated by FB in Fan Page settings).
I have added one part of FB.init from Facebook login plugin inside as below:
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.3'
});
};
// added part START
window.fbAsyncInit = function() {
FB.init({
appId : 'MYAPPID', // Facebook login
cookie : true,
xfbml : true,
version : 'v3.3'
});
};
// added part END
(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/lt_LT/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Both plugins started to work.
i'm having a problem with creating "invite your friends to this page"- button. I'm using static html iframe- application and i'd like to implement a button, which users can click and invite their friends to that same iframe tab. So, how can i implement such a button? i've tried alot of things, but can't seem to get this one work. Thanks in advance for the answers : )
i've tried things like the following:
window.fbAsyncInit = function() {
FB.init({
appId: "YOUR_APP_ID",
status: true,
cookie: true
});
// 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));
function invite() {
FB.ui({
method: "apprequests",
message: "Check out my great app"
}, inviteCallback);
}
function inviteCallback(response) {
console.log(response);
}
and i've tried to use the page id as app id but it's not working. Is there a way to use url instead of app id?
The error you mentioned in the comments indicates that you did not set up a platform in the App settings. Open the "Settings" tab in your App settings and click on the "Add Platform" button to add a platform (most likely "Website"). Enter the URL of your App in the "Site URL" input field.
Below is how Facebook recommends adding their JS SDK to your source.
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
status : true,
xfbml : 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/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
If I understand correctly, the Second part of the code, creates a <script></script> node in the DOM and sets the source to //connect.facebook.net/en_US/all.js
Why does window.fbAsyncInit function come before that and not after? Won't the browser try to run it before it actually gets to the second part of the code where the SDK is actually loaded? Is it possible that all.js is loaded in the DOM only after FB.init() is called, thus generating an error?
Why does window.fbAsyncInit function come before that and not after?
You can write this code anywhere in you wish.
Won't the browser try to run it before it actually gets to the second part of the code where the SDK is actually loaded?
window.fbAsyncInit is triggered after the SDK is loaded asynchronously, so it doesn't matter where you write this- before/after or anywhere.
Is it possible that all.js is loaded in the DOM only after FB.init() is called, thus generating an error?
What error? Btw, all.js cannot be loaded after FB.init. It's the reverse process- FB can be initialized only after the SDK is loaded! Once the SDK is loaded it will automatically come inside- window.fbAsyncInit = function() {
I'm putting Tweet and Facebook Like buttons on the project im working. Everything seems to be working but when click the btns I get this JS error:
Unsafe JavaScript attempt to access frame with URL http://platform.twitter.com/widgets/tweet_button.1357735024.html#_=1357834238249&count=none&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fwww.sandals.com%2Fmain%2Fnegril%2Fne-home.cfm&size=m&text=Negril%2C%20Jamaica%20All%20Inclusive%20Vacation%20-%20Sandals%20Negril%20Beach%20Resort%20%26%20Spa&url=http%3A%2F%2Fwww.sandals.com%2Fmain%2Fnegril%2Fne-home.cfm&via=SandalsResorts from frame with URL http://www.facebook.com/plugins/like.php?locale=en_US&app_id=150389325070106&href=www.sandals.com/main/negril/ne-home.cfm&send=false&layout=button_count&width=60&show_faces=false&action=like&colorscheme=light&font&height=21. The frame requesting access set 'document.domain' to 'facebook.com', the frame being accessed set it to 'twitter.com'. Both must set 'document.domain' to the same value to allow access.
this is the code im using for fb and twitter
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '150389325070106', // App ID from the App Dashboard
channelUrl : '//www.sandals.com', // Channel File for x-domain communication
status : false, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true, // parse XFBML tags on this page?
frictionlessRequests: true
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
(function(d, debug){
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" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
// Twitter Btn JS
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
i followed the steps in fb dev site but still get those errors :S
As you can read in the linked answer, this is an issue with Twitter's API. Alternatively to the answer on the linked question, I created a custom tweet button that looks exactly like the one of Twitter's JS API but doesn't use it and still includes the share count. Feel free to use it.
Demo: http://fiddle.jshell.net/eyecatchup/Th6P2/2/show/
Code: https://github.com/eyecatchup/tweetbutton
I use the following code to initialize Facebook. After I changed many many things in a separate Javascript file that is loaded by the HTML page, I get an Uncaught Syntax Error inside the Facebook script (which is embedded in the HTML page in the following form), but I do not know the reason for this error and what causes it.
fbAsyncInitDone = false;
window.fbAsyncInit = function() {
FB.init({
appId : '{{app_id}}',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
//fillinFriends();
fbAsyncInitDone = true;
};
(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));
How can I make all.js work again? I think this error is related to Chromium, because Firefox still works. I badly need a working Facebook Javascript, because it is used by several Facebook elements on the page.