无法显示fb-login-button
[英]Can't get fb-login-button to show up
问题描述
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. 
由于我是Web编程新手，所以我可能做错了几件事，但是这里尝试解决我遇到的一些问题，然后在下面进行编码。
Fyi I'm working completely local in dreamweaver and just hitting f11 or whatever to test in a browser. Fyi我在Dreamweaver中完全在本地工作，只是碰到了f11或要在浏览器中测试的任何东西。 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. 对于通道文件，我所拥有的只是下面一行中的一个完全空文件（不包括html，body等）。
<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? 为了显示此按钮，我是否必须将所有index.html和.css等与频道文件放在同一位置？
Below is the code I'm using and below that the css for placement. 下面是我使用的代码，下面是放置CSS的代码。 No blue FB button shows up when I run test it in my browser. 在浏览器中运行测试时，没有蓝色的FB按钮出现。
<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. 这是CSS，实际上并不能在屏幕上移动上述“使用Facebook登录”文本。 All I'm seeing is regular text that says the above in the top left corner. 我所看到的是在左上角显示上述内容的常规文本。 No blue fb button 没有蓝色的fb按钮
@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. 再次从Purusottam的注释中编辑以下新代码 ，因为我是一位非常新的程序员，请原谅我的错误。
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. 蓝色的Facebook登录按钮仍未仅在左上角显示“使用Facebook登录”文本：请参见所附图片。
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 http://s17.postimage.org/y8oz0htq7/help.jpg
2 个解决方案
解决方案1
3 2012-07-16 20:16:14
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. 您无法在本地测试Facebook代码。
解决方案2
2 2012-07-16 08:27:35
As I see your code there are couple of things that are missing. 如我所见，您的代码中缺少一些东西。 First you need to initialize oauth with FB. 首先，您需要使用FB初始化oauth。 Below is the reference to the code. 下面是对代码的引用。
window.fbAsyncInit = function() {
FB.init({appId: "hidden",
channelUrl : "Channel File",
status: true,
cookie: true,
xfbml: true,
oauth:true});
Loading of SDK will be simple as below. 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);
}());
Once this is done then onclick of your login DIV button call a javascript function with following code. 完成此操作后，单击您的登录DIV按钮的onclick将调用带有以下代码的javascript函数。
FB.login(function(response)
{
if (response.authResponse)
{
//login success
}
else
{
alert('User cancelled login or did not fully authorize.');
}
}, {scope: 'permissions that app needs'})
Hope this helps you. 希望这对您有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.