Facebook Opengraph 自定义 FB 登录按钮

8

我正在使用Facebook开放图谱,新API,并且我可以做到这一点:

<fb:login-button show-faces="true" max-rows="9" perms="email" autologoutlink="true" onlogin="window.location = 'http://www.example.com/facebook/facebook_test/'"></fb:login-button>

但是当我阅读文档时,如果我需要更多选项在 http://developers.facebook.com/docs/reference/javascript/FB.login 中,文档中提到我可以:

FB.login(function(response) {
  if (response.session) {
    if (response.perms) {
      // user is logged in and granted some permissions.
      // perms is a comma separated list of granted permissions
    } else {
      // user is logged in, but did not grant any permissions
    }
  } else {
    // user is not logged in
  }
}, {perms:'read_stream,publish_stream,offline_access'});

但是如果我需要另一个用于 fb 按钮的图像,或者如果我需要其他内容,我找不到如何做到这一点,或者在 HTML 的哪个部分中可以调用 FB.login,是在“script”标签之间吗?

1个回答

30

你需要使用Javascript SDK。只需将FB.login包装在某个函数中,并在想要调用它的任何地方调用该函数即可。例如,如果您想在单击图像时调用它:

<html>
    <head>
    </head>
    <body>
        <div id="fb-root"></div>
        <script>
          //initializing API
          window.fbAsyncInit = function() {
            FB.init({appId: 'your app id', status: true, cookie: true,
                     xfbml: true});
          };
          (function() {
            var e = document.createElement('script'); e.async = true;
            e.src = document.location.protocol +
              '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
          }());
        </script>

        <!-- custom login button -->
        <a href="#" onclick="fblogin();return false;"><img src="images/my_login.png"></a>


        <script>
          //your fb login function
          function fblogin() {
            FB.login(function(response) {
              //...
            }, {scope:'read_stream,publish_stream,offline_access'});
          }
        </script>

    </body>
</html>

5
请注意,从今天开始,您需要启用OAuth2.0,因为Facebook正在停用此类型的登录方式。有关更多信息,请查看此Facebook博客文章 - Reza S
以上代码并不过时,如果您想避免使用fb:login-button,则可以完美地工作。 - open-ecommerce.org

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接