Facebook教學|Like Box 安裝教學（舊版稱粉絲視窗Fan Box） @ 網路行銷零元本鋪|Facebook網路行銷教學

本部落格主題為Facebook行銷為主，其他專題請見：
Taiwan SEO College | 台灣SEO學院 http://blog.seo-tw.org/
粉絲專頁 http://www.facebook.com/epromotor

Apr 22 Thu 2010 14:17
Facebook教學|Like Box 安裝教學（舊版稱粉絲視窗Fan Box）

這幾天要幫公司網站上粉絲視窗到網站上，偏偏Facebook Widget中的Fan Box（粉絲視窗）怎麼弄都是有問題。在昨晚f8公開Graph API之後才發現，原來Widget已經進化了！現在這些插件被統稱為Facebook Soical plugins。那天在安裝Facebook Comments的時候就有注意到這個改變了，只是沒有時間去深究。（其他詳細介紹請見[Facebook實務教學] 把Facebook加到你的網站 - Welcome to Web 3.0 Age一文）由於安裝方式跟過去略有改變，所以在這邊我們就從大家最需要的Like Box Step by Step的開始講起（專頁視窗，裝了之後會比較專業嘛？）

安裝教學

1. 首先我們來到Social plugins的首頁 http://developers.facebook.com/plugins

2010-4-22 上午 09-22-00.png

2. 點選 Like Box

2010-4-22 上午 09-22-00.png

3. 進到內頁，首先我們先輸入要掛入Like box的粉絲專頁（或App）的網址

2010-9-11 上午 12-42-56.png

4. 調整自己想要設定的參數

2010-4-22 下午 03-10-24.png

Width：專頁視窗的寬度

Height：專頁視窗的高度

Connections：視窗下方要顯示多少個喜好專頁的人

Strearm：是否要顯示即時動態

Header：是否要顯示標題「Facebook 上等你來找」字樣

5. 都設定完畢後按下"Get Code"，程式碼就會顯示出來了唷！

2010-4-22 下午 03-15-14.png

之後請依照個BSP或服務的說明嵌入程式碼即可。我的專頁視窗終於回來了

2010-4-22 下午 03-18-45.png

後記：關於Facebook Page ID的部份，我相信在未來Facebook應該會把它改成跟之前一樣，使用下拉式選單的。舊版的粉絲視窗目前看起來式運作正常，官方也沒有終止舊版程式碼的打算（的樣子），如果舊版的運作正常，也就不用花心力去更新成新的啦！不過這對使用Google Site的朋友可以說是一大福音啊。這次的截圖製作方式算是嚐試性作品，不知道大家還習不習慣呢？

2010/9/11更改

現在不是輸入Page ID，而是改成輸入網址，比以前方便多啦！

Posted by eProMotor at 痞客邦 PIXNET 留言(34) 引用(0) 人氣()

Shorten Url Forward by E-mail Forward to Guestbook

全站分類：Digital Life
Personal Category:Facebook教學
Previous post in this category: Facebook教學|把Facebook加到你的網站 - Welcome to Web 3.0 Age
Next post in this category: 打造方便分享的網頁|Open Graph Protocol篇
上一篇： Facebook教學|把Facebook加到你的網站 - Welcome to Web 3.0 Age
下一篇：社群媒體真的能帶來高的轉換率嘛？

Posts on this date

▲top

Trackbacks (0)

留言列表 (34)

Post Comment

#1 uniquevera on 2010/04/27 00:32
請問一下~ 用Facebook登入的那個要怎麼弄阿? 試好久都不行
登入的教學文，正在努力寫當中 XD

04-28 還沒潤稿的版本寫完嚕～歡迎回來看
[Facebook教學] Facebook Lobin（登入鈕）安裝教學
http://epromotor.pixnet.net/blog/post/31036756
eProMotor replied in 2010/04/28 18:20

#2 dlmisaki on 2010/04/27 17:27
請問一下，安裝在痞客邦，需要調整程式碼嗎?我試了很多次都沒有辦法成功顯示在部落格上，像你側欄那樣....@@
登入的部份嘛？還是哪一個呢？登入的話的確是要另外調整唷
eProMotor replied in 2010/04/27 17:35

#3 dlmisaki on 2010/04/27 23:53
嗯~登入的部分...實在搞不懂！
04-28 還沒潤稿的版本寫完嚕～歡迎回來看
[Facebook教學] Facebook Lobin（登入鈕）安裝教學
http://epromotor.pixnet.net/blog/post/31036756
eProMotor replied in 2010/04/28 18:20

#4 dlmisaki on 2010/04/28 21:45
終於懂了~謝謝你喔！

