I'm trying to replace my PHP login for my canvas app with a JS one and have copied the Facebook example almost exactly from here https://developers.facebook.com/docs/reference/javascript/ and here https://developers.facebook.com/docs/reference/javascript/FB.login/. However even though the alert prompt is opening the prompt for the user to accept the permissions isn't. Can anyone see why from the code below? I've been at this for hours now and I can't see how my code really differs from what was suggested. Could it have something to do with the browser protection not running javascript?
<?php
require_once 'config.php'; // This contains app information
//include_once 'scripts/mysql_connect.php'; // This is the database connection configuration
require_once 'Database.php';
$fbconfig['appUrl'] = "https://localhost/FindAFlatmate-Dev/";
?>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Profile Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '127865210690483', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
alert('Api loaded');
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
};
// Load the SDK Asynchronously
(function(d){
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.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
</html>
However even though the alert prompt is opening the prompt for the user to accept the permissions isn't. Can anyone see why from the code below?
You are calling FB.login directly on page load, with no user interaction – so it’s most likely your browser’s popup blocker that is preventing the login dialog from showing at all.
The general recommendation for FB.login is to call it only on explicit user interaction, like the user clicking on a link/button that says “login” or something. This way the popup FB.login opens is less likely to be blocked, since the default configuration for popup blockers in current browsers is to block only popups that are opened “automatically” without the user requesting them in any way.
Related
I am struggling with a Facebook login popup being blocked by the browser. I am using the fb-login-button html code to initialize FB login process, as specified below:
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="true" data-auto-logout-link="false" data-use-continue-as="true" data-scope="user_friends, email, public_profile"></div>
I am initializing facebook JS in a regular way as specified in the FB documentation:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myAppID',
cookie : true,
xfbml : true,
version : 'v2.11'
});
FB.AppEvents.logPageView();
fbApiInit = true; //init flag
};
(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>
But whenever a user clicks the 'Continue with Facebook' button the popup gets blocked by the browser.
Has anyone encountered a similar problem? Does anyone has a suggested solution? (I am aware that browsers block popups if not directly prompted by the user but I struggle where should I even check/modify how the login process is triggered with the html fb-login-button)
EDIT
I have deployed a fragment of the site (login page) to a test URL within GAE: https://udacity-test-helloworld.appspot.com/login . If successful should redirect to a page with 'Test Main Page'.
Many, many thanks in advance,
Mateusz
Modern browsers blocks client side popups untill you give the permission to open. You can use something like php-sdk to redirect the user in another blank page, making the same action (login), and that avoid the javascript popups blocking.
Blocking popups it is a browser features so, like luschn wrote in the comments you should rely on the browser.
heres the php-sdk for facebook: https://github.com/facebook/php-graph-sdk
heres the documentations: https://developers.facebook.com/docs/reference/php/
hope it helps ;)
I am trying to integrate Facebook login plugin that shows profile pictures of friends who are used the same application. For that i tried the following code,
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '***', // App ID
channelUrl : 'http://www.***.in/', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
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 = "js/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-login-button" data-show-faces="true" data-width="500" data-max-rows="1"></div> </div>
</body>
</html>
This code works fine. On login it shows profile pictures of friends who are using the same application. On clicking each foto (profile picture of friend), it navigate to their facebook pages respectively. But my requirement is that, on clicking the foto it should redirect to different url. Is it possible?
Help me please,
Thank you.
On clicking each foto (profile picture of friend), it it navigate to their facebook pages respectively. But my requirement is that, on clicking the foto it should redirect to different url. Is it possible?
No, it’s not.
Like most of the other social plugins, the Login button gets rendered inside an iframe loaded from facebook.com, and the Same Origin Policy prevents you from interacting with content from a different domain via JavaScript.
I am trying to create a simple HTML Facebook tab for my page, but I can't seem to find a fix for how to change the max height of the tab.
I should mention that I'm a beginner in coding, I know very basic HTML, but I've tried to avoid JavaScript since I have no experience with that whatsoever.
Unfortunately it seems like I can't do this without JavaScript, so my problem is most likely me doing something wrong.
The code looks something like this (the rest of the codes, including closing HTML-tags comes after the JavaScript part, and is working fine).
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '***********', // App ID
channelUrl : '//**********', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
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.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setAutoGrow();
</script>
I've pretty much copied the Javascript SDK from Facebook's developer pages and then found a small piece of code that should automatically set the height. I've googled for answers, but haven't been able to find anything that could fix this (or explain it in a way that an absolute newbie like me would understand).
Hope you can help me out.
//Frederik
Since You mentioned you know very basic html I assume you are not aware of the CSS possibilities as well, so I suggest you to replace this:
<div id="fb-root"></div>
with this:
<div id="fb-root" style="max-width: 100px;"></div>
Move this code FB.Canvas.setAutoGrow(); inside fbAsyncInit function, Example:
window.fbAsyncInit = function() {
FB.init({
appId : '***********', // App ID
channelUrl : '//**********', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoGrow();
};
If you want to set the size manually, you could do by using FB.Canvas.setSize() function:
FB.Canvas.setSize({height: 800});
Change the above number 800 to whatever size you want it to increase.
I've been working tirelessly for the last eight or so hours trying to format my Wordpress blog in a way that means that a user can click a button and publish the article to a ticker, by using the Open Graph settings for Article.
I have been using the tutorial found here.
Unfortunately, I have not been able to complete it as every time I click the "Publish" button I have created, I get an error message pops up.
When using Facebook's debugger I see no problems and all the necessary tags are in place (I have a plugin that does it for me, which is perfect).
Here are the alterations I have made to my header.php file to fit in with the tutorial:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
Added the following before </head>:
<script type="text/javascript">
function postArticle()
{
FB.api(
'/me/[NAMESPACE]:read?Article=<?php get_permalink() ?>',
'post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Successful! Action ID: ' + response.id);
}
});
}
</script>
Placed a login button clearly that asks permission:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[APPLICATION ID]', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(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));
</script>
<fb:login-button perms="email,publish_actions,user_actions.news">
Login with Facebook
</fb:login-button>
And finally placed the following at the point on the page where I want the button to appear:
<fb:add-to-timeline></fb:add-to-timeline>
<form>
<input type="button" value="Publish" onclick="postArticle()" />
</form>
On my Open Graph settings, I have the action type 'Read' as well as the object type 'Article'.
How come this isn't working for me?
Its works for me, trough that tutorial.
Did you add opengraph tags in your Head Section, like..
<head prefix="og: http://ogp.me/ns# [YOUR_APP_NAMESPACE]:
http://ogp.me/ns/apps/[YOUR_APP_NAMESPACE]#">
<title>OG Tutorial App</title>
<meta property="fb:app_id" content="[YOUR_APP_ID]" />
<meta property="og:type" content="[YOUR_APP_NAMESPACE]:recipe" />
<meta property="og:title" content="[YOUR_TITLEIts]" />
<meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">
</head>
New things about og:article
You action Type must be Publish
Here is my scenario. When a user opens a browser and goes to facebook.com to sign himself in, I want to be able to detect that and init my Facebook application sign-in process.
Is that possible? I'm asking because I noticed that signing into Facebook itself doesn't get my app signed in automatically, which is not good.
I'd prefer JavaScript client code.
UPDATE: Here you have a FULLY WORKING example. The only thing you will need to do is to replace the APP_ID for whatever ID you get when sign your app at: http://www.facebook.com/developers/ and the port you may use for the localhost test. This detects when the user logs in even in another browser window. It is obviously extremely basic but proves the point that is feasible with the tools from the graph API.
You can add this code to detect when the user logs in. It is the same oauth log in whether the user clicks on a <fb:login-button> or logs directly onto facebook.com:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Hello App Engine</title>
<SCRIPT type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></SCRIPT>
</head>
<body>
<h1>Hello!</h1>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : APP_ID,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
/*
* Authentication functions
*/
FB.Event.subscribe('auth.login', function (response) {
welcomeMsg(response);
});
FB.Event.subscribe('auth.logout', function (response) {
alert ("Good bye!");
});
if (FB.getSession() != null) {
FB.api('/me', function(response){
console.log(response.name);
welcomeMsg(response);
})
} else {
window.setTimeout(function(){window.location.href="http://localhost:8888"},5000);
}
function welcomeMsg(userData) {
console.log ("Welcome " + userData.name);
}
</script>
</body>
</html>
You can subscribe to the auth.login event.
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
There are many Facebook images that you can see only if you're logged into Facebook. You can make the user attempt to load one of these images, and then detect if it loaded or not. It's a total trick.