Hi
I am developing a widget that will be placed on an external website. The entire plugin has to be written in javascript. I haev searched here and there but am unable to make the facebook login button appear on the widget
My code is the following
var fbroot = document.createElement('div');
fbroot.id = "fb-root";
window.fbAsyncInit = function(){
FB.init('xxxxxxxxxxxxxxxxxx', '/xd_receiver.htm');
};
var contentRightDiv = document.createElement('div');
contentRightDiv.id = "contentrightdiv";
contentRightDiv.innerHTML = "<form><p><label>Sign in using <div id='socialmedialoginbtns'></div></label></p></form>";
var socialmedialoginbtns = document.getElementById('socialmedialoginbtns');
socialmedialoginbtns.innerHTML = '<fb:login-button show-faces="false" width="200" max-rows="1"></fb:login-button>';
If you are putting an XFBML tag on the document with javascript, use FB.XFBML.parse function to render the new tags.
Check This Code snippet....
`<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div><script type="text/javascript">`
window.fbAsyncInit = function() {
FB.init({appId: 'Your_App_ID', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({appId: 'Your_App_ID', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
getUserDetails();
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
login();
}
});
};
</script>
<fb:login-button
autologoutlink="true"
perms="email,user_birthday,status_update,publish_stream">
</fb:login-button>
</body>
</html>
Related
I googled for nearly 4 hours and am posting this.
I am trying to implement facebook login in my website.
The problem is login is working fine, after login it has to redirect to anther custom page,
its not redirecting but staying in the same page. Here is my code that am using.
<head>
<title>My Facebook Login Page</title>
<script src="//connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<div id="fb-root"></div>
<fb:login-button perms="email"></fb:login-button>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXX',
status : true,
cookie : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function() {
window.location = "about_us.html";
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<!-- <div class="fb-login-button" >Login with Facebook</div> -->
Kindly guide me where am wrong also if possible correct code
I had taken the code from below link.
Redirect after clicking on the Facebook login button, even if already logged in Facebook
Thanks in advance.
you can just add this somewhere
FB.login(function(response) {
if (response.authResponse) {
window.top.location = "http://www.foo.com";
}
});
When I put
window.top.location = "http://www.foo.com";
under
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
window.top.location = "";
});
it worked.
We just switched to new PHP SDK and JS today. but the problem is weird. When we dont use show-faces with perms attribute it doesnt show popup. Only way to get permission popup appear, we need to use show-faces attr.
is this a bug ?
<fb:login-button perms="email, publish_stream, offline_access, create_event, user_photos, user_online_presence, user_videos, user_website, user_events, user_relationships, user_interests" size="large">Sign Up With Facebook</fb:login-button>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo $facebook->getAppID() ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
(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>
Thanks
EDIT:
OMG. i just found the solution, with the new JS SDK we must use scope instead of perms attribute!
with the new JS SDK we must use scope instead of perms attribute!
Alternatively you can use straight Javascript and make your own buttons.
<script>
function addPermissions(permissions){
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:permissions});
}
</script>
<a onclick="addPermissions("email, publish_stream,...");">Click me</a>
I am new in facebook application. I have a problem with this application when it run on IE.
After login it redirect to search action (zend-framework), And then when i click button to redirect another action as well as same action. it destroy session.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $this->appid ?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setSize({width: 760, height: 980});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
HTML CODE
<div class="cross">
<a href="<?php echo $this->url(array('controller' => 'index', 'action' =>'search','cancel'=>'c'),'default',true) ?>">
</a>
</div>
please help me.
Thanks for considering.
In your controller, try adding this to your init() function.
$this->getResponse()->setHeader('P3P', 'CP="NOI ADM DEV PSAi COM NAV OUR OTRo STP IND DEM"');
It's a known problem with IE
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $this->appid ?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setSize({width: 760, height: 980});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
The FB.getLoginStatus function doesn't work for me for some reason - although it used to for some time.
Very basic code below, and the alert never popups - looks like FB.getLoginStatus never calls the supplied function.
Any ideas ?
<body>
<form id="form1" runat="server">
<div id="fb-root">
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({ appId: 'xxx', status: true, cookie: true, xfbml: true });
FB.getLoginStatus(function (response) {
alert("Hi there");
});
</script>
</form>
If your app is in Sandbox Mode see this bug: https://developers.facebook.com/bugs/240058389381072
Also read the comments by Philip Bulley
[...] Essentially sandboxed applications are invisible to non-app-developers. If there is no user currently logged into Facebook, Facebook will act as if your sandboxed application doesn't exist at all (FB obviously doesn't know you're an app developer, and thus the app is invisible!).
This bug has been confirmed and assigned.
In which platform you are developing the application??If it is FBML then check FBJS-Facebook JavaScript.I think alert will not work in FBML application.
I got this working..Just check
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'APP_ID', status: true, cookie: true, xfbml: false});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({appId: 'APP_ID', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
login();
}
});
};
Been running into an issue lately with Facebook canvas iframe applications. I've set our settings to "auto-resize" and implemented the correct FB JS call to do the resizing of the height (to avoid unwanted scrollbars), but it doesn't seem to be working.
Has anyone else had this issue or come up with a solution?
Thanks!
Erik
Before </body> tag, I have written following code.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo YOUR_APP_ID ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setAutoGrow(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>
And it is working fine for me.
It doesn't matter whether height is Fixed or Fluid in Advanced application settings.
FB.Canvas.setAutoGrow(true); was not working in my application, but I found that I missed the <div id="fb-root"></div> code. I just put it before <script type="text/javascript"> and got the issue resolved.
Expanding on a couple of points noted already:
window.fbAsyncInit = function () {
FB.init({
appId: 'YOUR APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setAutoGrow(true);
};
This will allow dynamic changes in the applications height. Also setting an explicit width in your css like so can help as well:
html {
width: 760px;
overflow: hidden;
}
FB.Canvas.setAutoResize will be deprecated and you should use FB.Canvas.setAutoGrow as it does exactly what you want.
Roozbeh is on the right path with his answer. However, his code will most likely produce an error (at least in Firefox), as both the old and new SDKs are being referenced (and they don't play well with each other).
Also, just using the new SDK to adjust the height is super simple:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true });
FB.Canvas.setSize({ height: 890 });
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
Official documentation available here.
Well ... auto-resize is buggy and only sometimes work
you can set it manually like this:
FB.Canvas.setSize({ height: $('body').height() });
If anyone is still having this problem, its because your FB.init() is never being called. In my case, I had it inside my jQuery document.ready function. dont do that!
Put this outside of your jQuery:
$(function() { ... jquery here... });
// do FB stuff
FB.init({appId: 'APP_ID', status: true, cookie: true });
FB.Canvas.setAutoGrow();
Auto-resize doesn't work. It's a major bug that facebook has not fixed yet.
However, here's the code work around for the problem:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<div id='FB_HiddenContainer' style='display:none;position:absolute;left:-100px;top:-100px;width:0;height:0'>
</div>
<script type="text/javascript">
window.onload = function(){
FB_RequireFeatures(['CanvasUtil'], function(){
FB.CanvasClient.setCanvasHeight('1500px');
});
};
</script>