Facebook Graph API - télécharger une photo à l'aide de JavaScript

Question

Est-il possible de télécharger un fichier à l'aide de l'API Facebook Graph en utilisant le javascript, j'ai l'impression d'en être proche. J'utilise le JavaScript suivant

var params = {};
params['message'] = 'PicRolled';
params['source'] = '@'+path;
params['access_token'] = access_token;
params['upload file'] = true;

function saveImage() {
    FB.api('/me/photos', 'post', params, function(response) {
        if (!response || response.error) {
            alert(response);
        } else {
            alert('Published to stream - you might want to delete it now!');
        }
    }); 
}

Lors de l'exécution de cette opération, je reçois l'erreur suivante...

"OAuthException" - "(#324) Requires upload file"

Lorsque j'essaie de rechercher cette méthode, tout ce que je trouve, c'est une méthode php qui semble résoudre ce problème.

$facebook->setFileUploadSupport(true);

Cependant, comme j'utilise JavaScript, il semble que cette méthode soit liée aux autorisations de Facebook Graph, mais j'ai déjà défini les autorisations user_photos et publish_stream, qui sont à mon avis les seules dont j'ai besoin pour effectuer cette opération.

J'ai vu quelques questions sans réponse à ce sujet sur stackoverflow, j'espère que j'ai pu m'expliquer suffisamment. Merci à tous.

Answer 1

Oui, c'est possible, j'ai trouvé 2 solutions pour faire cela et elles sont très similaires. l'une à l'autre, il suffit de définir le paramètre url à l'url de l'image externe

Le premier utilise le SDk Javascript :

var imgURL="http://farm4.staticflickr.com/3332/3451193407_b7f047f4b4_o.jpg";//change with your external photo url
FB.api('/album_id/photos', 'post', {
    message:'photo description',
    url:imgURL        
}, function(response){

    if (!response || response.error) {
        alert('Error occured');
    } else {
        alert('Post ID: ' + response.id);
    }

});

et La deuxième utilise jQuery Post request et FormData :

 var postMSG="Your message";
 var url='https://graph.facebook.com/albumID/photos?access_token='+accessToken+"&message="+postMSG;
 var imgURL="http://farm4.staticflickr.com/3332/3451193407_b7f047f4b4_o.jpg";//change with your external photo url
 var formData = new FormData();
 formData.append("url",imgURL);

  $.ajax({
                    url: url,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',

                    success: function(data){
                        alert("POST SUCCESSFUL");
                    }
                });

Answer 2

EDIT: cette réponse est (maintenant) sans grande importance. Si votre image est sur le web, il suffit de spécifier l' url param que par l' API (et voir des exemples dans d'autres réponses). Si vous souhaitez POSTER le contenu de l'image à facebook directement, vous pouvez lire cette réponse à acquérir la compréhension. Voir aussi HTML5 Canvas.toDataUrl().

L'API dit: "Pour publier une photo, envoi d'une requête POST avec la photo en pièce jointe comme multipart/form-data."

FB s'attend à ce que les octets de l'image à être transférés sont dans le corps de la requête HTTP, mais ils ne sont pas là. Ou de le regarder d'une autre manière - là où, dans le FB.api() appel sont vous fournir le contenu réel de l'image elle-même?

Le FB.(api) API est mal documentée, et ne fournit pas un exemple de un HTTP POST qui comprend un corps. On peut inférer de l'absence d'un tel exemple, qu'elle ne prend pas en charge cette.

C'est probablement OK - FB.(api) est à l'aide de quelque chose qui s'appelle XmlHttpRequest sous les couvertures qui ne le soutien, y compris un corps ... rechercher dans vos favoris référence JavaScript.

Cependant, vous aurez encore 2 sous-problèmes à résoudre:

1. comment préparer l'image en octets (et le reste de la demande) comme multipart/form-data; et
2. obtenir les octets de l'image elle-même

(d'ailleurs, la nécessité de coder le corps du message est probablement ce que le PHP setFileUploadSupport(true) la méthode est pour dire l' facebook objet pour coder le corps du message en tant que multipart/form-data avant l'envoi)

Mais c'est un peu meessier que

Malheureusement, le sous-problème '2' peut vous mordre - il n'existe aucun moyen (la dernière fois que j'ai regardé) pour extraire les octets d'une image à partir du navigateur de l'Image de l'objet.

Si l'image téléchargée est accessible via une URL, vous pouvez récupérer les octets avec XmlHttpRequest. Pas trop mauvais.

Si l'image provient du bureau de l'utilisateur, de votre probable recours est de proposer à l'utilisateur un:

 <form enctype="multipart/form-data">
     <input type="filename" name="myfile.jpg" />
     <input type="hidden" name="source" value="@myfile.jpg"/>
     <input type="hidden" name="message" value="My Message"/>
     <input type="hidden" name="access_token" value="..."/> 
 </form> 

(notez qu' source références le nom donné au fichier de téléchargement de widget)

... et l'espoir que FB prévu la réception de données de cette manière (essayez avec un statique HTML formulaire d'abord, avant de coder, il dynamiquement en JS). On peut en déduire qu'en fait il n', car ils n'offrent pas d'autre moyen de le faire.

Answer 3

J'ai utilisé le code @ avec quelques modifications, j'avais le même problème et avec ce code cela a très bien fonctionné :

        var imgURL = //your external photo url
        FB.api('/photos', 'post', {
            message: 'photo description',
            access_token: your accesstoken 
            url: imgURL
        }, function (response) {

            if (!response || response.error) {
                alert('Error occured:' + response);
            } else {
                alert('Post ID: ' + response.id);
            }

        });

Answer 4

Les photos peuvent être téléchargées sur le profil Facebook en utilisant Ajax comme suit.

$.ajax({
            type: "POST",
            url: "https://graph.facebook.com/me/photos",
            data: {
                message: "Your Msg Goes Here",
                url: "http://www.knoje.com/images/photo.jpg[Replace with yours]",
                access_token: token,
                format: "json"
            },
            success: function(data){
               alert("POST SUCCESSFUL"); }
            });

C'est donc la meilleure façon de poster une photo sur un profil Facebook avec GRAPH API et c'est la plus simple.

Dans de nombreuses réponses, j'ai vu que l'url de l'image est partagée par la source, l'image ou la photo, etc. mais cela ne fonctionne pas.

L'utilisation d'une source, d'une photo ou d'une image conduit à une (#324) Nécessite le téléchargement d'un fichier erreur .

La meilleure façon d'éviter l'erreur 324.

Answer 5

Oui, vous pouvez le faire en envoyant des données dans une iframe comme suit ici ou vous pouvez utiliser jQuery File Upload . Le problème est que vous ne pouvez pas obtenir de réponse à partir d'une iframe, en utilisant le plugin, vous pouvez utiliser une poignée de page.

Exemple : téléchargement d'une vidéo à l'aide de jQuery File Upload

<form id="fileupload" action="https://graph-video.facebook.com/me/photos" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="acess_token" value="user_acess_token">
    <input type="text" name="title">
    <input type="text" name="description">
    <input type="file" name="file"> <!-- name must be file -->
</form>

<script type="text/javascript">

    $('#fileupload').fileupload({
        dataType: 'json',
        forceIframeTransport: true, //force use iframe or will no work
        autoUpload : true,
        //facebook book response will be send as param
        //you can use this page to save video (Graph Api) object on database
        redirect : 'http://pathToYourServer?%s' 
    });
</script>