FB.login is unresponsive - javascript

I am hitting a brick wall with this Graph API. I do not receive the alert box, yet the console shows no error. Might anyone understand what I'm doing wrong here?
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'XXX',
xfbml: true,
version: 'v2.6'
});
FB.login(function(response) {
// handle the response
alert(JSON.stringify(response));
}, {
scope: 'public_profile,email'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
alert(JSON.stringify(response));
};
</script>
</body>

Related

response returns as undefined in script which is written for facebook login

I want to add button to login with facebook in my web page.Also I use my own button.Because of that I write FB.login() method but it does not work correctly.Could you help me?
window.fbAsyncInit = function () {
FB.init({
appId:<%=fbApi%>,
cookie: true,
xfbml: true,
version: 'v3.1'
});
};
function facebookLogin2() {
debugger;
FB.login(function (response) {
debugger;
if (response.status === 'connected') {
console.log(response.name);
}
}, { scope: 'public_profile,email' });
};
(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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&autoLogAppEvents=1&version=v3.1&appId=********';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<button class="btn btn-facebook btn-lg" onclick="facebookLogin2()"><i class="fa fa-facebook fa-fw"></i>Facebook</button>

trigger 'This video can't be embedded.' facebook video

I try to trigger an facebook video error in javascript , I have this error in the player ( 'Unavailable
This video can't be embedded.' )
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'XXXXXXXXXX',
xfbml: true,
version: 'v2.5'
});
// Get Embedded Video Player API Instance
var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
if(msg.type === 'video') {
my_video_player = msg.instance;
}
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div
class="fb-video"
data-href="https://www.facebook.com/businessinsider/videos/10153852489789071/"
data-width="500"
data-allowfullscreen="true"></div>
How can I trigger when a video can't be play ?
In your facebook app dashboard, go to App review and make it public.

OnClick FB.ui not consistently executing

I have this script to get users to share my website in return for a coupon code to use in the shop.
I'm sure it was working fine. Now on some pages it wont execute until the page is refreshed.
It may not even be a script issue but I can't work it out.
Any ideas?
Here is my code.
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready(function() {
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXX',
xfbml : true,
version : 'v2.5'
});
$('#ShareForcouponcode').on('click',function(e) {
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'XXX',
link: 'XXX'
},
function(response) {
if (response && response.post_id) {
// the download link will be activated
$('#ShareForcouponcode').fadeOut();
$('#infotext').fadeOut();
$('#couponcode').fadeIn();
} else {
// do nothing or ask the user to share it
}
}
);
});
};
});
// Load the SDK
(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'));
</script>

FB Connect on click event

I need to make sure my Facebook Connect code runs on a click event, but no matter how I try I cannot get it to work. It has to be something simple but I just cannot figure it out. This is my latest attempt, however if I put an alert into the code after FB.Event.subscribe it never reaches it. The code does run from within document.ready, but I need it to run on a click event. The live URL is lovelyjubbly.info/en-GB/Gameplan.
<div class="facebookconnect">
<div id="fb-root"></div>
<script language="javascript" type="text/javascript" src="http://connect.facebook.net/#Thread.CurrentThread.CurrentUICulture.Name.Replace('-', '_')/all.js"></script>
<script type="text/javascript">
$(document).ready(function () {
window.FB.init({ appId: 'abc', status: true, cookie: true, xfbml: true });
});
function fbclick()
{
FB.Event.subscribe('auth.login', function (response) {
alert("loggedin");
var isUserAuthenticated = #User.Identity.IsAuthenticated.ToString().ToLower();
if ((response.status == 'connected') && (isUserAuthenticated == false)){
window.location.href = '#Account.Urls.FacebookConnect()';
}
});
}
</script>
<script>(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/" + #Thread.CurrentThread.CurrentUICulture.Name.Replace('-', '_') + "/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:login-button onclick="fbclick()" autologoutlink="false" perms="email" id="fbLogin">
</fb:login-button>
</div><br />
EDIT : Using live() method, still doesn't seem to work :
<div class="facebookconnect">
<div id="fb-root"></div>
<script language="javascript" type="text/javascript" src="http://connect.facebook.net/#Thread.CurrentThread.CurrentUICulture.Name.Replace('-', '_')/all.js"></script>
<script type="text/javascript">
$(document).ready(function () {
window.FB.init({ appId: 'abc', status: true, cookie: true, xfbml: true });
});
$("#fbLogin").live("click", function(){
FB.Event.subscribe('auth.login', function (response) {
alert("loggedin");
var isUserAuthenticated = #User.Identity.IsAuthenticated.ToString().ToLower();
if ((response.status == 'connected') && (isUserAuthenticated == false)){
window.location.href = '#Account.Urls.FacebookConnect()';
}
});
});
</script>
<script>(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/" + #Thread.CurrentThread.CurrentUICulture.Name.Replace('-', '_') + "/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:login-button autologoutlink="false" perms="email" id="fbLogin">
</fb:login-button>
</div><br />
Use
$(yourselector).live('click', function() {
//fb stuff
});
I can't quite remember why this works, but it certainly seems to.

Facebook Get locale

What am I doing wrong? - I'm trying to grab the user's locale from a facebook iframe tab to display relevant content based on location.
<script type="text/javascript">
(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#xfbml=1&appId=" + 'MY APP ID';
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function () {
if (location.protocol == 'https:') {
FB._https = true;
};
FB.init({
appId: 'MY APP ID',
status : false,
cookie : false,
xfbml : true,
width: 810
});
FB.Canvas.scrollTo(0,0);
FB.Canvas.setAutoGrow();
}
</script>
<script>
FB.login(function(response) {
if (response.authResponse) {
if ($.data.get('user').get('locale') = "en_GB") {
$("a").attr("href", "URL");
}
}
});
</script>
I don't know much about jQuery, but here's something that should work:
FB.login(function(response) {
if (response.authResponse && response.authResponse.user.locale == "en_GB") {
$("a").attr("href", "URL");
}
});
Edit
Oh yeah.
The loading of the fb sdk is asynced, and so you need to use the FB namespace only after the fbAsyncInit method was called.
Try this:
window.fbAsyncInit = function () {
if (location.protocol == 'https:') {
FB._https = true;
};
FB.init({
appId: 'MY APP ID',
status : false,
cookie : false,
xfbml : true,
width: 810
});
FB.Canvas.scrollTo(0,0);
FB.Canvas.setAutoGrow();
FB.login(function(response) {
if (response.authResponse && response.authResponse.user.locale == "en_GB") {
$("a").attr("href", "URL");
}
});
}
(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#xfbml=1&appId=" + 'MY APP ID';
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
Just be aware that FB.login tries to popup a new window and since in this code the method is not being called due to a user action, the browser will probably block the popup.

Categories

Resources