Facebook JS SDK共享到托管页面

时间:2015-03-25 00:54:01

标签: facebook-javascript-sdk

Facebook对我来说有点黑盒子,但我相信我已经按照SO和其他地方的建议,但我仍然无法让它发挥作用。

基于建议答案的编辑代码

<div id="fb-root"></div>
<script>
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

  var login;
   window.fbAsyncInit = function() {
    FB.init({
      appId      : 'Valid_App_ID',
      status     : true,
      xfbml      : true,
      version    : 'v2.2'
    });

     FB.login(function(response) {
    if (response.authResponse) {
        FB.api('/me', function(response) {
          login = response;
            console.log('Hello ' + response.name);
        });
    } else {
        //login cancelled or not every permission accepted
    }
}, {scope: 'manage_pages, publish_actions'}); 

function fb_share() {
    FB.ui( {
        method: 'feed',
        name: login.name,
        link: 'valid_URL',
        picture: 'valid_image_URL',
        caption: 'some_text',
        to: valid_page_ID
    }, function( response ) {
        console.log(response);
    } );

}
$(document).ready(function(){
  $('.share-btn').on( 'click', fb_share );
});
       };
</script>

实际上,链接,图片和标题字段是从用户输入中填写的,to字段是根据name自动完成的(因此它始终是由登录用户)。

我已将自己用作测试(添加为应用设置的“角色”),并已授予登录范围内其他项目的权限。我可以通过在FB_share函数中注释掉to:行来成功发布到我的个人时间轴,但是如果我将该行留在那里,即使page_ID是我管理的页面,我也会在控制台中收到错误消息(并在分享对话框中):

Object {error_code: 100, error_msg: "Cannot post to a user who has not installed the application."}

我确定我遗漏了一些简单的东西,但从我读过的内容来看,上面的代码应该有效。

有人能指出我正确的方向吗?谢谢你的建议。

2 个答案:

答案 0 :(得分:0)

所有代码,除了嵌入正确的<script>标记的自执行功能外,还需要在window.fbAsyncInit = function(){ /* in here */}之后的FB.init()内运行。

window.fbAsyncInit = function(){
  FB.init({
    appId: 'valid_App_ID',
    status: true,
    xfbml: true,
    version: 'v2.2'
  });
  FB.login(function(response){
    if(response.authResponse){
      FB.api('/me', function(apiResp){
        // remember asyc is asyc
        $('.share-btn').click(function(){
          FB.ui({
            method: 'feed',
            name: apiResp.first_name,
            link: 'valid_URL',
            picture: 'vaild_image_URL',
            caption: 'some_text',
            to: 'Facebook_Page_ID'
            }, function(uiResp){
              console.log(uiResp);
            }
          });
        });
      });
    }
    else{
      // redirect to facebook url to app loggin
    }
  }, {scope: 'manage_pages, publish_actions'});
}
(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if(d.getElementById(id)){return;}
  js = d.createElement(s); js.id = id;
  // if running from localhost add protocol like https:
  js.src = '//connect.facebook.net/en_US/sdk.js';
  fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');

答案 1 :(得分:0)

似乎FB.ui方法(上图)缺少访问令牌,我无法找到任何方法来添加它。以下代码(依赖于Graph API)有效(不同,但可以)。如果浏览器阻止弹出窗口,则需要.go单击功能。然后,在FB.login函数之后,FB.api可以访问用户&#39;循环获取下拉选择器的编号和名称的页面。单击.share-btn然后检索正确的页面ID和访问令牌,并将它们传递给FB.api函数的第二次调用,该函数发布消息。这种方法错过的是前一代码的UI方面,其中建议的帖子显示在带有帖子选项的弹出窗口中。我还没有找到任何方法来复制它。

window.fbAsyncInit = function(){
  FB.init({
    appId: 'Valid_App_ID',
    status: true,
    xfbml: true,
    version: 'v2.2'
  });

  $('.go').click(function(){

  FB.login(function(response){
    if(response.authResponse){
     FB.api('/me/accounts', function(apiResp){
        console.log(apiResp);
        for (var i = 0; i < apiResp.data.length; i++) {
        $('#select').append('<option value = ' + i + '>' + apiResp.data[i].name + '</option>');
        }
        $('.share-btn').click(function(){
            var n = $('#select').val();
            var to = apiResp.data[n].id + '/feed?access_token=' + apiResp.data[n].access_token;
            FB.api(to, 'post', {message: message}, function(response) {
            console.log(response);
          });
        });
      });
    }
    else{
      // redirect to facebook url to app login
    }
 }, {scope: 'manage_pages, publish_actions'});

  });

}