[教學] 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 密鑰

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_001




相關連結

Facebook Developers



設定流程

  1. 申請註冊一個 Facebook APP 開發者帳戶
  2. 建立新的應用程式 APP ID、取得 APP 密鑰
  3. 網站與 Facebook 應用程式建立連結

設置前準備

準備一個 Facebook 帳號




操作教學

Step 1

申請註冊一個 Facebook APP 開發者帳戶

登入 Facebook 帳號,前往開發人員頁面「Facebook Developers」;在網頁上方的【My Apps】下拉選單,選擇【Register as Developr】

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_101



這裡選擇【是】,並按下【登記】

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_102



到這裡就完成 FB 的開發者帳戶的申請了;系統提示可以將 「Facebook」應用關聯至網站或應用程式,這邊點擊【完成】

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_103



應用程式介面導航,若最近有新推出的功能介紹,可以在看完介紹後可以按下【關閉】

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_104



Step 2

建立新的應用程式 APP ID、取得 APP 密鑰

申請過開發者帳戶後可以接著建立 APP ID,我們在【My Apps】下拉選單點選【Add a New App】

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_201



在跳出的畫面中,點選【WWW】網站圖示

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_202



緊接著,若你的帳號沒建立過「應用程式」可以直接點擊【Skip and Create App ID】,創建第一個 APP ID;如果曾經製作過 APP ID 則可在輸入框中填入想要的名稱直接建立新的應用程式 ID

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_203



幫應用程式 ID 取 Display Name 及 Namespace 名稱,並幫它選取一個類別:

若你為第一次建立應用程式 ID,可能會如下圖少了一個「test version」選項

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_204



若曾製作過應用程式 ID,則如下圖,會多出一個是否要「建立測試用 APP」的選項

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_205



這邊我們輸入相關資料,並按下【Create App ID】直接建立一個應用程式 ID

Display Name:可填入〈中英文字元〉(* 可中英混合 )
Namespace:可填入〈小寫英文字元〉(* 不可有大寫,符號則限於使用下劃線 )
類別:下拉選單中找到適合的〈應用程式分類〉

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_206



接著,將圖中安全驗證碼填入,並點擊【送出】

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_207



在頁面跳轉後,可以看到我們已取得「APP ID」與右側的「APP」密鑰了

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_208



Step 3

網站與 Facebook 應用程式建立連結

在取得 APP ID 後,若需將 FB 的 Website 社群插件應用至自己的網站,則必需將 APP ID 與網站做連結,這樣才能讓「FB 社群插件」出現在網站中。

這裡點選左側的【Settings】,並選擇【+Add Platform】

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_301



在跳出的浮動視窗,點選【Website】圖示

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_302



接著在這裡我們可以輸入自己的網站或部落格網址,並按下【Save Changes】完成設置

App Domain〈輸入自己的網址〉
Contact Email〈輸入自己的電子信箱位址〉
Site URL〈輸入網站的網址〉
Mobile Site URL〈輸入行動版網站的網址〉

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_303



( * 若你的網站在 Blogger ,「Mobile Site URL」手機版網址可輸入為「http://yourwebsite.blogspot.tw/?m=1」;如果你的 Blogger 模板為「自適應設計」,則填入一般網址即可。)



接下來,前往 Facebook「社群插件」頁面,在需要填入「APP ID」的特定插件裡,加入 自己的「APP ID」並將程式代碼置於網站中即可使用。

[教學] Facebook  APP ID 申請,建立應用程式取得 APP 密鑰_401



相關文章

如何讓文章分享到 Facebook 時,顯示作者專頁名稱

Blogger 文章分享 Facebook og meta 標記設定


留言

  1. 請問一位會員要在一家公司有多個APP要都可以用FB登入該如何解決呢?

    回覆刪除
    回覆
    1. 嗨!哈囉 ~
      可以觀察 FB 登入的應用程式「 https://developers.facebook.com/docs/facebook-login 」幫 Android 或 iOS 版應用程式,添加登入按鈕。
      目前自己只對網頁版添加 FB 登入按鈕有一些研究,APP 的部份沒有涉獵,APP 這部份需自行研究囉。

      刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] LINE 電腦版行動條碼登入設定

Blogger 文章底部自動加入版權宣告

[教學] Blogger 自訂網址綁定自有域名