让用户在feed对话框中指定收件人

当前，我们的应用程序通过Graph API向用户的朋友墙发布。但是，Facebook正在弃用此功能，因此我们正在根据Facebook的建议迁移到" feed对话框"（请参阅2013年2月6日，网址为https://develovelers.facebook.com/roadmap/）。

现在，我们知道我们可以将收件人指定为JavaScript SDK调用的一部分（Note fb.Init（）在页面之前的其他地方都调用：

<p><a onclick="launchFeedDialog(); return false">Testing the Feed Dialog</a></p>
<script>
function launchFeedDialog() {
    // calling the API ...
    var obj = {
      method: 'feed',
      to: 'RECIPIENT NAME', // Can specify recipient here
      link: 'http://example.com',
      name: 'Test post',
      description: 'Test description'
    };
    FB.ui(obj);
}
</script>

但是，看来用户可以在启动的对话框中修改收件人。我的意思是https://i.stack.imgur.com/opeho.png。

屏幕截图

是否有某种方式调用feed对话框，以便用户可以更改/添加收件人，例如在发送对话框中？

我们试图实现的流量（以及当前的方式）是：

用户单击一个按钮启动feed对话框
用户填写"供稿"对话框（包括收件人）和提交

现在，我们被这种尴尬的流动所困扰：

用户填写指定收件人的自定义控件
用户单击一个按钮启动feed对话框
用户填写"提要对话"并提交

好吧，我们找到了解决方法。总体想法：

将"供稿"对话框内联显示为iframe（通过指定display=iframe）
创建自己的自定义控件，以选择收件人Facebook用户名或ID
选择收件人或Onblur等时，重新加载iframe异步

上述一些警告/推理：

您不能使用JS SDK，因为它将启动" feed对话框"的iFrame版本作为模态灯箱（而不是页面流中的内联）
您需要实现一个重定向页面，该页面确实是发布后处理的，例如更新父窗口的状态，记录结果等等
对于（2），自定义控件可以像文本输入字段一样简单，但是您可能至少需要某种自动完成。实际上，这不是太棘手了，因为您使用https://graph.facebook.com/me/friends graph api call。

这是使用简单文本输入的基本示例：

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div>
  Recipient's FB username:
  <input type="text" id="fb-recipient" placeholder="Recipient's FB username"></input>
  <input type="submit" id="fb-recipient-submit" value="Pick" />
</div>
  <iframe id="fb-feed-dialog" width="586" height="330" frameborder="0" allowfullscreen></iframe>
<script>
  $('#fb-recipient-submit').click(function(e){
    e.preventDefault();
    var feedUrl = 'https://www.facebook.com/dialog/feed?';
    feedUrl += 'display=iframe';
    feedUrl += '&app_id=' + 'YOUR_APP_ID';
    feedUrl += '&access_token=' + 'ACCESS_TOKEN';
    feedUrl += '&link=' + 'SHARE_LINK';
    feedUrl += '&redirect_uri=' + 'REDIRECT_URI';
    feedUrl += '&to=' + $('#fb-recipient').val();
    $('#fb-feed-dialog').attr( 'src', feedUrl );
  });
</script>
</body>
</html>

您可以在以下位置找到一个稍微充实的解决方案的屏幕截图：https：//i.stack.imgur.com/1klyq.png

相关内容

最新更新

热门标签：