[FACEBOOK][JAVASCRIPT][SDK] 開發紀錄 Login

2012-12-18

7660
0
FACEBOOK
2012-12-25

摘要:[FACEBOOK][JAVASCRIPT][SDK] 開發紀錄

最近在寫Facebook

紀錄一下

首先該網頁要先載入

順便載入 JQUERY 吧不然你要用DOM 的方式寫也行....不過CODE要寫很多自己的用法啦....
看個人

因為是FB的JS SDK

所以我們一定要跟JS成為好朋友

然後裡面記得一定要預先載入

$(function () {
            FB.init({

                appId: ["您申請的APPID編號"],
                status: true,
                cookie: true,
                xfbml: true,
                oauth: true
            });
       });

</script>

然後記得一定要在BODY裡面有這個標籤

這樣載入FBAPI就算完成了~~

有人做到這邊因該會有一些疑問

我的FB的應用程式該如何申請(不申請當然啥都不用玩了)，

https://developers.facebook.com/apps <= 申請網址

請點選建立新的應用程式

網下看到這個網址記得填入你的對外網址測試的時候會比較沒問題

若您沒有對外的只是想先寫一下的話你可以寫 http://localhost/ 就可以了不過建議最好要有對外網址

不然你再用某些 likeboxlist 或是按讚功能的時候會有錯誤出現....因為不會有網站叫做localhost .... 若是有對外IP也可以這樣填上也行

至於下面未填到的部分請先空白吧

下面部分在另行說明

分別是有關於 FACEBOOK APP　其實就是網站崁入ＦＢ的 "皮"

或是iphone android 的原生網頁　以及　手機瀏覽網頁的部分

有點我也不是很懂,我們先以第一個為主開始

之後我們可以開始寫一開始入門程式

ＦＢ的登入狀態

　　　FB.getLoginStatus(function (response) {

　　　　　//目前若是與ＦＢ連結的狀態

                if (response.status === 'connected') {
                   var userid = response.authResponse.userID;
                   var access_token = response.authResponse.accessToken;


                } else {

　　　　　　//未登入，與未有使用本程式的應用時
                    FB.login(function (response) {
                        if (response.authResponse) {
                            console.log('Welcome! Fetching your information.... ');
                            FB.api('/me', function (response) {
                                 alert(response.id + response.accessToken);
                            });
                        } else {
                            alert('請登入FACEBOOK');
                        }
                    }
                    //權限 manage_pages 粉絲團權限
                    , { scope: "email, user_likes, user_photos, read_stream,publish_stream, read_stream, read_friendlists, offline_access,user_birthday" }
                    );
                }
            });

到這邊大家或許有點不太懂，小弟一開始其實也不太懂

若各位有寫過jquery 可能就會看得懂，小第一開始Jquery不太好摸了一下下才大概知道

各位也可以看一下facebook.api 的參考會有講解，不過都是英文的..雖然我也是硬著頭皮讀....

正常來說是這樣

　FB.getLoginStatus(callback());

　1. callback 後回來的數值可在裡面再做其他方法

fb 上的app是有三種聯繫( 　response.status ) 狀態

1.有登入並有授權

　　2.有登入沒授權

　　3.沒登入

　　https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/　　登入狀態ＡＰＩ說明

　我用的方式不算正常的方式，＠＠請大家可以先從FB.API看完後做比較

　　我寫的方式只要非連接狀態未授權，就給他跑一次登入就對了，然後登入的時候

　　會在要一次授權，

　　這時候就會用到　FB.LOGIN ()　方法了

1.callback　後回來的數值可在裡面再做其他方法　

　2.使用該ＡＰＰ要取得的權限　ＥＸ：貼文，獲得贊數，或是更多的資料之類的......

若依照上方程式完成後

您因該會取到自己的ID跟access_token

這兩個值非常重要若這兩個值缺一了你可能取資料就只能取到部分資料了

FB的API是階層性的，所以若要取得其他資料的話

這兩個資料一定要先有還有一點 access_token 是有有效期限的

各位可以先玩玩看目前這一個下一個再來教發文

謝謝各位

新手發文若有錯誤的地方　

敬請指正謝謝

補正:

FF 瀏覽器中

若你是用 ASP.NET 自動產生 html 網頁的 (VS2012)

因為他預設的文件規範好像是HTML5???

你可以改成4.0.1 的格式或直接把他拿掉就好了@@ (若正規寫法請忽略我...)

回首頁