私はWebプログラミングに慣れていないので、おそらくいくつかの間違ったことをしていると思いますが、ここで私が持っているいくつかの質問を試みてから、以下のコードを作成します。
Fyi私はdreamweaverで完全にローカルで作業しており、ブラウザでテストするためにf11などを押すだけです。チャネルファイル以外にサーバーにアップロードされたものはないので、これが主な問題である場合はお知らせください。
チャネルファイルの場合、私が持っているのは、次の行のすぐ下にある完全に空のファイル（html、bodyなどを含まない）だけです。
<script src="//connect.facebook.net/en_US/all.js"></script>
必要なのはそれだけですか？このボタンを表示するには、すべてのindex.htmlや.cssなどをチャネルファイルと同じ場所に配置する必要がありますか？
以下は私が使用しているコードであり、その下には配置用のcssがあります。ブラウザでテストを実行しても、青い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>
これは、上記の「Facebookでログイン」テキストを画面上で移動させるために文字通り何もしないCSSです。私が見ているのは、左上隅に上記を示す通常のテキストだけです。青いfbボタンはありません
@charset "utf-8";
/* CSS Document */
*
{
margin: 0;
}
body
{
background-color: #FFF
}
#fb-login-button
{
position: relative;
float: right;
}
Purusottamのコメントからの以下の新しいコード編集 は、私が非常に新しいプログラマーであるため、間違いを許してください。
青いFacebookログインボタンはまだ左上隅に「Facebookでログイン」テキストだけを表示していません。添付の画像を参照してください。
ここでも完全にローカルで作業しています。このボタンを表示するには、サーバー上のすべてのファイルが必要ですか？
<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>
これが現在の結果です：
