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.
Related
I am new to Javascript and am try to follow the Facebook steps to display fan_count (likes) on my webpage. I have done the following but for the life of me can't work out how the count is displayed.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '231179987472162',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
};
(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_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<h1>Hello, world!</h1>
<script>
FB.api(
'/cityviewshopping',
'GET',
{"fields":"fan_count"},
function(response) {
// Insert your code here
}
);
</script>
I do include facebook snippet like so
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'someAppId',
cookie : true,
xfbml : true,
version : 'v2.8'
});
};
(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>
Then, somewhere in my code, i will be doing something like
FB.foo.bar();
How i know when the script has done loading and therefore the FB object does exists?
That is what window.fbAsyncInit is for, the JavaScript SDK is loaded when you hit that callback function. You can use FB right after FB.init.
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>
window.fbAsyncInit = function(){
FB.init({
appID : 'my app id is here',
channelUrl : '//myappname.herokuapp.com/channel.php',
status : true,
cookie : true,
xfbml : true,
frictionlessRequests: true
});
// Additional auth
};
(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'));
Ok so, that's my scripts.js file, and I HAVE included fb-root to my pagebody, for some reason when loading the page, its logging:
FB.getLoginStatus() called before calling FB.init().
Twice, in the call to all.js line 52, any ideas whats going on?
This is how i make it:
window.fbAsyncInit = function () {
if (FB.init) return;
// init the FB JS SDK
FB.init({
appId: 'your app ID', // App ID from the App
//channelUrl: '//' + window.location.hostname + '/channel.html',
//This to get the user details back from Facebook
//scope: 'id,name,gender,user_birthday,email', etc
status: true, // 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?
});
}
At the end of HTML Body...
<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.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
...Or maybe you might use fb embeded iframe
Facebook Like Button Reference
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.