Facebook - 显示帮助对话框

Question

当用户在我的Facebook应用程序上单击链接时，我该如何显示一个典型的Facebook模态帮助对话框？

谢谢。

- lostInTransit

Answer 1

如果您使用的是IFrame应用程序，您可以使用JS API中的FB.UI.PopupDialog。坏消息是，对于此功能没有任何文档，并且它不是很容易使用。好消息是，我已经搞清楚了！ :)

// First, define the HTML content you want in the dialog as a javascript string:
var content = '<div><h2>Help is here!</h2><div>Hint: you can eat the cookies!</div></div>';

// Then add the content to this resource dictionary thing, wrapped in a div with the id "RES_ID[your identifier here]"
FB.UI.DomResources.addResourceDict(new FB.UI.DomResDict('<div id="RES_IDhelp01">' + content + '</div>'));

// Instantiate the popup dialog and show it:
var popup = new FB.UI.PopupDialog('Help?!', FB.UI.DomResources.getResourceById('help01'), false, false);
popup.show();

当然，这些位可以根据需要在您的页面上分布，并且您可以使用PHP为您生成HTML内容。

简单吧？ :D 尽情享受吧！

- Daniel Schaffer

---

请不要问我花了多长时间才弄清楚这个问题。这并不美好。 - Daniel Schaffer

从我的测试来看，<div id="RES_IDhelp01"> 应该改为 <div id="RES_ID_help01">。 - mjallday

噢，好吧...它运行得很好。考虑到Facebook经常更改事物，我很惊讶它能够持续这么长时间。 - Daniel Schaffer

Answer 2

Codebliss的链接引导我进入了一个文档页面，向我展示如何使用他们的JS SDK在网页中调用iframe弹出对话框。首先，您必须加载Facebook脚本：

<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.async = true;
    e.src = document.location.protocol +
    '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
 </script>  

然后在你的页面中放置类似于以下内容：

<a href="#" id="test">click me</a>
// some code
$(document).ready(function() {
  $('#test').click(function() {
    FB.ui({
      method: 'feed',
      name: 'Facebook Dialogs',
      link: '[YOUR_WEBSITES_REGISTERED_URL_ON_FB]',
      picture: 'http://fbrell.com/f8.jpg',
      caption: 'Reference Documentation',
      description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
      message: 'Facebook Dialogs are easy!'
    },
    function(response) {
      if (response && response.post_id) {
        alert('Post was published.');
      } else {
        alert('Post was not published.');
      }
    });
  });
});

- David Xia