Letting user specify recipients within Feed Dialog

2019-03-22 05:43发布

站内问答 / 前沿技术
1177 1 3

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

1条回答
狗以群分
2楼-- · 2019-03-22 06:29

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)