最近在弄一個項目，需要使用Facebook進行登陸并且獲取用戶Facebook相關的數據。網上查找有關Facebook應用設置教程，中文資料中，要么介紹的是N版之前的API，要么是App端的教程。Facebook文檔很多介紹的也不是很齊全，自己仔細摸索一番，踩坑經驗~

廢話不多說，要使用Facebook必須先FQ，對于一個學渣來說，FQ什么的最喜歡了~

創建facebook賬號

要上facebook申請應用，首先要創建facebook賬號；
上Facebook創建賬號沒什么好說的，唯一需要注意一點的是，最好填寫真實的信息，不然Facebook賬號丟失的話，找起來很麻煩~

申請Facebook應用

進入Facebook應用申請入口: Facebook應用申請

創建應用入口

點擊創建新應用即可~

填寫應用名

就是Facebook應用的名稱，當然，你可以隨便取，who case !

選擇應用類別

按照你的實際需求進行選擇，選擇完畢后點擊創建。

填寫應用地址

這一步需要注意的是，請加上http:// 或者https:// 協議前綴~
如果你的應用是https的，請不要使用http 否則Facebook定位不到你的應用網址

創建應用完成

應用創建完成后，會有一些基礎的文檔提供給你使用~ 不過建議進行進一步設置后再進行開發。

Facebook應用設置

進入app

點擊 My apps > app 進入你的app界面

上圖所示的是你的應用的基本一些基本信息

基本設置

點擊左側settings按鈕進入設置界面~
設置你的聯系郵箱，如果不設置聯系郵箱，你的應用只可以供你自己的Facebook賬號使用!

讓你的Facebook應用成為公共應用

上圖設置的郵箱這里就派上了用場了

點擊Yes，讓你的應用成為公共應用

別緊張，點擊確認就OK了~

高級設置

settings > advanced

Client OAuth login is enabled but you haven't listed any valid OAuth redirect URIs. Click here for more information.

一進來就會發現這個警告，意思是說，客戶端OAuth登陸未添加監聽跳轉地址。
也就是說，必須要監聽授權監聽，比如說，用戶一開始登陸了你的應用，然后在facebook中取消了你的應用授權，這個時候這個地址就派上用場了。

設置這個地址，必須要注意兩點:

這個地址必須在你的應用網址域名下
這個地址必須是真實存在的，是可以訪問的

比如說你的應用地址是 http://www.a.com
你這里就可以填寫http://www.a.com/cb.html

還需要定義跳轉地址

這里填寫的也是 http://www.a.com/cb.html

檢測應用是否設置成功

這里不講怎么進行授權、登陸之類的API，因為這些API，Facebook官網API還算是比較清晰的~
當我們寫好程序后，需要把程序代碼提交到服務器上，就是我們在基本設置中填寫的 Wetsite-URl

調用登陸API出現這個登陸界面就表示設置成功了
如果是首次登陸的話還會彈出授權界面，用戶同意授權后，可以獲取用戶的相關信息

至此基本的設置已經都完成了，使用Facebook應用攻擊美帝吧！

其他問題

手機端不能登陸

當我在PC端測試通過后，同樣的代碼在手機網頁中卻會提示錯誤。

網上找到的資料說是要設置mobile-site-url。

settings > base
2.4版本的Facebook改成了App Domains，之前的版本叫mobile-site-url，并且進行設置也不在同一處。

App Domains設置需要注意兩點

必須是website url 下的一個子域名
這個域名是真實存在的
http 或者 https協議前綴必須加上

比如說website url 是www.a.com， App.Domains 可設置為 sub.a.com
比如說website url 是sub.a.com， App.Domains 可設置為 son.sub.a.com

前面的設置都很簡單，基本上都是一次過，唯獨手機端登陸，Facebook居然沒有寫明，坑死我了~

設置應用圖片

Facebook應用的默認圖片

進入 App Details 進行設置

修改圖片即可

本地調試

每次都將應用程序上傳至服務器調試比較麻煩，如果想在進行本地調試，進入Test Apps進行設置。

獲取其他權限

Facebook默認設置了3種權限，最高權限為email，就是除了獲取用戶名與用戶頭像外，還可以獲取用戶的Email。
如果還需要獲取其他權限，比如說好友列表權限！
添加完成后需要按照Facebook要求的格式提交申請~

創建其他類型應用

如果我們的Facebook 關聯了Android或者IOS應用，在Settings > base 中添加設置即可

其他

此教程適用于Facebook2.4應用版本~
這篇文章是我在進行設置的時候所寫，部分地方理解不是很全面~
Facebook應用還有很多的功能，比如說數據分析，如果需要，細細摸索吧~

相關資料

https://developers.facebook.com/
https://developers.facebook.com/docs/javascript
http://fbdevwiki.com/wiki/FB.ui
http://stackoverflow.com/questions/12547088/how-do-i-customize-facebooks-sharer-php
http://stackoverflow.com/questions/16463030/how-to-add-facebook-share-button-on-my-website

---

文章來自 Petrus.Law，轉載請注明出處

努力工作，好好生活~

總結

以上是生活随笔為你收集整理的Facebook 网页应用图文设置教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。