Facebook以编程方式在Facebook页面上发布一张大照片

时间:2013-11-25 18:44:54

标签: facebook facebook-graph-api facebook-javascript-sdk

enter image description here

我创建了一个虚假的Facebook页面(娱乐页面)。 在附图的左侧,我手动制作了第一个帖子(下面的一个用 大照片)和一个以编程方式(上面的小照片)。

我用于小照片的代码如下所示:

    FB.api(
        'https://graph.facebook.com/[myAppId]/feed',
        'post',
        {
            message: 'this is a grumpy cat',
            description: "This cat has been lost for decades now, please call at 654321486",
            picture: "http://laughingsquid.com/wp-content/uploads/grumpy-cat.jpg"

        },
        function (response) {
            if (!response) {
                alert('Error occurred.');
            } else if (response.error) {
                document.getElementById('result').innerHTML =
                    'Error: ' + response.error.message;
            } else {
                document.getElementById('result').innerHTML =
                    '<a href=\"https://www.facebook.com/' + response.id + '\">' +
                        'Story created.  ID is ' +
                        response.id + '</a>';
            }
        }
    );

但我对它并不满意: 我正在处理的应用程序列出了丢失的动物, 所以大照片会更大。

我没有在facebook开发者页面上看到任何关于如何操作的示例。 我相信这是可能的,但我还没有找到它。 你们之前是否已经解决了这个问题?

2 个答案:

答案 0 :(得分:9)

要实现这一目标,您需要做两件事。我不是100%确定JS-SDK是否允许您执行第二步,但如果需要,您可以使用服务器端SDK。

应用程序需要请求manage_pagespublish_stream权限。然后拨打/{user-id}/accounts,这将返回授权用户管理的所有网页及其各自的page access tokens

将要发布的页面返回的页面访问令牌存储在变量中。将要上传的照片设置为source参数(必须是运行代码的服务器的本地),并使用页面访问令牌向POST发出/{page_id}/photos请求(不是应用程序)访问令牌!)。

所以这将是:

FB.api('/{page_id}/photos', 'post', { source: 'path/to/image.jpg', access_token: {page_access_token}, message: 'hey heres a photo' }, function(response) {
  if (!response || response.error) {
    alert('Error occured');
  } else {
    alert('Post ID: ' + response.id);
  }
});

我认为应用程序还需要在初始化时将fileUpload指定为true。

如果对您有所帮助,我很乐意分享我的PHP代码。

答案 1 :(得分:7)

最后,我做到了! 我正在发布解决方案,感谢cdbconcepts指出我正确的方向。 再次阅读文档后:

https://developers.facebook.com/docs/reference/api/photo/

他们说: “你也可以通过提供带有照片URL的URL参数来发布照片。” 该URL不必位于同一服务器上,如下例所示, 它适用于js-sdk。

所以这是适用于我的最终代码:

<html>
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>

<div id="fb-root"></div>
<script>

var appId = 'Replace with your appId';

window.fbAsyncInit = function () {
    FB.init({
        appId: appId,
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true  // parse XFBML
    });


    var options = {
        scope: 'manage_pages, publish_stream'
    };

    FB.Event.subscribe('auth.authResponseChange', function (response) {
        if (response.status === 'connected') {
            testAPI();
        } else if (response.status === 'not_authorized') {
            FB.login(function () {
            }, options);
        } else {
            FB.login(function () {
            }, options);
        }
    });
};

// Load the SDK asynchronously
(function (d) {
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
}(document));

// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function (response) {
        console.log('Good to see you, ' + response.name + '.');
    });
}

function error(msg) {
    document.getElementById('result').innerHTML = 'Error: ' + msg;
}

function postApi() {

    var myPageID = '484364788345193';
    var targetPageName = 'Entertainment page of ling';
    var pathToImg = 'http://laughingsquid.com/wp-content/uploads/grumpy-cat.jpg';
    var accessToken = null;

    FB.api(
        'https://graph.facebook.com/me/accounts',
        function (response) {
            if (!response || response.error) {
                console.log(response);
                error('Error occured');
            } else {
                console.log(response);
                for (var i in response.data) {
                    if (targetPageName === response.data[i].name) {
                        accessToken = response.data[i].access_token;
                    }
                }
                if (accessToken) {
                    FB.api(
                        'https://graph.facebook.com/' + myPageID + '/photos',
                        'post',
                        {
                            url: pathToImg,
                            access_token: accessToken,
                            message: "Tadaam"
                        },
                        function (response) {
                            if (!response || response.error) {
                                console.log(response);
                                error('Error occured');
                            } else {
                                console.log(response);
                                alert("PostId: " + response.id);
                            }
                        }
                    );
                }
                else {
                    error("Page not found in the accounts: " + targetPageName);
                }
            }
        }
    );

}


function logout() {
    FB.logout();
}


$(document).ready(function () {
    $("#logout").click(function () {
        logout();
    });
    $("#post1").click(function () {
        postApi();
    });
});


</script>

<!--
  Below we include the Login Button social plugin. This button uses the JavaScript SDK to
  present a graphical Login button that triggers the FB.login() function when clicked. -->

<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>


<button id="logout">Logout</button>
<button id="post1">post something</button>
<div id="result"></div>
</body>
</html>