[網頁設計] Facebook粉絲團嵌入iFrame做法(非FBML外掛)

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 林盈岑 Carol Lin
凱士數位科技有限公司
網頁設計師 (~2012.8)

Comments  

amber
0
#1 amber 2011-07-13 13:20
你好:
我照著設定都不能成功
最後的頁面都顯示不出來
其他的地方真的都不需要設定嗎?
Quote
 
Carol
0
#2 Carol 2011-07-13 13:44
親愛的amber您好:

謝謝您的提問~
關於這設定部分的疑問,我們自己測試是沒問題,設定也跟上面一樣~目前也正常在運作中~

您可以參考下面的連結:
www.facebook.com/720armour

不知您方不方便把您的設定畫面拍下來,
再貼到word中寄給我~
我再找時間幫你找看看~~

我的e-mail如下:

祝 順心~
Quote
 
wendy
0
#3 wendy 2011-07-18 11:49
怎麼我看到的畫面跟您的都不一樣 啊???
Quote
 
Carol
0
#4 Carol 2011-07-18 12:02
親愛的wendy您好:

這部分要看到您的網站頁面才能知道您的狀況,

不知您是否也可將您的顯示畫面拍下來,並告知您所使用的瀏覽器為哪種(IE6、IE7、IE8、Chrome、firefox…)寄給我,找時間幫您看看~
這樣可以比較好判斷您面對的狀況並加以解決喔~

我的e-mail如下:

祝 順心~
Quote
 
wendy
0
#5 wendy 2011-07-18 14:00
找到了
Quote
 
Carol
0
#6 Carol 2011-07-18 14:04
親愛的wendy:

有找到就好,如有問題可再來詢問喔~
Quote
 
雷
0
#7 2011-07-19 08:39
請教一下(Carol)大大,設定完成後的應用程式內部語法連結要在哪裡設定??

另外此應用程式想寫成FBML,但是我不知道語法要寫在哪裡,懇請(Carol)大大賜教~感謝您 :-)
Quote
 
Carol
+1
#8 Carol 2011-07-19 16:57
親愛的雷:

您好,我不太確定您的意思是不是跟我想的一樣~
我先試著回答您的問題看看,如有疑問可以再詢問喔~

我的做法和以前FBML應用程式不太一樣,
以前的FBML可以直接貼程式碼,然後就能在FB上顯示~

但我這種做法是要先有「已經在網路上的網頁」,
將FB當一個跳板,去連結你的網頁而已~

所以說如果要去改程式碼的話,
當然要去改「在網路上的網頁」,
而不是直接去FB上改~

這樣不知道有沒有回答到您的問題?
Quote
 
雷
0
#9 2011-07-19 20:18
嗯~相當清楚;那請問一下我要讓 網頁連結的話網址要放哪各位置, 那我同一個粉絲專頁上要放置2~ 3各連結,同一個應用程式可以不 斷新增再同一個粉絲頁嗎??
Quote
 
Carol
0
#10 Carol 2011-07-20 09:01
親愛的雷:

問題1、放外部網頁連結的位置:

請看上述步驟教學:
「應用程式設定二:「facebook集成」標籤」的第二點「「標籤網址」(*必填欄位):輸入想嵌入的網站網址。」
那邊就是您放網址的位置~

問題2、在同一個粉絲專頁上是否可放2、3個連結,同一個應用程式可否不斷新增在同一個粉絲頁:

依我之前測試的經驗,同個應用程式是可以一直新增在同個FB粉絲頁的(那時測試的是FBML)。

不知您指的是不是說要在同個粉絲團上放2、3個「不同」的連結?
如果是相同的連結,您只要一直新增應用程式就可以了。

如果是不同的連結,
因為FB應用程式一次只能嵌入一個網頁頁面,
所以如果是有2、3個不同的連結網址,
那麼您就要多做2、3個應用程式去嵌入到粉絲團中,
做法請參照我上面的教學即可。

不知是否有解決您的問題?如有問題歡迎再提出~
Quote
 
雷
0
#11 2011-07-20 14:14
恩~了解,相當清楚~感謝(Carol)大大解說!

現在的FBML會讓粉絲頁掛點無法開啟應用程式,想自己製作新的FBML應用程式,但是不知道該如何寫語法~

繼續搜尋爬文~
Quote
 
Carol
0
#12 Carol 2011-07-21 09:00
親愛的雷:

您好,如果您想自行製作FBML程式,
可以去研究fb的APP(應用程式)開發部分,
去GOOGLE上打入「應用程式 FACEBOOK 開發」

就會有許多人有寫上他們開發的經驗,
相信一定能找到您的需求~

加油囉!
Quote
 
