Facebook粉絲團已成為幾近年最流行的網路宣傳推廣平台之一,因應時代潮流,許多公司的宣傳行銷活動的工具都逐漸以Facebook為主要管道。但進一步想要在Facebook粉絲團中「嵌入自己的網站頁面」這麼簡單的需求,似乎不是件容易的事。目前網路上許多部落客熱情分享的「FBML」嵌入頁面的方式,已經於2011年被Facebook官方強制移除此功能,因此經過小編花了數小時的時間不斷研究,終於找到了解決辦法。

小編一開始也是使用別人所說的FBML來嵌入頁面,好不容易找到安裝方法,花了許多時間測試,但結果事與願違,有部分功能已經被Facebook官方封鎖(ex: 無法顯示iframe功能),但小編不放棄,持續尋找其他解決方式。

最後,在經過小編幾個小時努力的尋找後,終於找到外國人如何解決此問題的影片教學,此方法經小編測試是成功的,因此撰寫教學分享給大家,提供給大家使用上的參考:

概念

原本FB粉絲團上的FBML外掛不能用,所以利用Facebook上有開放成為外掛開發者的功能,成為外掛開發者,開發一個「應用程式」,再利用應用程式設定中的外部網頁連結,將網站頁面當成應用程式,「應用」到粉絲團頁面中。

目標

在開始製作之前,這次預計會產出的結果如下圖。目標是可以將facebook粉絲團中嵌入「問卷」頁面,讓加入粉絲的朋友們可以在粉絲團頁面上,填問卷抽獎!

alt
上圖可看到完成後的成果,左欄新增了自己試做的網頁按鈕,右邊是嵌入成果

 

操作方法

事前準備工作:

  1. 已經有要嵌入的網頁在網路上。
  2. 已有現成粉絲團 (必需為管理者身份)。

 

接下來有兩大階段:

  1. 申請並建立自己的Facebook應用程式
  2. 將已設定好的應用程式加入粉絲頁

詳細步驟說明如下:

 

1. 申請並建立自己的Facebook應用程式

  1. 申請為FB的外掛開發者,申請連結如下:http://www.facebook.com/developers
  2. 經過FB(手機簡訊)驗證後,就可以按「新增一個應用程式」,開始進行設定。
  3. 設定方法:按下「建立新的應用程式」後,開始設定相關資料。


alt
進入fb外掛開發者網頁的畫面,因小編已驗證過了,右上角已可開始新建自己的應用程式囉!

 

應用程式設定一:「相關介紹」標籤

這裡設定你的應用程式基本資料,有些資料是必填的。

  1. 應用程式名稱:自訂(*必填欄位)
  2. 群組簡介:自訂
  3. 電子郵件:(*必填欄位)

alt

 

應用程式設定二:「facebook集成」標籤

1. 設定Iframe大小(非必填):

在「facebook集成」下的「Canvas」,設定你想顯示的框架Iframe 大小,建議可設定為Auto-resize(自動)。

alt

 

2. 繼續往下設定,在「facebook集成」下的Page Tabs」中設定:

  • 「標籤名稱」(*必填欄位):你要顯示在FB粉絲團左欄頁面上的名稱。
  • 「標籤網址」(*必填欄位)輸入想嵌入的網站網址。

alt


3.都設定完後,按下「儲存」,完成應用程式的設定。

 

將已設定好的應用程式加入粉絲頁:

1、上述的應用程式部分已設定完成後,按下「應用程式專頁(Application Profile Page)」,連結到剛設定好的應用程式專頁去。

(註:設定完成後FB會給你一份應用程式ID、API金鑰與應用程式密鑰,不可隨意公佈給別人,不然你設定的應用程式會有被盜用的風險)

alt

 

補充-新版的fb應用程式專頁進入方式(2012/1/19更新):

因Facebook更新了,找不到設定位置的朋友來信詢問次數也增加許多,故小編在此增加圖文教學,提供各位網友們參考囉!

a.用 http://www.facebook.com/developers 網址進入,登入你的帳號後,可以看見設定好的應用程式頁,點擊右上角「編輯應用程式」。

 

b.進入後,找到左下角的「查看應用程式專頁」,點擊進入,即可進入下一步驟囉!



2.按「加到我的粉絲專頁」,選擇你要嵌入的粉絲團,按「加入到我的粉絲專頁」,並選擇你要加入的粉絲專頁。

alt



3. 接下來,離開應用程式介面,回到你要嵌入的那個粉絲團去(必須是管理者身份),按上方的「編輯內容」或左欄的「編輯」進到後台管理介面。

alt



4.左側選「應用程式」,可以看到最下面有你剛加入的應用程式

alt



5.按「編輯設定」,看你是否已新增在你的粉絲頁中了

alt

因版主已經有新增一個現成的,所以上面已經顯示已新增囉!


6. 回到粉絲團,看看左欄有無出現剛才設定的應用程式,再測試一下網頁是否可讀取,便大功告成囉!

alt

 


教學到此結束,謝謝大家的收看,如果有疑問歡迎來信或留言,一同來交流與討論喔!

 

{#Carol}