[教學] 在 FB 粉專內加入一個「內嵌外部網站」的頁籤——以 Google 日曆為例
今天要教大家的是,如何在 Facebook 粉絲專頁裡面新增一個「來自外部網站內容」頁籤(Tab)的方法。
然後在 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 小時左右。因此希望有遇到相同問題的人,搜尋到這篇文章有幫助到你節省一點點時間,有任何不詳盡的地方也可以留言給我,我會補足說明的,謝謝你的閱讀!
您好,可以請您再詳細一點解說該如何操作嗎?
回覆刪除我的目的一樣是希望在粉絲團建立一個大家都看得到的日曆
拜託您了!謝謝
有收到您的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.
有沒有其他人已經有解決的辦法了~
所以目前還是無解對嗎? 目前也被想新增facebook頁籤(外站連結)困擾著
刪除是的,目前我這邊還沒有找到辦法可以解決,可能再搜尋看看網路上有沒有相關資訊,或加入相關討論的社團問問看
刪除我是直接使用一個支援https的空間~直接開個網頁寫入google日曆的內嵌程式碼,然後直接存網頁上傳到支援https空間,把傳好的網址直接去貼在"安全粉絲專頁頁籤網址"
刪除https://www.facebook.com/PiLaoBanPiGeZhuanMai
謝謝皮老闆的留言,不過因為你的粉專按讚數有6000多,前一陣子似乎是按讚2000以下的粉專都沒辦法外嵌頁籤的。
刪除目前我還沒測試皮老闆的方法,但其他網友如果有看到的話可以測試看看2000讚以下是不是也適用哦
您好~看起來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
先謝謝樂心絹印你的測試!
刪除因為最初發現失效的時候大約是在2019年的7月左右
現在也剛好是2020年的8月,這樣剛好也滿一年了
因此大致可以確定FB沒有要再做調整了
最後再次感謝你的回覆與分享,謝謝您!
剛插入頁籤成功了耶,雖說我不是要崁入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的分享:))))完全拯救了我順便破解了它
如果插入一般非 Google 網站的頁籤是成功的話,可以試試看在插入成功後,將網址改回 Google 網站的網址,搞不好也可以偷渡成功哦!
刪除這邊有說明,為了確保品質與安全,需要2000讚以上的粉絲頁才能用
回覆刪除https://developers.facebook.com/docs/pages/tabs