zive
0
#13 zive 2011-08-12 14:57
我有遇到一個問題
在選了Auto-resize後
但是網頁的高度還是被限制有拉耙
Quote
 
Carol
0
#14 Carol 2011-08-12 15:12
親愛的zive:

您好,您所遇到出現拉把的問題我也有遇過,
您可試試「把網頁的高度加大」
拉把就會消失了!
Quote
 
CHRIS
0
#15 CHRIS 2011-10-25 18:12
您好~請問要做成像馬英九總統的 臉書首頁("歡迎"標籤的那一個 )上的圖片連結也是照上面教的那 樣嗎??謝謝您的回答
Quote
 
Carol
0
#16 Carol 2011-11-02 17:17
親愛的Chris:

您好,您問的問題很好,這個部分我們會再研究一下,等到有結果時會再回來回覆您~
謝謝您的提問^^~
Quote
 
Andy
0
#17 Andy 2011-12-22 20:59
你好 在新的設定頁面 沒有 Page Tabs 請問要從哪裡設定??
Quote
 
Carol
0
#18 Carol 2011-12-23 09:55
Dear Andy:
您好,您並不須要執著於Page Tabs 這個標題名稱,因為fb隨時會改變,您只要去找出長的一樣的設定頁面就可以了~

進入方法:
1.到你設定的程式頁面
2.按下右上方的button「編輯應用程式」
3.往下滾,到「請選擇你的應用程式如何跟Facebook結合」那邊,就是新的Page Tabs設定頁面了
Quote
 
Carol
0
#19 Carol 2011-12-23 10:06
Dear CHRIS:

您好,有關於馬英九總統的臉書首頁("歡迎"標籤的那一個)上的圖片連結,我猜想您可能是要問「歡迎標籤」旁邊的那個「星星」圖示要如何設定,解法如下:

1.請進入你所開發的「應用程式」編輯設定頁面
2.在設定頁面的最上面,有寫你的應用程式名稱、App Id、App Secret那邊下面,有個「編輯圖示」,從那邊上傳16*16,大小在5mb以下的icon圖示即可

不知這樣是不是有解決您的問題,
如有問題歡迎再來信詢問喔!謝謝您~
Quote
 
richard
0
#20 richard 2012-01-11 17:58
不好意思..新開應用程式 相關的設定都設定好了

就是一直找不到應用程式專頁的連結按鈕 是FB已經把這功能拿掉了嗎?
Quote
 
Carol
0
#21 Carol 2012-01-12 09:04
Dear richard:

您好,謝謝您的提問~
操作步驟如下:
1.請您先進到您所創的應用程式頁面
2.按右上角的「編輯應用程式」
3.點擊左邊的「查看應用程式專頁」選單
4.進到你創立的應用程式專頁,左邊選單有「加到我的粉絲專頁」
5.請延續上面的藍色標題「將已設定好的應用程式加入粉絲頁:」步驟繼續做下去就可以囉!

希望有回答到您的問題^^~
Quote
 
Dano
0
#22 Dano 2012-01-17 18:52
你好,不好意思想要請教一下。我 在Page Tabs設定頁面完成並儲存後, 想要將已設定好的應用程式加入粉 絲頁,但是找不到地方可以進行, 有看到您於留言回覆richar d的解決辦法,但照該方法還是找 不到應用程式專頁的連結按鈕,請 問是不是FB後來又有更改了設定 呢?
Quote
 
Carol
0
#23 Carol 2012-01-19 16:34
Dear Dano:

您好,感謝您的來信,我有新增圖文教學,放在上面文章的「補充-新版的fb應用程式專頁進入方式(2012/1/19更新):」中,裡面有圖片說明~

希望能解決您的問題唷!
Quote
 
彭瀞萱
0
#24 彭瀞萱 2012-01-21 02:47
您好,想請教有關上述過程,我從按下新增應用程式之後,所有的畫面與格式都長的與你的不一樣耶.....@__@?
我也沒有facebook集成的選項,所以根本無法設定「標籤名稱」與
「標籤網址」.....>"<
您新補充的畫面第二個圖,【查看應用程式專頁】可是我卻出現【翻譯你的應用程式】....這到底是怎麼回事?
為什麼都與您的不同?我只是想把google的問券表單崁進粉絲專業,我卻看著你的教學,自己搞了3小時,超沮喪的快哭了...
Quote
 
Carol
0
#25 Carol 2012-01-30 12:18
Dear彭小姐:

這幾天我有去測試,
的確如您所說,不會出現應用程式專頁,
我有試出應用程式專頁,但它並沒有加入粉絲團的功能

我後來再用我自己的帳號去測,
新開的應用程式頁面和您的畫面一樣,也沒有加入粉絲團的功能,只有之前開的應用程式還可以加入粉絲團。

