[公告] 痞客邦新服務上線 每日星座運勢測算[公告] 痞客邦應用市集全新改版![公告] 痞客邦「應用市集」新 App 上架-iFontCloud Professional[公告] 痞客邦後台發表文章提供插入多張圖片新功能[公告]痞客邦新服務上線 部落客商店聚集就在《痞市集》

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 留言(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 雖然可以顯示塗鴉牆, 但圖片卻沒有出現, 我見這里的也是一樣啊! 有辦法解決嗎?

You haven’t logged in yet, please use guest status to leave message. You can also log in with above service account and leave message

other options