在Facebook新的Social plugins中,唯二沒有提供iframe格式的插件就是Login with FacesFacepile。因為嚴格來說,這兩個插件的運用並不如其他的插件一般,只要安裝上去,就能夠有很明確的功用,如果你沒有搭配未來廣告投放的計畫,或是其他應用程式(Apps)的輔助使用,這兩個插件的功能就只有「登入」及「看到別人登入」兩項功能而已,對於網站流量或是功能性並沒有很大的幫助。因為重要的是背後龐大的Open Graph上的資訊,若沒有妥善的規劃,其實只是拖累網站開啟速度而已。不過應觀眾要求,還是來詳細的Step by Step講解如何安裝吧!

替網站申請Facebook App ID

這部份其實在[Facebook教學] 把Facebook加到你的網站一文中有教學,不過我們還是重新再來做一次,有安裝過的可跳過此一區塊。

1. 首先我們打開申請頁面http://developers.facebook.com/setup/ (這個Developers上沒有直接連結,我也不知道為什麼)

2010-4-22 下午 12-04-26.png 

2. 依據表格需求將資料填上,然後按下Create application

2010-4-22 下午 12-06-22.png 

3. 你就可以得到你網站專屬的ID跟API Secret(API_Key),不用像過去一樣還要上傳討人厭的驗證檔案。如此一來,就算是Blogger也能使用Open Graph API了耶!

2010-4-22 下午 12-07-32.png 

加入JavaScript SDK及安裝登入鈕

因為鋪主我提倡大家要使用痞客邦(喂!我的代言費咧?!),所以在這邊我們用Pixnet側邊欄位的方式,進行登入鈕的安裝。

1. 進入部落格的後台,點選「部落格管理」中的「側邊欄位設定

2010-4-28 下午 05-59-19.png 

2. 點選「新增版位」

2010-4-28 下午 06-05-07.png 

3. 接下來要安裝JavaScript SDK的程式碼,請先複製下面的Code,將剛剛幫網站申請的App ID取代紅字的部份:

    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({appId: 'Your app id', status: true, cookie: true,
                 xfbml: true});
      };
      (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
          '//connect.facebook.net/zh_TW/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>

4. 貼上更改過App id的程式碼

2010-4-28 下午 06-08-57.png 

5. 然後貼上從http://developers.facebook.com/docs/reference/plugins/login取得的Login XFMBL code。命名好後按下「送出

2010-4-28 下午 06-10-36.png

6. 拖拉新建的區塊到想要放置的位置

2010-4-28 下午 06-11-53.png 

7. 按下「儲存版面」就大功告成了!

2010-4-28 下午 06-12-56.png 

最近剛安裝好Facebook的留言板,上面有附帶說讚鈕。覺得文章不錯,記得幫我按個讚唷!

eProMotor 發表在 痞客邦 PIXNET 留言(9) 人氣()


留言列表 (9)

發表留言
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 無
  • 還是看不懂臉書留言板如何用及語法 可以請問臉書高手一個問題(客服不回覆) 就是為什麼在各大網站頁面 臉書留言板框框被遮一半 只能留言沒辦法看到發送扭 請問是什麼原因(以前不會這樣) 我是用平板電腦上網的 謝謝
  • Needer
  • 請問在粉絲網賣商品可以PO價格嗎? 還有關於裡面可以PO費用相關事項和帳戶資料嗎? 這樣是否違規啊? 因為聽我朋友說會 可是我在規章裡面找不到任何有關資訊!! 是否請教一下 感恩
  • 如果Facebook是你朋友開的,你再聽他的,否則規章裡面沒有就沒有

    eProMotor 於 2012/06/29 13:02 回覆

  • 小粉
  • 你好,為什麼我把網址貼上去會被截掉,也會說不能用呢
  • Mon Mon
  • 請問如果不想要登入鈕,只想弄fb留言板的話要如果弄呢??
【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消