Develop Reference

fb-login-button (html) triggers a popup that is blocked by the browser

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 ;)

Given The domain of this URL isn't included in the app's domains...: Facebook Dialogs (FB UI)

I am following the steps to implement Facebook UI Dialogs
My idea is to implement custom actions at the moment when user share a post from my website.
I have been created my app, i have placed my app url, my app domain (same to app url), and i have placed all necessary code in my site, and when i pressed button share, it throws:
Can't load url: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings
This is my code:
<script type="text/javascript">
$(function(){
// initialize fb sdk
window.fbAsyncInit = function() {
FB.init({
appId : 'appid',
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/es_LA/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
function share_property(){
FB.ui({
method: 'feed',
link: 'link',
}, function(response){});
}
</script>
and the html to the button:
<div class="query-submit-button pull-right">
<input id="shareBtn" type="button" value="Compartir" onclick="share_property();">
</div>

You don´t need to track shares for statistics on your own, there are analytics for Apps: https://www.facebook.com/analytics/[app-id]
There is a specific page for Sharing stats: https://www.facebook.com/analytics/[app-id]/?section=link_sharing
Either way, you need to include the Domain of your App in the App settings, as the error message tells you.

How do I use Javascript to auto resize the height of my Facebook tab?

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.

Which Javascript SDK code with what modifications should be used for FB Like button?

There are two sets of javascript SDK code, the one given on the SDK page:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myappidnumbers', // App ID
channelUrl : '//www.mywebsite.com/channel.html', // 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>
and the one generated when getting the code for the button:
<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/es_ES/all.js#xfbml=1&appId=myappidnumbers";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
No matter which I use, the Like button is not showing up. I have tried to use the debugger, and gotten this warning for the Like button:
Admins And App ID Missing: fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high click-through rate.
This may be a simple question for you experienced folks, but I have no idea what to do to make the like button show up. What am I missing?

Try to set
<meta property="fb:app_id" content="YOUR APP ID" />
<meta property="fb:admins" content="YPUR USER ID" />
in your HEADER, after test your web site with https://developers.facebook.com/tools/debug the url linter :)

The second, shorter set of SDK code is all that is needed.
Initially, I was testing with Chrome and nothing was showing up. I realized after testing it successfully on other browsers what the problem was: I had FB Disconnect (chrome extension) enabled. Whoops.

Facebook example JS login not loading

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.