Facebook 帆布接入的总结

研究接入facebook也有不短的时间，上线过几款产品，这里把接入所有的点都记录一下。

1.首先进入facebook的开发者页面，直接入口在右下角更多里面

Facebook 帆布接入的总结

然后注册开发者账号，创建APP 选择Facebook Canvas

然后得到app编号和密钥。

2.配置Canvas

Facebook 帆布接入的总结

这里添加的地址必须是 https的，而且不能是静态页面。

  <script>
        window.fbAsyncInit = function () {
            FB.init({
                appId: '830298307005763',
                xfbml: true,
                version: 'v2.3'
            });
            FB.login(function (response) {
                if (response.authResponse) {
                    // user sucessfully logged in
                    var accessToken = response.authResponse.accessToken;
                    if (accessToken)
                        window.location.href = "CallBack.aspx?accessToken=" + accessToken + "&userID=" + response.authResponse.userID + "&expiresIn=" + response.authResponse.expiresIn;
                }
            }, { scope: 'email' });
            function onLogin(response) {
                if (response.status == 'connected') {
                    FB.api('/me?fields=first_name', function (data) {
                        var welcomeBlock = document.getElementById('fb-welcome');
                        welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
                    });
                }
            }

            FB.getLoginStatus(function (response) {
                // Check login status on load, and if the user is
                // already logged in, go directly to the welcome message.
                if (response.status == 'connected') {
                    onLogin(response);
                } else {
                    // Otherwise, show Login dialog first.
                    FB.login(function (response) {
                        onLogin(response);
                    }, { scope: 'user_friends, email' });
                }
            });
            // ADD ADDITIONAL FACEBOOK CODE HERE
        };

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        } (document, 'script', 'facebook-jssdk'));


</script>

View Code