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.

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

回答1:

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.

回答2:

As I see your code there are couple of things that are missing. First you need to initialize oauth with FB. 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.

(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.

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.

来源：https://stackoverflow.com/questions/11497170/cant-get-fb-login-button-to-show-up

标签

html

css

facebook-social-plugins