Is there any working solutions to prevent Facebook Like Box to not breaking his container or something ? Have set the async to TRUE but still gets out. As I can see on stackoverflow there are issues only for fb:login_button, however I receive the same warning to console:
fb:like_box failed to resize in 45s
To sum up, here is my code, perhaps I am missing something.
HTML Tag
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
FB Initialization
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: <?php echo $this->config['facebook']['appId']; ?>,
status: true,
cookie: true,
xfbml: true
});
/* All the events registered */
FB.Event.subscribe('auth.login', function (response) {
// do something with response
alert("login success");
});
FB.Event.subscribe('auth.logout', function (response) {
// do something with response
alert("logout success");
});
FB.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
alert("login success");
}
});
};
(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>
FB Like Box
<div class="facebook-plugin">
<div class="fb-like-box" data-href="https://www.facebook.com/****" data-width="346" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
</div>
This is it. Any help would be appreciated. Thanks in advance!
Accordingly to new Facebook API upgrade, they give up to Like Box, therefore this is no longer an issue.
With the release of Graph API v2.3, the Like Box plugin is deprecated. Please use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.
If you do not manually upgrade to the Page Plugin, your Like Box plugin implementation will automatically fall back to the Page Plugin by June 23rd 2015.
Page Plugin link is https://developers.facebook.com/docs/plugins/page-plugin
Related
I am new to Aurelia and have some background in Javascript. In particular, I am taking inspiration from https://blog.rackspace.com/part-2-building-serverless-architecture-aws and https://github.com/auth0/aurelia-quote-app to build a merge of two.
I am able to successfully to make call to AWS Cognito and get different validation results. I know that these are successful by having the developer console open in firefox to monitor console.logs for different scenarios.
For example I get different responses in console.log:
users that exist in Coginto but wrong password: "NotAuthorizedException: Incorrect username or password."
Users that don't exist in Cognito: "UserNotFoundException: User does not exist."
Users with correct password: get the JWT token
In my login.html, I intend to display the login error through the ${loginError} variable
-- login.html
<form role="form" submit.delegate="loginUser()">
...
<button type="submit" class="btn btn-default">Login</button>
</form>
...
<div class="alert alert-danger" >${loginError}</div>
...
so that I can display the exceptions that occur in login.ts through the html by binding
In my login.ts, I call cognitoUser.authenticateUser in the following manner.
--login.ts
export class Login {
...
isUserAuthenticated = false;
...
loginError = '';
...
loginUser() {
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
console.log(result);
this.isUserAuthenticated = true;
location.assign('#/home');
},
...
onFailure: function(err) {
console.log(err);
this.loginError = err;
this.isUserAuthenticated = false;
}
...
When this.loginError is set to err, it is not reflected in the html. This is likely because of the nature of the call-back functions in Javascript...I am trying to get my head around how to solve this; given that the html needs to display the loginError and the actual error comes out of a callback function in authenticateUser. I am confident that this.isUserAuthenticated will face the same issue.
On the positive side, when the login is successful, the location.assign('#/home'); does get executed (even if this.isUserAuthenticated = true; does not get reflected in the main login.ts)
Thank you in advance for your help
Answering my own question, thanks to help from Callback function in aurelia js
Essentially use the ES6 and arrow functionality for access to the "this".
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: (result) => {
console.log(result);
this.isUserAuthenticated = true;
location.assign('#/home');
},
...
onFailure: (err) => {
console.log(err);
this.loginError = err;
this.isUserAuthenticated = false;
}
});
I need to integrate One Driver file picker in my website. I am using this js lib to do the task.
<script type="text/javascript" src="//js.live.net/v5.0/wl.js"></script>
The code I wrote is
WL.init({ client_id: "000000004C1xxxxx", redirect_uri: 'https://xxx.net/' });
WL.login({
scope: "wl.skydrive wl.signin"
}).then(
function(response) {
WL.fileDialog({
mode: "open",
select: "multi"
}).then(
function (response) {
},
function (responseFailed) {
}
);
},
function(response) {
log("Failed to authenticate.");
}
);
It showed the popup window, and went through the authentication process. However once I've logged in within the popup window. It just redirected to the redirect URL I provided, the file picker never showed. Any ideas?
I solved this issue by including the js script in my callback page, wl sdk will automatically handle the oauth process for you.
<script type="text/javascript" src="//js.live.net/v5.0/wl.js"></script>
It's weird as I could not find any documents related to how you should do with your callback page on MS developer website.
Can you get the "Using the open from OneDrive picker" sample working on http://isdk.dev.live.com?
Use the function below in your js file and don't forget to include :
<script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js"></script>
function launchOneDrivePicker() {
var odOptions = {
clientId: "*******************************",
action: "download",
multiSelect: true,
openInNewWindow: true,
advanced: {
queryParameters: "select=id,name,size,file,folder,photo",
redirectUri: (Eneter your default url e.g :)"http://localhost:60666/WebForm1.aspx"
},
success: function (response) { /* success handler */ },
cancel: function () { /* cancel handler */ },
error: function (e) { /* error handler */ },
};
OneDrive.open(odOptions);
}
I hope it works for everyone thanks.
I've started a new Visual Studio 2012 Express Web project using the HotTowel SPA template. I'm not sure where I should be placing the code to load the Facebook SDK within the HotTowel structure?
I've tried main.js, and shell.js but I can't seem to get the sdk to load. Facebook says to put the below code to load the sdk asynchronously
window.fbAsyncInit = function () {
// init the FB JS SDK
FB.init({
appId: '577148235642429', // App ID from the app dashboard
channelUrl: '//http://localhost:58585/channel.html', // Channel file for x-domain comms
status: true, // Check Facebook Login status
xfbml: true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// 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/debug.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Create a module in a file called facebooksdk.js that contains this code. Then "require" the code in the boot sequence, if you want it to load right away.
It is not easy to use to use Facebook SDK with Durandal.
Facebook offers instructions how to set it up with require. But sounds like that method is not supported in Durandal.
I made my dirty version by wrapping global FB object with vm supporting knockout. You could easily use that and bind to any properties like users name.
Include that facebook.js from shell.js to make sure it is loaded when app starts.
Here is my facebook.js:
define(['services/logger'], function (logger) {
var vm = {
facebook: null,
initialized: ko.observable(false),
name: ko.observable(""),
picturesrc: ko.observable(""),
login: login,
logout: logout
};
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function () {
window.fbAsyncInit = function () {
vm.facebook = FB;
vm.facebook.init({
appId: '160000000000499',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
vm.initialized(true);
vm.facebook.getLoginStatus(updateLoginStatus);
vm.facebook.Event.subscribe('auth.statusChange', updateLoginStatus);
};
});
return vm;
function login() {
vm.facebook.login( function(response) {
//Handled in auth.statusChange
} , { scope: 'email' });
}
function logout() {
vm.facebook.logout( function (response) {
vm.picturesrc("");
vm.name("");
});
}
function updateLoginStatus(response) {
if (response.authResponse) {
logger.log("Authenticated to Facebook succesfully");
vm.facebook.api('/me', function (response2) {
vm.picturesrc('src="https://graph.facebook.com/' +
+response2.id + '/picture"');
vm.name(response2.name);
});
} else {
logger.log("Not authenticated to Facebook");
vm.picturesrc("");
vm.name("");
}
}
});
I have not tested my code properly. But atleast logging in and fetching name worked fine in Chrome.
Remember change appId and update proper domain at developers.facebook.com.
Actually, I am making a simple page in Symfony2.2. I've got the following codes in a twig template:
<!-- facebook link -->
<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=297720976910223";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>
<!-- end facebook link-->
They successfully do the following:
display a facebook login button on my page.
when I click on the button, I can enter my Facebook account.
I get my Facebook name displayed on my page.
Now what I wish to do is: After having entered a valid Facebook account on the Facebook popup, once I get back on my page, I can alert somthing. For example something like:
function after_click() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("Facebook user is connected");
}
});
..The problem is that I don't exactly how it works. I have tried several options in my codes and searched the net, but in vain.
Any one could explain me the principles for the above and guide me through?
(PS: My final objective is to replace the 'alert' code by a code which redirects the user to another page.)
Thank you alots.
#Thomas, thank you for your answer.. But I really don't understand why the following gives me an alert only when the btnTest is clicked (alert="You clicked on me for a test.."); other alerts are never displayed:
<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '297720976910223', // App ID from the App Dashboard
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?
});
// Additional initialization code such as adding Event Listeners goes here
FB.Event.subscribe('auth.login', function(response) {
alert("test connection");
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
alert("connected");
} else if (response.status === 'not_authorized') {
// not_authorized
alert("not authorized");
} else {
// not_logged_in
alert("not logged in");
}
}, true);
};
function testme()
{
alert("You clicked on me for a test..");
FB.getLoginStatus(function(response) {
alert("xxx_");
if (response.status === 'connected') {
// connected
alert("connected");
} else if (response.status === 'not_authorized') {
// not_authorized
alert("not authorized");
} else {
// not_logged_in
alert("not logged in");
}
});
}
// Load the SDK's source Asynchronously
// Note that the debug version is being actively developed and might
// contain some type checks that are overly strict.
// Please report such bugs using the bugs tool.
(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));
</script>
<fb:login-button onlogin="testme()" autologoutlink='true' perms='email,user_birthday,status_update,publish_stream'></fb:login-button>
<!-- Just for testing purposes-->
<button type="button" name="btnTest" onclick="testme()">Test</button>
<div class="fb-login-button" data-show-faces="true" onlogin="testme()" data-width="200" data-max-rows="1"></div>
</body>
</html>
PS: On facebook dev website its written:
Prerequisites:
You'll need somewhere that lets you host HTML files online. If you haven't got one, you can get set up quickly at no cost with Heroku.
I'm testing that file on my PC; does that make a difference..?
The function FB.getLoginStatus only tells you, whether the user is authenticated with your application, not if he just logged in.
You can register a listener on login status change to connected:
FB.Event.subscribe('auth.login', function(response) {
// handle the login
});
More info on FB JavaScript SDK Events.
I moved to omniauth-facebook and it is working wonderfully. I've been trying to use popups for the login button but I can't get it to work.
I followed the example on https://github.com/mkdynamic/omniauth-facebook/blob/master/example/config.ru for a rails app.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '#{ENV['APP_ID']}',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
};
(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));
$(function() {
$('a').click(function(e) {
e.preventDefault();
FB.login(function(response) {
if (response.authResponse) {
$.get('/auth/facebook/callback');
}
}, { scope: '#{SCOPE}' });
});
});
</script>
<p>
Connect to FB
</p>
It almost works: clicking on the link will display the popup and I get authenticated, but when the popup closes I remain on the login page, even though I can see in the logs that the destination page is processed, and if I click on a link that's available both to guests and members, I will get the member version, another proof that the login worked.
So why isn't the browser redirected even though the login is successful ? Should I modify something in the controller method that logs the user in (like a "respond_to" with a special format) ?
Thanks
When a user logs in via FB.login the dialog closes and the user goes back to the main window, and the callback is invoked.
In your callback you do $.get('/auth/facebook/callback');, which is an ajax call.
Where's the redirect?
Add :authorize_params => { :display => 'popup' } to the provider info for facebook in your initializer.