让用户在Feed对话框中指定收件人 [英] Letting user specify recipients within Feed Dialog

问题描述

目前，我们的应用通过Graph API发布给用户的朋友的墙壁。但是，Facebook正在弃用此功能，因此我们正在根据Facebook的建议迁移到Feed对话框（请参阅2013年2月6日的 https://developers.facebook.com/roadmap/ ）。

现在，我们知道我们可以将收件人指定为JavaScript SDK调用的一部分（注意FB.init（）在页面前面的别名中被调用）：

 < p> ;< a onclick =launchFeedDialog（）; return false>测试Feed对话框< / a>< / p> 
< script> 
函数launchFeedDialog（）{
 
 //调用API ... 
 var obj = {
 method：'feed'，
 to：' RECIPIENT NAME'，//可以在此指定收件人
链接：'http://example.com'，
名称：'测试帖子'，
描述：'测试描述'
}; 
 
 FB.ui（obj）; 
} 
< / script> 
  

但是，似乎用户可以在启动的对话框中修改收件人。我的意思是截图为 http://i.imgur.com/oLPTO.png

有没有一些方法可以调用Feed对话框，以便用户可以更改/添加收件人，例如发送对话框？

我们试图实现的流程（和当前的方式）是：

1. 用户点击一个按钮启动Feed对话框


2. 用户填写Feed对话框（包括收件人）并提交

现在，我们坚持这个尴尬的流程：

1. 用户填写指定收件人的自定义控件


2. 用户点击按钮启动Feed对话框


3. 用户填写Feed对话框并提交

解决方案

好的，我们找到了一个解决方法。一般想法：

1. 将Feed对话框内联显示为iframe（通过指定 display = iframe
   
2. 创建您自己的自定义控件来选择收件人Facebook用户名或id


3. 在选择收件人或onblur时重新加载iframe异步，等等

上述一些注意/推理：

• 您不能使用JS SDK，因为它会将Feed对话框的iframe版本作为模式灯箱启动（而不是在您的页面流中内联）


• 您将需要实现一个进行后处理的重定向页面，如更新父窗口的状态，记录结果等。


• 对于（2），自定义控件可以像文本一样简单输入字段，但您可能至少需要某种自动完成。这实际上并不是太棘手，因为您通过 https://graph.facebook.com获取用户的朋友列表/ me / friends Graph API调用。

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

 < html> 
< head> 
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"></script> 
< / head> 
< body> 
< div> 
收件人的FB用户名：
< input type =textid =fb-recipientplaceholder =收件人的FB用户名>< / input> 
< input type =submitid =fb-recipient-submitvalue =Pick/> 
< / div> 
< iframe id =fb-feed-dialogwidth =586height =330frameborder =0allowfullscreen>< / 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> 
  

您可以在以下网址找到一个略微更丰富的解决方案的屏幕截图： http://i.imgur.com/0jTM391.png

Currently, our app posts to users' friends' walls via Graph API. However, Facebook is deprecating this functionality so we are migrating to the Feed Dialog per Facebook's recommendations (see the February 6, 2013 section at https://developers.facebook.com/roadmap/).

Now, we know we can specify the recipient as part of the Javascript SDK call (note FB.init() is called elsewhere earlier on the page):

<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>

However, it does not seem like the user can modify the recipient in the launched dialog. A screenshot of what I mean is at http://i.imgur.com/oLPTO.png.

Is there some way of invoking the Feed Dialog so that the user can change/add recipients, like in the Send Dialog?

The flow we are trying to implement (and the way it currently is) is:

1. User clicks a button to launch the Feed dialog
2. User fills in the Feed dialog (including recipient) and submits

Right now, we are stuck with this awkward flow:

1. User fills out a custom control specifying the recipient
2. User clicks a button to launch the Feed dialog
3. User fills in the Feed dialog and submits

解决方案

OK, we found a workaround. The general idea:

1. Display the Feed Dialog inline as an iframe (by specifying display=iframe)
2. Create your own custom control for selecting a recipient Facebook username or id
3. Reload the iframe asynchronously upon selecting a recipient or onblur, etc

Some caveats/reasoning for above:

• You can't use the JS SDK because it will launch the iframe version of the Feed Dialog as a modal lightbox (rather than inline in your page flow)
• You'll need to implement a redirect page that does post processing, such as updating the state of the parent window, logging results, etc
• For (2), the custom control can be as simple as a text input field, but you'll probably want at least some sort of autocomplete. This is actually not too tricky, as you grab your user's friend list with the https://graph.facebook.com/me/friends Graph API call.

Here's a basic example using a simple text input:

<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>

You can find a screenshot of a slightly more fleshed out solution at: http://i.imgur.com/0jTM391.png

这篇关于让用户在Feed对话框中指定收件人的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！