无法获得fb登录按钮显示 [英] Can't get fb-login-button to show up
问题描述
我可能做了几件事情，因为我是网络编程的新手，但是这里有一些我曾经遇到的问题，然后在下面编写代码。
Fyi I在Dreamweaver中完全在本地工作，只是打f11或任何在浏览器中测试的东西。我没有任何东西上传到服务器，除了频道文件，所以如果这是主要问题，让我知道。
对于频道文件，我所拥有的是一个完全空白的文件（不包括html，body等），只是下面一行。
< script src =// connect.facebook.net/en_US/all.js\"> ;</script> ;
这就是我需要的吗？为了让这个按钮出现，我必须将所有的index.html和.css等放在与频道文件相同的位置吗？
下面是我正在使用的代码和下面的CSS放置。当我在浏览器中运行测试时，没有蓝色FB按钮显示。
< html>
< head>
< title>我的Facebook登入页面< / title>
< link href =fbstyle.css =stylesheettype =text / css>
< / head>
< body>
< div id =fb-root>< / div>
< script>
window.fbAsyncInit = function（）{
FB.init（{
appId：'[hidden]'，// App ID
channelUrl：'http：// mysite / channel.html'，//频道文件
status：true，//检查登录状态
cookie：true，//启用cookie以允许服务器访问会话
xfbml：true / /解析XFBML
}）;
};
//加载SDK异步
（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>
< div class =fb-login-button>使用Facebook登入< / div>
< / body>
< / html>
以下是CSS在屏幕上移动上面的login with facebook文字。我所看到的只是在左上角显示上面的常规文字。没有蓝色的FB按钮
@charsetutf-8;
/ * CSS文件* /
*
{
保证金：0;
}
正文
{
背景色：#FFF
}
＃fb-login-button
{
position：relative;
float：right;
}
Purusottam评论中的新代码编辑
再请原谅我的错误，因为我是一个非常新的程序员。
蓝色的Facebook登录按钮仍然不会显示在facebook上登录文本在左上角：见附图。
再次我在本地完全工作......我需要将所有文件在服务器上显示此按钮？
< html>
< head>
< title>我的Facebook登入页面< / title>
< link href =fbstyle.css =stylesheettype =text / css>
< / head>
< body>
< div id =fb-root>< / div>
< script>
window.fbAsyncInit = function（）{
FB.init（{
appId：'hidden'，// App ID
channelUrl：'http://mysite.net/ channel.html'，//频道文件
status：true，//检查登录状态
cookie：true，//启用cookie以允许服务器访问会话
xfbml：true， //解析XFBML
oauth：true}）;
};
//加载SDK异步
（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>
< div class =fb-login-buttonshow-faces =truewidth =200max-rows =5>使用Facebook登录< / div>
< script>
FB.login（函数（响应）
{
if（response.authResponse）
{
//登录成功
}
else
{
alert（'User cancelled login or did not fully authorize。'）;
}
}，{scope：'该应用需要的权限}}）
< / script>
< / body>
这是目前的结果：
http：//s17.postimage。 org / y8oz0htq7 / help.jpg
事实证明，这个按钮没有显示的原因是因为你需要在服务器上拥有一切。您无法在本地测试Facebook代码。
I'm probably doing several things wrong as i am new to web programming but here is an attempt at some questions I have and then code below.
Fyi I'm working completely local in dreamweaver and just hitting f11 or whatever to test in a browser. I don't have anything uploaded to a sever except the channel file so if this is the main issue let me know.
For the channel file all I have is a completely empty file (not including html, body, etc.) just the below line.
<script src="//connect.facebook.net/en_US/all.js"></script>
Is that all I need? In order for this button to show up do I have to have all the index.html and .css etc. in the same location as the channel file?
Below is the code I'm using and below that the css for placement. No blue FB button shows up when I run test it in my browser.
<html>
<head>
<title>My Facebook Login Page</title>
<link href="fbstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[hidden]', // App ID
channelUrl : 'http://mysite/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
});
};
// 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>
<div class="fb-login-button">Login with Facebook</div>
</body>
</html>
Here is the CSS that literally does nothing to move the above "login with facebook" text around the screen. All I'm seeing is regular text that says the above in the top left corner. No blue fb button
@charset "utf-8";
/* CSS Document */
*
{
margin: 0;
}
body
{
background-color: #FFF
}
#fb-login-button
{
position: relative;
float: right;
}
New code edit below from Purusottam's comments again please forgive me for mistakes as I am a very new programmer.
the blue facebook login button is still not showing up only the "login with facebook" text in the upper left corner: see the image attached.
again I'm working completely local here..do I need to have all the files on a server for this button to show up?
<html>
<head>
<title>My Facebook Login Page</title>
<link href="fbstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'hidden', // App ID
channelUrl : 'http://mysite.net/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
oauth : true});
};
// Load the SDK Asynchronously
(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>
<div class="fb-login-button" show-faces="true" width="200" max-rows="5">Login with Facebook</div>
<script>
FB.login(function(response)
{
if (response.authResponse)
{
//login success
}
else
{
alert('User cancelled login or did not fully authorize.');
}
}, {scope: 'permissions that app needs'})
</script>
</body>
this is the current result:
http://s17.postimage.org/y8oz0htq7/help.jpg
As it turns out the reason this button wasn't showing up was because you need to have everything on a server. You can't test the facebook code local.
这篇关于无法获得fb登录按钮显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http：//s17.postimage。 org / y8oz0htq7 / help.jpg](\"http://s17.postimage.org/y8oz0htq7/help.jpg\"){kind=link}
