[活動]《我的包包,裝我的旅行》今年暑假,送你去度假!(8/28 得獎名單公佈)[公告] 豐掌櫃《超級吸金王》活動賽況排行及得獎名單 (8/16第四批名單公佈)[公告] 即日起,MIB也能變購物金囉![公告] 豐掌櫃《最佳銷售王》賽況排行 (6/15 得獎名單公佈)[公告] 痞客邦 PIXNET MIB(MONEY IN BLOG)部落格廣告分潤計劃申請流程調整

er06fn80.png 這幾天要幫公司網站上粉絲視窗到網站上,偏偏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 Guestbook(39) 引用(22) 人氣()


open trackbacks list Trackbacks (22)

  • assurance wireless

    Facebook教學|Like Box 安裝教學(舊版稱粉絲視窗Fan Box) @ 網路行銷零元本鋪|Facebook網路行銷教學 Powered by 邱小黑 :: 痞客邦 PIXNET ::
  • sytropin hgh side effects

    Facebook教學|Like Box 安裝教學(舊版稱粉絲視窗Fan Box) @ 網路行銷零元本鋪|Facebook網路行銷教學 Powered by 邱小黑 :: 痞客邦 PIXNET ::
  • regcure license key youtube

    Facebook教學|Like Box 安裝教學(舊版稱粉絲視窗Fan Box) @ 網路行銷零元本鋪|Facebook網路行銷教學 Powered by 邱小黑 :: 痞客邦 PIXNET ::
  • best psychic networks

    Facebook教學|Like Box 安裝教學(舊版稱粉絲視窗Fan Box) @ 網路行銷零元本鋪|Facebook網路行銷教學 Powered by 邱小黑 :: 痞客邦 PIXNET ::
  • buy twitter followers

    Facebook教學|Like Box 安裝教學(舊版稱粉絲視窗Fan Box) @ 網路行銷零元本鋪|Facebook網路行銷教學 Powered by 邱小黑 :: 痞客邦 PIXNET ::
  • untethered jailbreak ios 7 iphone 4

    Facebook教學|Like Box 安裝教學(舊版稱粉絲視窗Fan Box) @ 網路行銷零元本鋪|Facebook網路行銷教學 Powered by 邱小黑 :: 痞客邦 PIXNET ::
  • have a peek here atho.me

    Facebook教學|Like Box 安裝教學(舊版稱粉絲視窗Fan Box) @ 網路行銷零元本鋪|Facebook網路行銷教學 Powered by 邱小黑 :: 痞客邦 PIXNET ::
  • iphone 4s unlock

    Facebook教學|Like Box 安裝教學(舊版稱粉絲視窗Fan Box) @ 網路行銷零元本鋪|Facebook網路行銷教學 Powered by 邱小黑 :: 痞客邦 PIXNET ::
  • zetaclear reviews

    Facebook教學|Like Box 安裝教學(舊版稱粉絲視窗Fan Box) @ 網路行銷零元本鋪|Facebook網路行銷教學 Powered by 邱小黑 :: 痞客邦 PIXNET ::
  • ppi claims

    Facebook教學|Like Box 安裝教學(舊版稱粉絲視窗Fan Box) @ 網路行銷零元本鋪|Facebook網路行銷教學 Powered by 邱小黑 :: 痞客邦 PIXNET ::

留言列表 (39)