據推測應該是FB有做更新,目前暫時無解,
如果還要相同功能還要找時間再研究囉!

不好意思沒能幫上您的忙~
Quote
 
storm
0
#26 storm 2012-01-31 03:34
基本上 fb新政策是把同名的app與粉絲頁綁在一起,一個app只准用在一個同名的粉絲頁
以下是最新做法,有點盧小,剛好路過,大家參考看看
把以下網址改成你的app id 跟粉絲頁網址
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
Quote
 
Soga
0
#27 Soga 2012-02-01 17:01
要加App到頁籤, 官方的目前看來只剩這個方法了:
http://developers.facebook.com/docs/reference/dialogs/add_to_page/
用它下方 Direct URL Example 的部份比較方便, 就是Storm兄說的網址
Quote
 
Carol
0
#28 Carol 2012-02-01 17:15
謝謝storm與soga回覆~
想使用的朋友們可以先行測試看看唷~

祝大家新年快樂~
Quote
 
Xiahdan
0
#29 Xiahdan 2012-02-01 17:32
赞赞赞!!!困扰了我好几天的问 题终于解决了。。万分感谢啊~~
Quote
 
偉
0
#30 2012-02-19 11:12
感謝storm與soga兄
找了老半天的問題終於也解了...呼
謝謝謝謝!!!
Quote
 
eva
0
#31 eva 2012-06-28 09:37
版主您好,
點選:(http://www.facebook.com/developers)網頁,一直跳不進去此網頁去建立新的應用程式,只呈現我自己的facebook粉絲頁,為什麼呢?

煩請指教,謝謝您。
Quote
 
Carol
0
#32 Carol 2012-07-03 11:00
親愛的eva:

您好,謝謝您的提醒,我推測是FB改版,所以他的網址又不一樣了,目前新版的網址如下:
http://developers.facebook.com/
麻煩您再確認看看進不進得去囉^^
Quote
 
Bater Lin
0
#33 Bater Lin 2012-07-23 10:05
聯絡訊息:Dear 版主您好: 想請問您有關「Facebook 粉絲團嵌入iFrame做法(非 FBML外掛)中」的問題~ 我自己是卡在第二步驟~找不到「 b.進入後,找到左下角的「查看 應用程式專頁」,點擊進入,即可 進入下一步驟囉!」 因為在我的左下角只有五個選項~ 就是沒有您說的「查看應用程式專 頁」, 請問是哪個部分該注意的嗎???
Quote
 
Carol
0
#34 Carol 2012-07-23 10:11
Dear Bater Lin,

我把您的問題貼在網站上,這樣其他的訪客也都可以從你的問題中學習喔!

謝謝您的提問,在第二步驟的部分,因為FB已經改版了(如我在本篇文章開頭寫的紅字,本教學於2012/1/30時已不適用)

如果您想用這個功能,請至用「FB APP Static Iframe Tab」來達成您的需求吧!
網址如下:
http://www.cadiis.com.tw/facebook-fb-app-static-iframe-tab2012.html

預祝您順利成功~
還有任何問題歡迎再留言詢問囉!
Quote
 
alex
0
#35 alex 2012-07-26 18:22
試試myapp.im中文版 的 facebook 粉絲團應用程式http://w ww.myapp.im/ite m-show.html?&id =22658
Quote
 
eva
0
#36 eva 2012-08-10 10:40
謝謝您^^
Quote
 
Augusta
0
#37 Augusta 2014-04-12 10:06
Its popularity spread to the Middle East and
Europe before becoming popular in America within the last 10 years.

Wondering what other ways are there to test products instead of animal testing.
In order to keep her skin youthful and beautiful
as always, she uses only natural ingredients obtained from nature
like milk and honey.

Here is my web site ... กลูต้า
3 พลัส
Quote
 
Aiden
0
#38 Aiden 2014-04-12 12:48
The Greeks believed that the proportion of the features of any beautiful person must be
as per golden ratio. The digital camera is waterproof, that means that it could perform usually even
if it rains. This is a powerful herb that penetrates deep into
the breast tissue thereby increases the breast size.


Feel free to visit my weblog - กลูต้า
3 พลัส
Quote
 

新增留言


安全碼
重新整理

相關文章

歡迎轉載blog文章,轉載時請留原文網址,感恩!
如果您喜歡我們的Blog,可以直接訂閱網頁設計Blog電子報,或是加入我們的網頁設計Facebook
* 因時間有限,而網頁教學的狀況也很多,可能無法一一回答大家的問題,我們會用工作之餘的時間盡量回覆大家,或請網友們互助回覆,不便之處還請見諒。