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.
Related
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>
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>
I have prefered given answer of stackoverflow question
Like button will not fire edge.create or edge.remove .
But I am getting following error when see in developer tool console in crome browser
"Uncaught ReferenceError: FB is not defined fb.php:20
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains."
code is as follow
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<html xmlns:fb="http://ogp.me/ns/fb#">
<body>
<div id="fb-root"></div>
<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/en_US/all.js#xfbml=1&appId=xxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
FB.Event.subscribe('edge.remove',
function(response) {
alert('You UNliked the URL: ' + response);
}
);
</script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
</body>
</html>
How can resolve it please help me.
Thanking you.
You have not initialized the FB.init(), without which you can not make API calls-
window.fbAsyncInit = function() {
FB.init({
appId : '510509449056378',
status : true,
xfbml : true
});
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
FB.Event.subscribe('edge.remove',
function(response) {
alert('You UNliked the URL: ' + response);
}
);
};
(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=510509449056378";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<!DOCTYPE html>
<head>
<title>
Like Box example
</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '{APP_ID}'
});
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
FB.Event.subscribe('edge.remove',function(response) {
alert('You UNliked the URL: ' + response);
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; //js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId={APP_ID}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!--Like BOX-->
<fb:like-box href="https://developers.facebook.com/docs/plugins/" colorscheme="light" show_faces="false" header="false" stream="false" show_border="false"></fb:like-box>
</body>
</html>
html:
<div id="fb-root"></div>
js:
$(document).ready(function(){
window.fbAsyncInit = function() {
FB.init();
FB.getLoginStatus(function(response){
runFbInitCriticalCode();
console.log(response);
});
};
(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/ru_RU/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
After the code executes, the div is filled with iframes and other facebook tags, but it's empty. I don't see anything in the page, so what can be the problem?
Replace facebook-jssdk with fb-root in js file second last line in given code.
(document, 'script', 'fb-root'));
Try this code:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
if(typeof(FB) != 'undefined') {
FB.init({
appId: facebookAppId, xfbml: true, status: true, cookie: true, oauth: true
});
}
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
In my case facebookAppId is a JavaScript variable with your Facebook application id. You need to create one here. Only after this you can take advantage on their JS API.
More info here.
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.