in code筆記

常見各大企業的FB粉絲團,左邊總是有很特殊的頁籤,按下去都會顯示聯外的網站,很多公司的行銷媒體都喜歡用這功能來做活動,而他們找了老半天總是找不到這東西該從哪邊新增,如果公司有MIS或是IT可能還好解決,但沒有的話呢?? QAQ

所以來做一篇step by step的教學給各位需要的朋友,先準備以下東西:

  • 粉絲團 — 1個
  • 粉絲團完整權限 — 1匹
  • facebook開發者帳號 — 1條
  • 你要放到頁籤內的網站 — 1個 (*註)

*註 : 需要是https的網站,且符合FB規章,建議是自己做的網站,目前測試過很多像是FB或是google表單等等的網頁都不能放在頁籤內。

*開發者帳號怎麼申請請上網搜尋,這邊不多做講解

OK來吧!

Step1
001
請先到https://developers.facebook.com/?advanced_app_create=true裡面新增一個新的FB 應用程式
顯示名稱請打你希望這應用程式的名稱 例如: fanpage_tag (請習慣用英文謝謝)
聯絡電子郵件…就是電子郵件。
類別選完後就可以下一步

Step2

這時進到主控台,我們點選左邊的”設定” => “基本資料”

Step3
003
點選下方的”+新增平台”

Step4
004
點選”粉絲專頁頁籤”

Step5
005
好我們一步一步填資料

  • 安全粉絲專頁頁籤網址 –> 這邊請填你希望粉絲專業的新增頁籤點下去後顯示得主網站網址,注意網站必須要有HTTPS!
  • 粉絲專頁頁籤名稱 –> 你希望的頁籤怎麼顯示 例如: 這就是他X的新頁籤!!!!!!!
  • 粉絲專頁頁籤編輯網址 –> 這我也搞不懂,好像是填你該頁面的後台之類的? 我是直接把安全粉絲專頁頁籤網址那個網址直接複製過來

OK之後直接儲存

Step6
006

把你的頁面往上拉,你可以看到這串APP ID,把它記下來,因為我們會用到它

因為需要安裝頁籤到粉絲專業上,所以需要做一個網址來讓它安裝,聽不懂沒關係照著做

https://www.facebook.com/dialog/pagetab?app_id=剛剛要你記下來的那串東西&redirect_uri=你剛剛打的安全粉絲專頁頁籤網址

麻煩要你改的東西自己改吼,改好你就直接到瀏覽器去開啟這網址,就會顯示:

007

選擇你的粉絲專業,接著按下去!

Step7
008

你就可以看到頁籤啦,就這樣。

其實facebook也有提供安裝教學,不過都是英文有點複雜就是
https://developers.facebook.com/docs/pages/tabs

 


2017/02/21更新

沒想到這篇居然是我網誌搜尋度最高的一篇文章…

滿多人在執行中發現問題的,我這邊簡單回答一下。

 

Q : 為什麼我的頁籤自己看的到,別人卻看不到?

