Facebook 多好友选择器不渲染(iFrame 应用程序)

发布于 2024-09-17 05:48:44 字数 1151 浏览 12 评论 0原文

我有一个 iframe Facebook 应用程序(使用 Facebook 的新 JavaScript API),需要允许用户在参加比赛后邀请他们的朋友加入该应用程序。我在页面上的 div 中有以下标记(应用程序名称和 Canvas Url 已编辑):

<fb:serverFbml>
    <fb:request-form
        method="POST" 
        invite="true" 
        type="{Name of My Application}" 
        content='Your text goes here. %3Cfb%3Areq-choice%20url%3D%{a url-encoded link to my Canvas URL}"/>' 
        label="Authorize My Application"> 
        <fb:multi-friend-selector showborder="false" actiontext="Invite your friends to use My Application.">
        </fb:multi-friend-selector>
    </fb:request-form>
</fb:serverFbml>

据我了解,如果您需要在 XFBML/iframe 应用程序中使用 FBML 标记,只需将它们放入 fb:serverFbml 元素中,然后Facebook 会处理这件事。果然,我的第一印象似乎是错误的。我没有填写表格,而是得到一个空的白色盒子,fbml 似乎未受影响。

该应用程序的设计假设(可能是错误的)我不需要对用户进行身份验证即可让他们邀请朋友。有没有办法做到这一点,或者我需要要求他们先登录? Facebook 的文档(当然)对此含糊其辞。

编辑:我的 FB.init() 按要求:

$("body").prepend("<div id=\"fb-root\"></div>");
FB.init({
    apiKey: "{My apiKey is here}",
    appId: "{My appId is here}",
    status: true,
    cookie: true,
    xfbml: true
});

I have an iframe Facebook application (using Facebook's new JavaScript API) that needs to allow the user to invite their friends to the app after entering a contest. I have the following markup in a div on the page (application name and Canvas Url redacted):

<fb:serverFbml>
    <fb:request-form
        method="POST" 
        invite="true" 
        type="{Name of My Application}" 
        content='Your text goes here. %3Cfb%3Areq-choice%20url%3D%{a url-encoded link to my Canvas URL}"/>' 
        label="Authorize My Application"> 
        <fb:multi-friend-selector showborder="false" actiontext="Invite your friends to use My Application.">
        </fb:multi-friend-selector>
    </fb:request-form>
</fb:serverFbml>

From what I understand, if you need to use FBML tags in an XFBML/iframe app, you just drop them into an fb:serverFbml element and Facebook takes care of it. Sure enough, my first impressions seem to be false. Instead of dropping in the form, I just get an empty white box, with the fbml seemingly untouched.

The design of this application assumes (probably incorrectly) that I don't need to authenticate the user to let them invite their friends. Is there a way to accomplish this, or do I need to require them to log in first? Facebook's documentation is (of course) vague on this.

EDIT: My FB.init() as requested:

$("body").prepend("<div id=\"fb-root\"></div>");
FB.init({
    apiKey: "{My apiKey is here}",
    appId: "{My appId is here}",
    status: true,
    cookie: true,
    xfbml: true
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

抱着落日 2024-09-24 05:48:44

好的,我已经开始工作了。对我来说,它是这样的:

<fb:serverfbml>
  <script type="text/fbml">
      <fb:fbml>
          <fb:request-form action='my_url' method='POST'
          invite='true'
          type='Poll'
          content='This is an invitation! <fb:req-choice url="my_url" label="Accept and join" />  '>
          <fb:multi-friend-selector showborder='false' actiontext='Select friends to send the poll' cols='5' rows='3' bypass='cancel' max="8">
          </fb:request-form>
      </fb:fbml>
  </script>
</fb:serverfbml>

JS 注入代码如下所示:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId: 'YOUR APP ID HERE',
      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>

所以,

1)你不需要 APP KEY,只需要 JS 代码中的 APP ID。

2) XFBML 需要包装在 SCRIPT 标签内。

Ok, I got it to work. Here is how it looks for me :

<fb:serverfbml>
  <script type="text/fbml">
      <fb:fbml>
          <fb:request-form action='my_url' method='POST'
          invite='true'
          type='Poll'
          content='This is an invitation! <fb:req-choice url="my_url" label="Accept and join" />  '>
          <fb:multi-friend-selector showborder='false' actiontext='Select friends to send the poll' cols='5' rows='3' bypass='cancel' max="8">
          </fb:request-form>
      </fb:fbml>
  </script>
</fb:serverfbml>

and the JS injection code looks like this :

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId: 'YOUR APP ID HERE',
      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>

So,

1) You dont need your APP KEY, only your APP ID in the JS code.

2) The XFBML needs to be wrapped inside a SCRIPT tag.

初懵 2024-09-24 05:48:44

此示例也有效:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:serverfbml>
  <script type="text/fbml">
     <fb:fbml>
         <fb:request-form action='my_url' method='POST'
         invite='true'
         type='Poll'
         content='This is an invitation! <fb:req-choice url="my_url" label="Accept and    join" />  '>
         <fb:multi-friend-selector showborder='false' actiontext='Select friends to     send the poll' cols='5' rows='3' bypass='cancel' max="8">
          </fb:request-form>
      </fb:fbml>
  </script>
</fb:serverfbml>

在 http://connect.facebook.net/en_US/all.js#appId=[APP_ID]&xfbml=1 中设置 APP_ID

This example works too:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:serverfbml>
  <script type="text/fbml">
     <fb:fbml>
         <fb:request-form action='my_url' method='POST'
         invite='true'
         type='Poll'
         content='This is an invitation! <fb:req-choice url="my_url" label="Accept and    join" />  '>
         <fb:multi-friend-selector showborder='false' actiontext='Select friends to     send the poll' cols='5' rows='3' bypass='cancel' max="8">
          </fb:request-form>
      </fb:fbml>
  </script>
</fb:serverfbml>

Set APP_ID in http://connect.facebook.net/en_US/all.js#appId=[APP_ID]&xfbml=1

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文