facebook programmatically post on a facebook page with a big photo

facebook, facebook-graph-api, facebook-javascript-sdk

Solution

Finally, I did it! I'm posting the solution, thanks to cdbconcepts for pointing me in the right direction. After reading the doc again:

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

They say that: "You can also publish a photo by providing a url param with the photo's URL." The url doesn't have to be on the same server, as shown in the example below, and it works with the js-sdk.

So here is the final code that works for me:

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

Problem

I've created a fake facebook page (entertainment page). On the left of the attached image, I made a first post manually (the one below with the big photo), and one programmatically (the one above with the small photo). The code I used for the small photo looks like this: ``` 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>'; } } ); ``` But I'm not happy with it: the application I'm working on make a list of lost animals, so it would be much greater with big photos. I didn't see any example of how to do it on the facebook developer pages. I believe this is possible, but I've not found it out yet. Have you guys already gone through this problem before?

Original source