快速連結

2010年11月16日

Facebook 在iframe的應用程式情況multi-friend-selector 寫法[使用JS]

本次教學是教導multi-friend-selector的寫法。
注意,這是在程式為iFrame的情況下完成,其餘情況不保證可行...(其實是我沒有時間去研究若為WEB的情況...FBML情況就不用多說了...FACEBOOK的文件有)



什麼是multi-friend-selector呢?就是俗稱的邀請好友哦~


在HTML標籤內一定要先標注這一行:

xmlns:fb="http://www.facebook.com/2008/fbml"

接著,在BODY標籤之間寫上這一段:

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

最後,在SCRIPT之下寫上這一串文字...

<fb:serverfbml>
  <script type="text/fbml">
 <fb:fbml>
        <fb:request-form action="" content="在邀請頁面上的文字 <fb:req-choice url=\"http://apps.facebook.com/你的APP NAME/" label=\"PLAY NOW\"/>" invite="true" method="POST" type="你的應用程式名稱">
  <fb:multi-friend-selector actiontext="multi-friend-selector上的簡單敘述" bypass="cancel" cols="6" max="10" rows="5" showborder="false">
  <fb:request-form-submit>
  </fb:request-form-submit></fb:multi-friend-selector></fb:request-form>
 </fb:fbml>
  
</script>
</fb:serverfbml>

如此一來便大功告成!!有問題可以盡量提出哦!

7 則留言:

  1. 請問有辦法把右上和右下的cancel按鈕拿掉嗎? 
    因為我只要點了那個按鈕就出跳到錯誤的頁面@@
    不曉得您是否有遇過這個問題?

    另外我只要在request-form內加上action="http://..."這個參數就會出現以下錯誤
    serverfbml:'action'attribute must be within the application's connect url
    請問您是否也會遇到類似問題?

    回覆刪除
  2. 你好。
    cancel是沒辦法直接移掉的。
    真的要讓他消失不見,要用CSS去直接蓋住cancel按鈕哦。

    至於為何會跳到錯誤頁面是因為沒有設定fb:request-form中的action值。
    action的開頭一定要是「http://apps.facebook.com/應用程式名」才可以!

    回覆刪除
  3. 謝謝!!問題終於解決了!之前試超久的@@
    不過我用action="http://apps.facebook.com/應用程式名"還是不行, 關鍵在最後少了一個"/" 像這樣action="http://apps.facebook.com/應用程式名/"
    真是冏..

    回覆刪除
  4. 噢噢能解決就好~老實說我也是新手,跟FB的API戰鬥許久才得到一點點的經驗值~
    能幫上忙就好><!!雖然我忘記在網址最後多加一條斜線...

    回覆刪除
  5. 大家好,
    我用了以上的方法,可是没东西出现。只由三条下载线在动而已。FireBug 出现 Xfbml failed 的字眼。请各位帮忙。谢谢。

    回覆刪除
  6. 有時候Facebook好像會跑不太動的樣子,所以就會看到三條線在動~~!!!!!
    不過你隔天在看或許就ok了><(真的)

    回覆刪除
  7. 感謝分享,您所分享的程式碼解決了困擾我很久的問題,十分感謝

    回覆刪除

歡迎大家留言提問,我會答的都會盡力回答!
如果太久沒出現回應就是我又忘記回來看留言了TAT