Having spent hours trawling the web I have found many posts related to this but none seem to work, even some 'working' examples on jsfiddle appear not to work!
I want to register when a user clicks 'like' on my web page.
The 'like' link appears and indeed it pops up a new window for you to log into facebook. But I cannot subscribe to the 'edge.create' event. I know the sdk is loading ok because I can subscribe to the 'xfbml.render' event.
Some posts say that you must have an appId for this to work [I do] but others claim that it works without.
Here is my code:
One point to note is that I am currently running this under //localhost:57477, so I have set the like href to google.com. I did note that one of the posts indentified a recent facebook bug where this event didn't fire if the href domain didn't match that of the web page, but this is now marked as 'fixed'.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
//console.log('window.fbAsyncInit');
FB.init({
appId: 'myappid',
status: false,
cookie: false,
xfbml: true
});
//Additional initialization code here
FB.Event.subscribe('edge.create',
function (response) {
//console.log('edge.create');
alert('edge.create');
}
);
FB.Event.subscribe('xfbml.render',
function (response) {
//console.log('xfbml.render');
alert('xfbml.render');
}
);
};
// 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>
<div href="http://google.com" class="fb-like" data-send="false" data-width="450" data-show-faces="false" data-font="verdana"></div>
I know this is old thread, but i came here with the same problem.
The thing that worked for me is that Facebook AppID must belong to a domain (set it in Facebook App settings) in which your site stands - localhost won't work then.
Your code looks good to me, I think the problem is in the FB.init() options.
This is what I use:
{
appId: 'myappid',
authResponse: false,
channelUrl: "http://url-to-my-channel-url.com",
cookie: true,
oauth: true,
status: true,
xbfml: true
}
With these init options, I am able to use edge.create to track when someone clicks the Like button.
Related
with upgrade of Firefox to 42.0 I got some strange behavior..
I'm calling FB.init method like this:
FB.init({
appId: '{$appid}',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
But in Firefox it gets blocked, I get warning:
The resource at "https://connect.facebook.net/en_US/all.js" was blocked because tracking protection is enabled.
This is default behavior, I didn't set up any additional security or whatever..
What to do?
EDIT - after help and googling, this is a little bigger problem:
Turns out Firefox's Do Not Track and tracking protection are two separate things:
Do Not Track is enabled in Preferences/Options > Privacy > "Tell sites that I do not want to be tracked". Enabling sends the DNT header but it does not block any requests.
Tracking Protection is enabled in about:config > privacy.trackingprotection.enabled. Enabling does not send the DNT header, but does block requests based on Disconnect's blocklist. So detecting 2 isn't as easy as checking navigator.doNotTrack, because that property is only set for 1.
Solution (temporarily) - try to do FB.init, if error do some alert..
try {
FB.init({
appId: '{$appid}',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
}catch(err) {
alert('Some info for the user...');
}
Does anyone have better solution?
A simple google search leads to this page: https://developer.mozilla.org/en-US/Firefox/Privacy/Tracking_Protection
You should be able to deactivate that feature right where the message appears, or via about:config. It should actually be deactivated by default afaik.
From the client side, you can't. This is security policy Firefox. You can read about this issue in thread: https://bugzilla.mozilla.org/show_bug.cgi?id=1226498
If any one is coming to this post to find how to handle this error. I think this answer may help.
(function (d, s, id) {
let js,
fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
//here goes the error handling
js.onerror = (e) => {
//here we can handle the error
//we can show the user why the page isn't loading correctly
}
js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');
A way to go about it is checking whether the FB object exists after all script resources have been loaded. In this way we are covered regardless of what caused the script load failure:
$(window).on("load", function() {
// If Facebook SDK failed to load ...
if (typeof FB === "undefined") {
// ... then change interface/set global variable to handle missing FB
}
});
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.
I have the following code to start facebook SDK on the site (warning, stripped some functions out, and removed namespaces because they don't add to this discussion):
var facebookAppId = "501843009849438";
var facebookEvents = (function(){
var facebookHasLoaded = false;
var asyncLoadFacebook = function() {
// exposed to window because it is called by facebook
window.fbAsyncInit = function() {
FB.init({
appId : facebookAppId, // App ID
channelUrl : '//'+location.host+'/nl/recommendations/facebook/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
});
};
// Load the SDK asynchronously
(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'));
facebookHasLoaded = true;
};
return {
enable: function() {
if (!facebookHasLoaded) {
jQuery('body').append('<div id="fb-root" />');
asyncLoadFacebook();
}
}
};
})();
// If there are no fb-like's found, we don't auto-start and you should manually load .enable().
jQuery(document).ready(function(){
if (jQuery('.fb-like').length !== 0) {
facebookEvents.enable();
}
});
This javascript is placed in a file that is loaded on every page of the site. Because we don't want to load the SDK on every page, the check has been added on 'document.ready'.
What have I done to try and fix it
I have placed breakpoints in Chrome, and it nicely gets into the asyncLoadFacebook function. I also get an iframe inside my div on a page. Tried developers.facebook.com. Also read a lot of fora around the interwebs. Double checked the appId via facebook graph, it is the right appId.
HTML for the like button
This is the div I use to show the like button:
<div class="fb-like" data-href="${canonicalURLEncoded}" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false" data-font="verdana"></div>
The only thing "wrong" when loading pages is that I see a lot of error messages like:
Blocked a frame with origin "http://****************" from accessing a frame with origin "https://s-static.ak.facebook.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
But I never use http or https in the code when calling some script url (as you can see in the script sample). The pages with like buttons are in http. Plus, google plus gives the same logs in the console, but the plusone buttons just works like it should.
Inline is not possible
Unfortunaly I cannot just deploy and test around. Especially inline javascript (right after the body) is NOT an option. I really want the async version to just work..
Something starange is happening when trying to login to facebook with the javascript SDK on mobile Safari and Android browser. When I clear both my 'history' and my 'cookies and data' and try to login to Facebook using the FB.login method, Safari and Android browser open a new tab with the auth url but stays blank. In all the desktop browsers, everything works just fine.
The strange thing is, is that when I clear my 'history' and my 'cookies and data', then visit facebook.com (not logging in or anything), close the site, open my site and then try to login to FB, it actually works like it should!
So this seems like facebook.com sets a cookie which causes the authentication URL to succesfully load.
I have looked all over for a solution for this problem but couldn't find anything and thus my first stackoverflow post...
Just to be complete, this is the code I use to init the FB SDK:
window.isFacebookSDKLoaded = false;
window.onFacebookSDKLoaded = function () {}; //is injected with a function from another js app on the site
window.fbAsyncInit = function() {
FB.init({
appId : '{{ appID }}', // App ID
channelUrl : '{{ baseUrl }}channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
window.isFacebookSDKLoaded = true;
window.onFacebookSDKLoaded();
};
(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));
Someplace else in my app I just simply do:
(using google closure)
mm.controller.facebook.DoFBLogin.prototype.doLogin = function ()
{
FB.login( goog.bind( this.loginResult, this ), { scope: app.Config.getFBPermissions() } );
}
mm.controller.facebook.DoFBLogin.prototype.loginResult = function ( result )
{
// logged in
};
If someone has a solution... Thanks in advance!
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