Post Comment
  • uniquevera
  • 請問一下~ 用Facebook登入的那個要怎麼弄阿? 試好久都不行
  • 登入的教學文,正在努力寫當中 XD

    04-28 還沒潤稿的版本寫完嚕~歡迎回來看
    [Facebook教學] Facebook Lobin(登入鈕)安裝教學
    http://epromotor.pixnet.net/blog/post/31036756

    eProMotor replied in 2010/04/28 18:20

  • dlmisaki
  • 請問一下,安裝在痞客邦,需要調整程式碼嗎?我試了很多次都沒有辦法成功顯示在部落格上,像你側欄那樣....@@
  • 登入的部份嘛?還是哪一個呢?登入的話的確是要另外調整唷

    eProMotor replied in 2010/04/27 17:35

  • dlmisaki
  • 終於懂了~謝謝你喔!
  • aova
  • 您好,想請問一下
    我有成立粉絲團,並把粉絲團的網址個人化
    後來想要使用粉絲視窗來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

  • FB小小
  • 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

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

    eProMotor replied in 2010/05/14 16:54

  • najacoby
  • 您好,請問要怎麼在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

  • aova
  • 您好~之前有問過您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

  • aova
  • 非常謝謝你!所以是只要把「<fb:comments xid="api id" width="400"></fb:comments>」貼到<br/><br/>中即可嗎?真是不好意思問這麼多..因為我只懂html,但是涉及程式語法就有點苦手了!= ="
  • 是的是的 :D

    eProMotor replied in 2010/05/30 20:54

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

    可是你掛了兩次啦 >_<

    eProMotor replied in 2010/05/30 20:58

  • aova
  • 火狐是一個 IE看起來就兩個 超怪的!我重掛看看
    謝謝你的幫忙唷!!很多有關FB的資訊都是在你這學到的!
    非常感恩!!!!^^
  • mival
  • 不好意思我想請問一下
    關於安裝在痞客邦上的like button

    如果照著FB上的程式碼貼進去的話
    只能對那時設定的網址說讚
    如果要分別對不同的文章說讚的話
    那程式碼要怎麼調呢?
    (還是只能單篇手動一個一個改啊...?)
  • 目前是手動唷,痞客邦死腦筋,到現在不開放我也沒辦法(攤攤)

    eProMotor replied in 2010/07/01 16:16

  • 流浪兔保護協會
  • 貼出來是透明的

    請問~
    我按照您教的步驟安裝後
    不知為何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

  • sun
  • 請問一下,這個可以放置在無名嗎?
    因為我是了很多次都不成功~
    如果可以放的話可以教教我嗎?
    謝謝你呦~~
  • 真的要做社群媒體行銷網路行銷,近期內無名不是個最好的選擇。因為他有太多的Java
    Script不支援

    eProMotor replied in 2010/07/31 09:28

  • sun
  • 所以是目前無名還無法放囉?ˊˋ
  • 是啊是啊

    eProMotor replied in 2010/08/02 10:54

  • an
  • 請問要如何放在facebook上呢?
  • Like box的用意是要放在站外的啊 孩子

    eProMotor replied in 2010/09/04 10:52

  • cherry
  • 請問要怎麼堪入程式碼??
  • 各平台方式不同,請自行上網搜尋唷

    eProMotor replied in 2010/09/29 15:34

  • KennyL
  • 先感謝你的幫忙!!
    用了你提供的code還是沒有效果, 可能是我用的檔案問題吧!!
    因為我是買了一個商店網站模板作改動, 而我是在一個lbi檔中輸入這段code!!
    不知道這是否有影響, 因為我用css的寫法也去不掉broder......
  • 之盈
  • 請問我有放置登入和Like Box但是他在pixnet上都無法出現資料,變成需要登入才會出現資料我懷疑是我的隱私設訂出錯,但又不知道該修改哪裡><,麻煩給我一些意見謝謝
  • 需要登入FAcebook帳號才會有資料,是正確的現象唷 :)

    eProMotor replied in 2011/02/15 16:39

  • 之盈
  • 但是我看到你這的『Facebook 上等你來找』上面沒登入facebook也會出現文章和朋友大頭照勒?我的就會出現登入><
  • 請教問題
  • 誠心請教
    請問如何防止粉絲團活動被灌票?
    或抓出已灌票的方法?
  • 這個....就跟大多數的抽獎活動一般,是無解的

    eProMotor replied in 2011/03/01 16:09

  • 我是 ky
  • 大大你好
    請問facebook的社群外掛元件
    該如何改成中文化!
    以下是我的網址,請問可以幫我看一下嗎?
    http://www.teaez.tw/
  • Mutou Wood
  • 請問我輸入網址後,還是出現"Plugin cannot be rendered with the specified parameters."字樣,該如何解決?
  • 許君卉
  • 請問...like box的功能..有辦法安在奇摩的部落格上嗎?
    另外您介紹的文章裡..顯示出的介面是英文的...但我有在別人的部落格裡看到中文介面的耶...要怎麼設定才會是中文的呢?
  • 头大!弄了这么久,没有把 LIKE BOX 按钮装上去
  • 弄了这么久,没有把 LIKE BOX 按钮装上去!!!
    复制完代码,要放到哪里?
    希望有高人帮忙详细指点下,怎么插自己的 专页 跟 个人上面? 谢谢大家了
    感激不尽
  • sally484348
  • 先謝謝這位大大的教學文, 真是實用!!
    再來, 想請教一下, 如果我不是用粉絲團, 而是社團. 請是可以如何在blog側欄加入FB社團的語法呢?

    先謝謝大大的回覆了. 感恩~~~~~~XD
  • Private Comment
  • 周建宏
  • 請問要如何將Like Box結合自己做的網站???我是用Dreamweaver軟體
    已經看過N篇文章還是找不出方法,請大大幫個忙(>"<)
  • 柚子
  • 請問這個可以放在Yahoo的部落格嗎?! 3Q!
  • 葛銳特音樂
  • 您好,請問這個能放在Pchome新聞台上嗎?

    因為我剛剛看到新聞台邊欄多了FB Like Box

    但是語法貼上去都不能用

    是有要再改什麼嗎?

    感謝您!
  • 癌症細胞自殺密碼
  • 您好我會設定粉絲頁的程式,但是無論如何都無法像您一樣放在痞客邦的BLOG側欄,請問如何痞客邦後台設定?感恩!
  • 姜姜
  • 您好,感謝您提供崁入粉絲團的好方法
    那請問如何崁入[FB社團]置網站哩呢??
    非常謝謝你的教導逆!!!!^^
  • 社團沒有辦法唷,啾咪~

    eProMotor replied in 2012/10/24 10:01

  • 哪哪麻
  • 您好~
    我設定好Liek Box,可是把語法複製到文章末端和側邊攔都無法顯示,
    現在的版本和您的教學似乎有點不同,
    但語法應該還是一樣的,
    我去複製我同樣在痞客幫朋友的語法,
    貼在我的文章中還是一樣變成一個框框而已,
    請問應該要如何解決呢?
  • 羅翊華
  • 給#32樓的周建宏大大
    您好~我看此網站:
    http://www.youtube.com/watch?v=xu3UZeyEntA
    終於成功做出like box 在 dreamweaver上的用法了!!
    一開始一直不成功,原來是貼上程式碼後網址沒改好
    大家試試看^^
  • 錢先生
  • 大家有沒有發現Like box 雖然可以顯示塗鴉牆, 但圖片卻沒有出現, 我見這里的也是一樣啊! 有辦法解決嗎?