#5 aova on 2010/05/03 20:07
您好，想請問一下
我有成立粉絲團，並把粉絲團的網址個人化
後來想要使用粉絲視窗來PUSH粉絲團
卻發現粉絲視窗必需要有PAGE ID
於是我GOOGLE了一下找到您這篇文章
有說明在網址列輸入 http://graph.facebook.com/註冊的個人化名稱
即可顯示其PAGE ID。用火狐開也的確有成功看到
{
"id": "3489194414XXX",
這樣的東西。
我把這串ID碼複製去粉絲視窗
右邊預覽能看見的，的確是我粉絲團的資料
但是將code貼回網誌後，iframe裡卻仍是出現錯誤訊息
　
讓我百思不得其解
　
現在可以確定的是我另一個還沒個人化的粉絲團
使用PAGE ID設定粉絲視窗是成功的
　
另一個在尚未個人化時設就好的粉絲視窗，
在網址個人化後也一樣可正常使用

只有已經個人化後的粉絲團無法正常呈現。
所以想請問我是不是忽略了什麼步驟呢？
導致我PAGE ID輸入後還是無法正常呈現粉絲視窗？
謝謝您！！！
這的確是百思不得其解...能否給我觀看粉絲專頁及錯誤的畫面，這樣才能夠做正確的判斷
eProMotor replied in 2010/05/04 10:02

#6 FB小小 on 2010/05/08 08:08
FB 留言版在IE無法顯示的BUG
零元大大您好
不知道大大有沒有發現您站上的FB留言版用IE瀏覽時候出不來,非IE的都可以
可否研究後也一並分享給大家
PS
如果是引用http://connect.facebook.net/zh_TW/all.js的方式就不能出現
但是引用http://static.ak.connect.facebook.com/connect.php/zh_TW這種的就可以

BUT 以上兩種引用方式都各有支援FBML不完整的狀況,困惑也阿........
這個問題純屬fb:comments的bug，官方論壇上也是哀鴻遍野 XD。所以我暫時也無解摟～不
eProMotor replied in 2010/05/08 08:40

#7 請問 on 2010/05/14 16:07
請問一下page ID一定是要自己創建的粉絲專頁嗎?
因為我測試別人創的粉絲專頁用like box都無法顯示塗鴉牆的資訊
但是我用自己開設的粉絲專頁就可以看到塗鴉牆的資訊
不一定啊，的確是可以安裝他人的粉絲專頁的。如果發現無法顯示的話，最近Open Graph 小bug，真的是多多多多到爆炸，敬請靜候一段時間吧.....小黑我也無奈的攤攤手，像現在連小黑我的Like Box也掛了 Orz
eProMotor replied in 2010/05/14 16:54

#8 najacoby on 2010/05/17 01:20
您好，請問要怎麼在pixnet上加裝facebook說讚按鈕(like plugin or like button)？→http://developers.facebook.com/docs/reference/plugins/like 由於pixnet與法比較不一樣我怎麼都試不出來...。
在Pixnet用iframe格式的就可以了，你看本鋪最上面有安裝呀～就是用iframe格式安裝的 ^___^
eProMotor replied in 2010/05/17 10:00

#9 aova on 2010/05/30 00:07
您好～之前有問過您FB的問題～的確是FB那邊自己有問題XD現在都正常了！
然後就是要請問您～
我也試用PIXNET 想安裝FB的留言板
我照著您的教學文章弄好了
但是.......留言板不能鑲在文章裡
都會跑到整個網誌頁面的最下方@@
所以想要請問～
您是怎麼把留言板放在網誌的欄位中的@@
(請見我的PIXNET: http://aova.pixnet.net)
非常感謝！！！
您的資訊超實用的~~~~~~~~~~~~
像我一樣嘛？方法請利用這篇文章：讓每篇文章自動加入 Google AdSense
http://nelson.pixnet.net/blog/post/3967606

eProMotor replied in 2010/05/30 00:48

#10 aova on 2010/05/30 20:18
非常謝謝你！所以是只要把「<fb:comments xid="api id" width="400"></fb:comments>」貼到<br/><br/>中即可嗎？真是不好意思問這麼多..因為我只懂html，但是涉及程式語法就有點苦手了!= ="
是的是的 :D
eProMotor replied in 2010/05/30 20:54

#11 aova on 2010/05/30 20:26
不知道有沒有做對，因為有看到程式在跑..不過跑很久都跑不出來T_T
嗯嗯，基本上Comments Box常常會有問題，不過我有看到有成功唷 :D 也有可能是js的關係

可是你掛了兩次啦 >_<
eProMotor replied in 2010/05/30 20:58

#12 aova on 2010/06/01 01:42
火狐是一個 IE看起來就兩個超怪的！我重掛看看
謝謝你的幫忙唷!!很多有關FB的資訊都是在你這學到的!
非常感恩！！！！^^

#13 mival on 2010/06/25 13:48
不好意思我想請問一下
關於安裝在痞客邦上的like button

如果照著FB上的程式碼貼進去的話
只能對那時設定的網址說讚
如果要分別對不同的文章說讚的話
那程式碼要怎麼調呢？
（還是只能單篇手動一個一個改啊．．．？）
目前是手動唷，痞客邦死腦筋，到現在不開放我也沒辦法（攤攤）
eProMotor replied in 2010/07/01 16:16

#14 流浪兔保護協會 on 2010/07/21 23:18
貼出來是透明的
請問~
我按照您教的步驟安裝後
不知為何FAN BOX的背影是透明的 >_<"
請問您知道原因嗎?
不好意思~先謝謝您
http://rabbitsos.pixnet.net/blog
哈哈，其實我以前就有發現只是因為背景本來就是白的，所以沒有太care。

不過如果真的需要背景是白色的話，請用iframe格式，找到「style="border:none; overflow:hidden;」這一小段，將他改成「style="border:none; overflow:hidden;background-color:#fff;」即可
eProMotor replied in 2010/07/24 12:17

#15 sun on 2010/07/30 19:45
請問一下，這個可以放置在無名嗎？
因為我是了很多次都不成功～
如果可以放的話可以教教我嗎？
謝謝你呦～～
真的要做社群媒體行銷網路行銷，近期內無名不是個最好的選擇。因為他有太多的Java
Script不支援
eProMotor replied in 2010/07/31 09:28

#16 sun on 2010/07/31 22:46
所以是目前無名還無法放囉？ˊˋ
是啊是啊
eProMotor replied in 2010/08/02 10:54

#17 an on 2010/09/01 15:23
請問要如何放在facebook上呢?
Like box的用意是要放在站外的啊孩子
eProMotor replied in 2010/09/04 10:52

#18 chicken on 2010/09/06 17:29
請問您知道要怎麼把留言改成可以顯示隱藏的?
像這樣>> http://www.facebook.com/chickenh#!/Ashton?ref=ts
可以展開和隱藏
請點選粉絲專頁的「編輯粉絲專頁」
然後請看圖！
http://www.facebook.com/photo.php?pid=4897279&id=141419511177
eProMotor replied in 2010/09/07 21:23

#19 cherry on 2010/09/25 13:44
請問要怎麼堪入程式碼??
各平台方式不同，請自行上網搜尋唷
eProMotor replied in 2010/09/29 15:34

#20 KennyL on 2010/10/03 23:58
請問有沒有方法把那個外框(broder)去掉的呢? 我試過別人的建議改法也不行，code如下：

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FHotMarthk%2F113410775384305%3Fref%3Dts&width=250&connections=12&stream=false&header=false&height=400" scrolling="no" frameborder="0" style="border:none !important; overflow:hidden; width:225px; height:400px;" allowTransparency="false"></iframe>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FHotMarthk%2F113410775384305%3Fref%3Dts&width=250&connections=12&stream=false&header=false&height=400" scrolling="no" frameborder="0" style=" border:0; overflow:hidden; width:225px; height:400px;" allowTransparency="false"></iframe>

試試這個～
eProMotor replied in 2010/10/04 00:59

#21 KennyL on 2010/10/04 01:35
先感謝你的幫忙!!
用了你提供的code還是沒有效果, 可能是我用的檔案問題吧!!
因為我是買了一個商店網站模板作改動, 而我是在一個lbi檔中輸入這段code!!
不知道這是否有影響, 因為我用css的寫法也去不掉broder......

#22 Lau Kwok Ki Ken on 2010/12/19 21:01
請教一下，我的Fan Page上的Like，粉絲已經"讚好"了，但我在牆上發佈消息，他們根本看不到，是不是有設定的，現在好像浪費了很多粉絲。
這是我的粉絲頁，請大家給點意見！
http://www.facebook.com/home.php?#!/pages/Fun-Jetso-Hong-Kong/166350606718231

#23 之盈 on 2011/02/15 13:43
請問我有放置登入和Like Box但是他在pixnet上都無法出現資料,變成需要登入才會出現資料我懷疑是我的隱私設訂出錯,但又不知道該修改哪裡><,麻煩給我一些意見謝謝
需要登入FAcebook帳號才會有資料，是正確的現象唷 :)
eProMotor replied in 2011/02/15 16:39