這我必須致歉,因為我少講了一個步驟(´゚ω゚`)

先到剛剛控制台那邊,找到【應用程式審查】的頁面

 

接著把 【是否發布OOXX 】的那個按鈕打開,就可以了!

 

Q : 為什麼我弄好頁籤,但顯示的卻是空白?

ㄟ…其實我也不知道耶..(被揍

但我前陣子幫網友測試,確實有這問題,他是想把google表單放到頁籤中,但很奇怪的是,他就是會顯示空白

這部分可能還要再研究一下,我覺得最好的方法就是換一套表單拉

jotform是我測試OK的表單系統,如果你也有同樣問題不訪試試看,又或者說你有解決方法,懇請希望你留言告訴我怎麼解~ 拜託QAQ


留下評論

Comment

52 Comments

  1. 您好,想請問為什麼我的頁籤自己看的到,別人卻看不到?
    我一樣到【應用程式審查】的頁面,但就是沒有一個列表是【是否發布OOXX 】…請問這如和解決?

  2. 頁籤新增沒問題,但是連結網站無法顯示(空白),https://isaysoapology.easy.co/,是因為不支援easy store平台嗎?我網址改成pinkoi就可以了

  3. 很用心的教學文,不過我目前已經成功新增頁籤了,但是卻顯示空白
    我想連結的是Youtube,也有看過其他粉絲專頁如此操作,不曉得是哪裡出問題了。

  4. 您好 我想詢問一下
    我使用的頁籤是連結IG
    操作最後頁籤有做好但是畫面沒有顯示出來~是空白的
    請問一下我是不是哪個環節錯誤呢?

    • 我今天透過”Iconosquare”成功新增了,但傷腦筋的是只有電腦版看得到,手機版不能看。

  5. 請問做好的頁籤是不是都沒有超連結功能?為什麼有些粉專頁籤有超連結到外部網頁的功能

  6. 請問”安全粉絲專頁頁籤網址”和”粉絲專頁頁籤編輯網址”要填什麼呢??他一直不讓我填,我只是想要新增粉絲專頁的某篇貼文而己

  7. 粉絲專頁頁籤編輯網址=>這個要貼什麼呢? 我貼了粉絲專業的頁籤設定這個網址,說不頁籤不能是FACEBOOK的網址…

  8. 請問
    安全粉絲專頁頁籤網址:我輸入https://www.facebook.com/粉專名稱/頁面名稱
    確一直出現錯誤請問網址部分有哪邊是需要修改的嗎

  9. 不好意思請問一下
    在做好連結點進去後
    出現的頁面顯示
    API Error Code: 191
    API Error Description: The specified URL is not owned by the application
    Error Message: redirect_uri is not owned by the application.

    這是什麼意思呢?

    • 請確認第六步的網址,【redirect_uri】後面的那個參數
      與第五步的【安全粉絲專頁頁籤網址】是一致的

  10. 設定完之後
    標簽頁出現下方字樣~
    Method Not Allowed
    Error 405

    我用的連結為GOOGLE的部落格

  11. 我想詢問在安全粉絲專頁頁籤網址放入google雲端的話 在專頁顯示會變成錯誤頁面
    這部份要如何排除呢

    • 如果你是指Google 雲端硬碟的話,那應該是給個人使用的網址不對外public的
      若是想提供他人下載頁面,可能需要自己寫一個網頁去放連結喔

  12. 謝謝你超清楚的分享
    我測試後成功新增了頁籤
    但是發現點進頁籤後沒有想要呈現的內容出現 而是空白的
    何以如何解決呢?
    謝謝

    • 之前有另一位朋友也反映過同樣問題
      他是用google 表單,放在頁籤中顯示為空白
      我對這於這狀態目前只能提供兩個方法
      1.利用自架網站,並搭配iframe也許可以解決該問題
      2.向google 表單的問題,我建議找替代方案。(如jotform這套表單系統就可以正常使用)

      • 沒沒錯 我就是用google表單!哈哈
        謝謝你
        我要立馬來測試看看更改表單後的結果

  13. 你好,想詢問「安全粉絲專頁頁籤網址」規則到底該如何設定呢?
    是否可使用原有FB fanpages url後方加入頁籤英文做設定?但怎麼填寫都被說不是正確的fb url。 謝謝

      • 你好,我的網址確認是 https:// 開頭
        想請問出現以下錯誤訊息要如何排解?謝謝喔

        API Error Code: 191
        API Error Description: The specified URL is not owned by the application
        Error Message: redirect_uri is not owned by the application.

        • 請確認
          Step5的”安全粉絲專頁頁籤網址”

          Step6的”redirect_uri”後面那串網址一致喔!

          • 確認是一樣的耶~
            安全粉絲專頁頁籤網址,是要連去的目的地對吧,我想要他連去LINE@的好友列表,也看過其他粉絲團這麼作….

          • 很抱歉,因為我沒有LINE@相關測試的網址可以測
            恐怕無法回答你這個問題 (汗

          • ㄜ 不會~~
            已經很謝謝你了!

          • 也遇到一樣的問題><
            我試過蝦皮連結也是一樣,不知道發生什麼了@@
            謝謝回覆

          • 不好意思~剛剛測試可以了,但想請問該如何刪除呢?謝謝:)

          • 到粉絲專頁的設定,應用程式中把之前做的頁籤刪除就可以了