[教學] 在 FB 粉專內加入一個「內嵌外部網站」的頁籤——以 Google 日曆為例



今天要教大家的是,如何在 Facebook 粉絲專頁裡面新增一個「來自外部網站內容」頁籤(Tab)的方法。


之所以會寫這篇文章,是因為朋友最近新開的店面即將開始要營運了,目前我正在幫忙他處理網路上的基礎建設內容。由於 Facebook 的活動頁籤只能條列顯示的,朋友希望能以「月份檢視的行事曆」之方式來瀏覽,因此我就開始尋找有沒有相關的做法。

然後在 Google 搜尋網路上資料的過程中也發現,相關內容的資訊都已經是好幾年前的,離現在最近的資料雖然是 2018 年 4 月,也就是最近一年內的,但發現還是有遺漏一些步驟 ,因此勢必還是要由我自己來親自為大家說明一下了!



這邊先講結論,方法是在 Facebook for Developers ( https://developers.facebook.com/apps )上建立一個應用程式,然後將你想要嵌入的外部網址輸入進去,最後再把它加入到你的粉絲專頁內就搞定了。



只是操作過程裡面還有滿多我不太確定和不太了解的地方,但目前最後的結果是可以運作的,不過也有可能哪天又忽然失靈的也不定。以下我會逐步還原我找到這個方法的經過。


首先我也不是很確定 FB 粉專自訂的自由度能到哪裡,所以我是把我很久之前創的沒在用的粉專拿來做測試,因此也是那時才認識畫面左方那一個一個項目其實叫做頁籤(Tab)。

但 FB 粉專設定裡面「範本與頁籤」內的項目是固定的,無法做更改,只能選擇顯示或隱藏,無法直接新增第三方來源。接著發現「FB 社團」內的活動是使用者可以直接選擇是否要用月份行事曆檢視的方式,因此嘗試了用網址來更改顯示方式,但最後是失敗的。因為其實我也不懂語法,所以有點瞎猜著在試而已。



當時還有想到一個比較快的方法是,只要看到其他粉專也有相同的做法,就可以直接拿來研究或私訊他們詢問,但可惜真的沒有特別有印象哪個粉專用過類似的頁籤,因此只能先隨處瀏覽。

後來看到了前公司 CLBC 的粉專,有一個「預約」的頁籤,點進去發現是內嵌自己 CLBC 的官網,因此心中燃起一絲希望,應該可以試試看哦!不過那時候想說還是找找看有沒有已經有人寫好的頁籤,直接拿來用會比較快。



接著看到了也是做活動場地的 Kafnu,他有一個「Instagram」的頁籤,點進去看發現不得了,下面有「Add this app to your Page」以及該頁籤的來源和作者等資訊,因此我就馬上點來新增試用,最後測試後是可以用的!



食髓知味的我就開始 Google 網路上有提供寫好的內嵌網址頁籤來用,花了時間找了一下研究了一下,最後選定好卻發現竟然無法新增到自己的粉專,頭都洗完了竟然給我來這個!



因此我先回到 Instagram 頁籤研究了一下,發現作者也有開發 Html 嵌入的頁籤,再度測試加入再度失敗,就在想問題到底出在哪裡。

將錯誤資訊的文字訊息:「This page does not have permission to install the custom tab.」直接貼上 Google後,剛好有搜尋到唯一一篇中文的文章,內容是在說因為 Facebook 的政策有變才導致無法使用的。而解決方法有兩個,一個是你的粉絲專頁人數要超過 2000 人;另外一個是自己用 Facebook for Developers 建立一個自己的應用程式頁籤。

因此就只好認了,還是自己做一個比較快,參考文章內的教學,最後一樣是在最後一步點擊新增粉絲專頁後又再度失敗了,不過這次出現的是另外一個錯誤訊息:

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.



一樣將文字餵到 Google,很幸運的又出現了唯三的中文文章,其中一篇文章有著更詳細的建立應用程式建立教學,不過裡面有其他網友詢問和我遇到相同的問題,不過作者的回覆似乎沒有辦法解決我的問題,因為重新檢查後,我操作輸入上確實都是正確無誤的。

那時候我想說,好吧!可能是 Facebook 會擋 Google 的網域吧!我先測試別的看看好了,結果一換成別的網域就新增成功了!接著我就又再度把網址改回 Google Calendar 的網址,更新後也同步顯示出日曆的內容!

但這裡又出現另外一個問題,這個頁籤只有我自己看得到,我用無痕視窗、以及我朋友的電腦是看不到的。我就在想說到底又是哪裡出了問題,然後我也一直找不到那篇更詳盡的教學文章中所說的「應用程式審查,是否發布」的按鈕在哪裡。



推測了一下可能就是在 Facebook for Developers 畫面上方置頂的按鈕未開啟,點進去之後是顯示,需要填寫設定內基本資料的「隱私政策網址」,當時我也不太理解這個東西,而且基本資料裡面很多名詞對我來說也是陌生的沒看過。

因此最後還是 Google 了一下「隱私政策網址」,發現似乎是在建立任何種類的應用程式都必須要提供的東西,而且好像是最近才有的要求。一樣搜尋研究了一下大家比較常用的隱私政策產生器( https://privacypolicies.com ),勾選填寫好就完成了。

最後將產生的隱私政策網址填入 Facebook for Developers 的基本資料內,按鈕就可以點選成開啟狀態了。而開啟狀態下應用程式頁籤,也順利的可以對外正常看到了。



整理一下,整個摸索過程從禮拜二早上 11 點接到朋友的需求後開始研究,弄到下午 5 點左右暫時中斷,到禮拜三下午 5 點繼續上工,一直到約晚上 9 點終於完成,大約歷時 10 小時左右。因此希望有遇到相同問題的人,搜尋到這篇文章有幫助到你節省一點點時間,有任何不詳盡的地方也可以留言給我,我會補足說明的,謝謝你的閱讀!

留言

  1. 您好,可以請您再詳細一點解說該如何操作嗎?
    我的目的一樣是希望在粉絲團建立一個大家都看得到的日曆
    拜託您了!謝謝

    回覆刪除
    回覆
    1. 有收到您的FB私訊了,剛剛有錄製了一段螢幕錄影的操作畫面給您:https://www.youtube.com/watch?v=okdzuRI6JC4&list=PLVz9yHJEFRTatzTAM4AJpf9F2noJG-8Yk

      不過最後的結果是失敗的,可能這半年期間FB又有一些調整,只能再 Google 一下
      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.
      有沒有其他人已經有解決的辦法了~

      刪除
    2. 所以目前還是無解對嗎? 目前也被想新增facebook頁籤(外站連結)困擾著

      刪除
    3. 是的,目前我這邊還沒有找到辦法可以解決,可能再搜尋看看網路上有沒有相關資訊,或加入相關討論的社團問問看

      刪除
    4. 我是直接使用一個支援https的空間~直接開個網頁寫入google日曆的內嵌程式碼,然後直接存網頁上傳到支援https空間,把傳好的網址直接去貼在"安全粉絲專頁頁籤網址"

      https://www.facebook.com/PiLaoBanPiGeZhuanMai

      刪除
    5. 謝謝皮老闆的留言,不過因為你的粉專按讚數有6000多,前一陣子似乎是按讚2000以下的粉專都沒辦法外嵌頁籤的。
      目前我還沒測試皮老闆的方法,但其他網友如果有看到的話可以測試看看2000讚以下是不是也適用哦

      刪除
    6. 您好~看起來2000以下不適用,感謝大大的教學 T^T

      會出現下列錯誤訊息

      錯誤
      This Page does not have permission to install the custom tab.

      API Error Code: 2069016
      API Error Description: Custom tab feature is restricted to use for selected pages and apps only. We require page fans>2000.
      Error Message: Access denied

      刪除
    7. 先謝謝樂心絹印你的測試!

      因為最初發現失效的時候大約是在2019年的7月左右
      現在也剛好是2020年的8月,這樣剛好也滿一年了
      因此大致可以確定FB沒有要再做調整了

      最後再次感謝你的回覆與分享,謝謝您!

      刪除
  2. 剛插入頁籤成功了耶,雖說我不是要崁入google日曆,但也試過崁入google map連結也不成功,但如果是其他非google的網站卻可以,非常神奇

    我是參考你這篇以及搭配
    https://parkerro.tw/%E7%AD%86%E8%A8%98facebook-%E7%B2%89%E7%B5%B2%E9%A0%81%EF%BC%8C%E6%96%B0%E5%A2%9E%E9%A0%81%E7%B1%A4%E7%9A%84%E6%96%B9%E6%B3%952016/
    這個介紹,給大家參考

    總之,還是非常感謝David的分享:))))完全拯救了我順便破解了它

    回覆刪除
    回覆
    1. 如果插入一般非 Google 網站的頁籤是成功的話,可以試試看在插入成功後,將網址改回 Google 網站的網址,搞不好也可以偷渡成功哦!

      刪除
  3. 這邊有說明,為了確保品質與安全,需要2000讚以上的粉絲頁才能用
    https://developers.facebook.com/docs/pages/tabs

    回覆刪除

張貼留言

這個網誌中的熱門文章

[教學] iCHEF POS App 主機切換 & 軟體卡頓恢復