[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰
一般推廣網站裡的文章,我們都會在站內加入常用的社群分享按鈕,以供往來自己部落格的訪客方便存儲文章或進一步做文章分享的動作,而目前在社群分享的活動力上還是以 Facebook 最為頻繁!
除了「Like」和「Share」按鈕,若要在網站中加入 Facebook 裡的特定社群插件,那就必須申請「Facebook APP ID」獲得開發者權限才能使用。例如 :留言板、粉絲專頁插件、追蹤 . . . 等等。
「Facebook APP ID」在社群應用上,除了上段敘述的特定插件安裝外,我們在「APP ID」申請完成後,若有幫網站及 Facebook 做關係上的互聯,那在 Facebook 應用程式介面也可以獲得一份統計資料。也就是說,我們不一定要建立「粉絲專頁」,但一樣能夠有往來訪客的洞察報告!
趁著最近 Facebook 應用程式 APP ID 申請介面改款,順道將註冊流程做個教學記錄,這裡就以建立一個 FB 留言板的「APP ID」為例,過程中也會取得 APP 密鑰。
這裡選擇【是】,並按下【登記】
到這裡就完成 FB 的開發者帳戶的申請了;系統提示可以將 「Facebook」應用關聯至網站或應用程式,這邊點擊【完成】
應用程式介面導航,若最近有新推出的功能介紹,可以在看完介紹後可以按下【關閉】
在跳出的畫面中,點選【WWW】網站圖示
緊接著,若你的帳號沒建立過「應用程式」可以直接點擊【Skip and Create App ID】,創建第一個 APP ID;如果曾經製作過 APP ID 則可在輸入框中填入想要的名稱直接建立新的應用程式 ID
幫應用程式 ID 取 Display Name 及 Namespace 名稱,並幫它選取一個類別:
若你為第一次建立應用程式 ID,可能會如下圖少了一個「test version」選項
若曾製作過應用程式 ID,則如下圖,會多出一個是否要「建立測試用 APP」的選項
這邊我們輸入相關資料,並按下【Create App ID】直接建立一個應用程式 ID
Display Name:可填入〈中英文字元〉(* 可中英混合 )
Namespace:可填入〈小寫英文字元〉(* 不可有大寫,符號則限於使用下劃線 )
類別:下拉選單中找到適合的〈應用程式分類〉
接著,將圖中安全驗證碼填入,並點擊【送出】
在頁面跳轉後,可以看到我們已取得「APP ID」與右側的「APP」密鑰了
這裡點選左側的【Settings】,並選擇【+Add Platform】
在跳出的浮動視窗,點選【Website】圖示
接著在這裡我們可以輸入自己的網站或部落格網址,並按下【Save Changes】完成設置
App Domain〈輸入自己的網址〉
Contact Email〈輸入自己的電子信箱位址〉
Site URL〈輸入網站的網址〉
Mobile Site URL〈輸入行動版網站的網址〉
( * 若你的網站在 Blogger ,「Mobile Site URL」手機版網址可輸入為「http://yourwebsite.blogspot.tw/?m=1」;如果你的 Blogger 模板為「自適應設計」,則填入一般網址即可。)
接下來,前往 Facebook「社群插件」頁面,在需要填入「APP ID」的特定插件裡,加入 自己的「APP ID」並將程式代碼置於網站中即可使用。
Blogger 文章分享 Facebook og meta 標記設定
除了「Like」和「Share」按鈕,若要在網站中加入 Facebook 裡的特定社群插件,那就必須申請「Facebook APP ID」獲得開發者權限才能使用。例如 :留言板、粉絲專頁插件、追蹤 . . . 等等。
「Facebook APP ID」在社群應用上,除了上段敘述的特定插件安裝外,我們在「APP ID」申請完成後,若有幫網站及 Facebook 做關係上的互聯,那在 Facebook 應用程式介面也可以獲得一份統計資料。也就是說,我們不一定要建立「粉絲專頁」,但一樣能夠有往來訪客的洞察報告!
趁著最近 Facebook 應用程式 APP ID 申請介面改款,順道將註冊流程做個教學記錄,這裡就以建立一個 FB 留言板的「APP ID」為例,過程中也會取得 APP 密鑰。
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_001 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_001](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYPVLWT8KHoIPA9F4cg72pOyPVTHO2ZdCP5uvi1TpthIhkQOjfeOiQBCwdojYFJy6GzzUmB4Thse87hjWTx5jcNXOYnvrvX7CKpjv0521vioRIhjzJOJJaWIrqpC9z10OZNw9bg-pw7S8/s1600/register-facebook-application-api-key-app-id_001.jpg)
相關連結
「Facebook Developers」設定流程
- 申請註冊一個 Facebook APP 開發者帳戶
- 建立新的應用程式 APP ID、取得 APP 密鑰
- 網站與 Facebook 應用程式建立連結
設置前準備
準備一個 Facebook 帳號操作教學
Step 1
申請註冊一個 Facebook APP 開發者帳戶
登入 Facebook 帳號,前往開發人員頁面「Facebook Developers」;在網頁上方的【My Apps】下拉選單,選擇【Register as Developr】![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_101 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_101](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvYxpTmG81A1H4N1qiQIPrI0Pj1j1NQg2XvBywCS86cFLZixKi3fF_trwHB30Sfm0ZXUx798I3fCsIR31DSeVX6GnHC75vOVtF8pgpIeTfA8p2IM-x9h4D1ohyJA4-fn0bdFy6ZfZTvBg/s1600/register-facebook-application-api-key-app-id_101.jpg)
這裡選擇【是】,並按下【登記】
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_102 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_102](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidA3qV16VZmgZ9D4PbtaYOzeQijmOxKnllS9ytuKwgeBIqcxLwJWAJgA9ulAz0xPbsApSnCvO1F3EIOaeH7WJ9vdr6ME2K3zGOw4cyrhJCAkh1zsUpOQTZ50waQ9-yf_p390PDNid3ymw/s1600/register-facebook-application-api-key-app-id_102.jpg)
到這裡就完成 FB 的開發者帳戶的申請了;系統提示可以將 「Facebook」應用關聯至網站或應用程式,這邊點擊【完成】
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_103 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_103](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8FAWTNQr0F_Df9CDZnKWl4TBken4fBvnq_xcno2Oa9jrb8Iaas7dQOA8i1wOicQVOKgPZd2x2fhcz9d9qioJ_OtoSQZhQ8nuPDBixPgHqsRWlbT2hV4oYQnv0z8kCqa1r1B1PSUXKMmU/s1600/register-facebook-application-api-key-app-id_103.jpg)
應用程式介面導航,若最近有新推出的功能介紹,可以在看完介紹後可以按下【關閉】
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_104 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_104](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMisGWjAi9tk7s059TZYQYowLCm_7lLFHFgguJUFFDIbouwSxccL7UpccTWu6Kb3LdCzBVgJsZUkSH05S_ha5CcvcX0kVTv3D-KHOAccnPUExaycGv1gPAcydzAnbhiiC85o5cpOzCB-I/s1600/register-facebook-application-api-key-app-id_104.jpg)
Step 2
建立新的應用程式 APP ID、取得 APP 密鑰
申請過開發者帳戶後可以接著建立 APP ID,我們在【My Apps】下拉選單點選【Add a New App】![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_201 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_201](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ytqRoUIWoVHH-zXyRV414_S0KODlPArRV3Z473ot3BkgVnW5__t87SFCzNTuROaMGDo29xQwLEeFpxmCQ1oOCSEX4QlcwXDI_BVaODiH-bWeFieh1U8PL0omKY3Cb-NTA3VJ9ZCqeOg/s1600/register-facebook-application-api-key-app-id_201.jpg)
在跳出的畫面中,點選【WWW】網站圖示
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_202 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_202](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWRnPjIxo5aqB5DvA-lAXlbQ2GTdFMnUJlbKDyCGNClz37aDKh9LuX0nYAudY7wktQ4vFSIZnlEcvzmE704fhP7tMv6BZQ-r6XIljLSLdx3i9ITmZ2kWhyphenhyphenJGxO9lutlaKWWuRw9TXVe8I/s1600/register-facebook-application-api-key-app-id_202.jpg)
緊接著,若你的帳號沒建立過「應用程式」可以直接點擊【Skip and Create App ID】,創建第一個 APP ID;如果曾經製作過 APP ID 則可在輸入框中填入想要的名稱直接建立新的應用程式 ID
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_203 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_203](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzf_qrcDnP2QomEehfWKLc60aVnTw7eLpguMa6CKq5O9ZA-6T8Hc-v98QZJGhHmgweHcyRaeyRAHeikpFWlXo9Gvoy4YmdjmsIZIUWayyxRS2FiGLyOOWED-cPOw7BJbu8nfa-Ffm01DU/s1600/register-facebook-application-api-key-app-id_203.jpg)
幫應用程式 ID 取 Display Name 及 Namespace 名稱,並幫它選取一個類別:
若你為第一次建立應用程式 ID,可能會如下圖少了一個「test version」選項
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_204 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_204](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxbvLbTpEp6sr0SvExPuyb0EwlfJNBWAvLHlJEzXJzQPxXDuwzdq8uK8GRjtUvDqPQalM6TuiwSSQg9NCzExup1co5Ca4fm0R4CbReKyaEi_D9-gk7JlPXQ8SRodewg0ElmsAeB1LENA/s1600/register-facebook-application-api-key-app-id_204.jpg)
若曾製作過應用程式 ID,則如下圖,會多出一個是否要「建立測試用 APP」的選項
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_205 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_205](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2adkiSfsWMT4KNZqaBIJjw6PJq91aDDnjhnzxQ1c7ryOVDH5qSrYcMStFBVkhH0UzXdEb7Ci283SIJkQxN3hDQUk2fw7N_gfOLJXQpOPIHv6pcKmX339m4znb7HHz3Kg49IcCwcripo/s1600/register-facebook-application-api-key-app-id_205.jpg)
這邊我們輸入相關資料,並按下【Create App ID】直接建立一個應用程式 ID
Display Name:可填入〈中英文字元〉(* 可中英混合 )
Namespace:可填入〈小寫英文字元〉(* 不可有大寫,符號則限於使用下劃線 )
類別:下拉選單中找到適合的〈應用程式分類〉
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_206 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_206](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjacazJy0J1CTROIqEzOORsi0YOziui768NUa1rYWNNJXOBlh6f1gZSejhdJ_Jc7Jrc-g0uLPzKokdy4aGaY_-UqcRT74g93DFswmthbR3cpsK9l8-xjXW0Lk5nwFmG-wdNcYU8hLif5M/s1600/register-facebook-application-api-key-app-id_206.jpg)
接著,將圖中安全驗證碼填入,並點擊【送出】
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_207 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_207](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA-35eN2exRHWZ422xYDmOtOuZ2AxRC6t2QN-2-PdllSAcumcx74WQX4O0bNMv7Hz5gQj6nqmK6ANhhNIo8aTFlSzLmmb3nkDhwIbsXSFQE-OHyAqlXm9suaIwR9stTJ85UhfNF_wg6Ww/s1600/register-facebook-application-api-key-app-id_207.jpg)
在頁面跳轉後,可以看到我們已取得「APP ID」與右側的「APP」密鑰了
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_208 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_208](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirP6wjNegc_A5TdTl0Vyh1hGDb5SNvvHwXkTlRC9sYH1fT0VOCD0UfSiMrZTlbxkY7Qk3GVXVL4YtJnBRTDaY9ZjFc30qr8-c8od-hWBfXvM7RX0NcFfGxP8G9gN-LRHqCtlOAMQ8MX8E/s1600/register-facebook-application-api-key-app-id_208.jpg)
Step 3
網站與 Facebook 應用程式建立連結
在取得 APP ID 後,若需將 FB 的 Website 社群插件應用至自己的網站,則必需將 APP ID 與網站做連結,這樣才能讓「FB 社群插件」出現在網站中。這裡點選左側的【Settings】,並選擇【+Add Platform】
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_301 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_301](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHPpZxk8spSzQe3R1CIpI2ehyGbYhU5C_22U-aWzsn5_8T5y4StoOwRe8li3lwlTPD6pXXdw8vgXKPKeBt7J-NA5DPZguvOMP8ebJNtS_-Xn4177igQ8nXHesduAPzQyt9fPna4psgFvw/s1600/register-facebook-application-api-key-app-id_301.jpg)
在跳出的浮動視窗,點選【Website】圖示
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_302 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_302](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMDPzwg903e7UzGUzGx34TXX9leurSTbq6izZ9bWCLHNrbap3jLZiD96qA41PyLKzwYkYEV41SuXOA68EOE6ZZduo9NWi8J5RBTHPi96ed_QLtrCWiQi4GJQn7zR4rVVNsE6bNk4kMohk/s1600/register-facebook-application-api-key-app-id_302.jpg)
接著在這裡我們可以輸入自己的網站或部落格網址,並按下【Save Changes】完成設置
App Domain〈輸入自己的網址〉
Contact Email〈輸入自己的電子信箱位址〉
Site URL〈輸入網站的網址〉
Mobile Site URL〈輸入行動版網站的網址〉
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_303 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_303](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtNpa2ITRQ-TvFJLBme-scaRJSz3Q5zXorzk42BRW1uDygomsCosEtkx_TLePuy6vDq8nfEjO8YNYCvHiNlJHgFbgmg71SmMTEYm43Jx_2xi7oL6IniA1lPCWapDKcdVl-np31wjKIp_I/s1600/register-facebook-application-api-key-app-id_303.jpg)
( * 若你的網站在 Blogger ,「Mobile Site URL」手機版網址可輸入為「http://yourwebsite.blogspot.tw/?m=1」;如果你的 Blogger 模板為「自適應設計」,則填入一般網址即可。)
接下來,前往 Facebook「社群插件」頁面,在需要填入「APP ID」的特定插件裡,加入 自己的「APP ID」並將程式代碼置於網站中即可使用。
![[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_401 [教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰_401](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivquWAwmHsPCnyIyLRn_VekEPeDMnuFyYnUJPmvTPgpCWCTOinGLIph3Zo_WtSWL8g9jZIpY2Ccrei7JAJycDUXWAvqurGJBq2plJsp1HYNbSqKR_KKvkbMMJLh0yrLEV9cqpkBRLsxCo/s1600/register-facebook-application-api-key-app-id_401.jpg)
相關文章
如何讓文章分享到 Facebook 時,顯示作者專頁名稱Blogger 文章分享 Facebook og meta 標記設定
請問一位會員要在一家公司有多個APP要都可以用FB登入該如何解決呢?
回覆刪除嗨!哈囉 ~
刪除可以觀察 FB 登入的應用程式「 https://developers.facebook.com/docs/facebook-login 」幫 Android 或 iOS 版應用程式,添加登入按鈕。
目前自己只對網頁版添加 FB 登入按鈕有一些研究,APP 的部份沒有涉獵,APP 這部份需自行研究囉。
您好,請問如果是管理平台的管理員幫企業主設定他們的app id,若未來不合作時,可以將權限轉移嗎
回覆刪除感謝教學~
回覆刪除