web-dev-qa-db-ja.com

Facebook Graph API-JavaScriptを使用して写真をアップロードする

JavaScriptを使用してFacebook Graph APIを使用してファイルをアップロードすることは可能ですか？私は次のJavaScriptを使用しています

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!');
        }
    }); 
}

これを実行すると、次のエラーが表示されます...

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

私がこの方法を試して研究すると、私が知ることができるのはこれを解決するために現れるPHPの方法だけです

$facebook->setFileUploadSupport(true);

ただし、JavaScriptを使用しているため、この方法はFacebook Graphのアクセス許可と関係があるようですが、user_photosおよびpublish_streamのアクセス許可を既に設定しています。

Stackoverflowでこれに関するいくつかの未回答の質問を見てきましたが、うまくいけば十分に説明できます。みんなありがとう。

javascriptfacebookfacebook-graph-apifile-upload
40
Moz

編集：この答えは（今）ほとんど無関係です。画像がWeb上にある場合は、 [〜＃〜] api [〜＃〜] に従ってurlパラメーターを指定するだけです（他の回答の例を参照してください）。 POST画像コンテンツを直接Facebookに送信したい場合は、この回答を読んで理解してください。HTML5のCanvas.toDataUrl()も参照してください。

API says ： "写真を公開するには、POSTリクエストを発行し、multipart/form-data。」

FBは、アップロードされる画像のバイトがHTTPリクエストの本文にあることを期待していますが、そこにはありません。または、別の方法で見るために-FB.api（）呼び出しのどこで、画像自体の実際のコンテンツを提供していますか？

FB.api（） APIは不十分に文書化されており、HTTP POSTには本文が含まれています。これをサポートしないような例。

それはおそらく大丈夫です-FB.api（）は、ボディを含むdoesサポートするXmlHttpRequestと呼ばれるものを使用しています...お気に入りのJavaScriptで検索します参照。

ただし、解決する必要があるサブ問題は2つあります。

  1. multipart/form-data ;として画像バイト（およびリクエストの残り）を準備する方法そして
  2. 画像自体のバイトを取得する

（偶然、メッセージ本文をエンコードする必要があるのは、おそらくPHP setFileUploadSupport（true）メソッドの目的です-facebookオブジェクトにメッセージ本文をmultipart/form-data送信前）

しかし、それはそれより少し厄介です

残念ながら、副問題「2」はあなたに噛み付くかもしれません-ブラウザが提供するImageオブジェクトから画像のバイトを抽出する方法はありません（前回見ました）。

アップロードする画像にURL経由でアクセスできる場合、XmlHttpRequestでバイトをフェッチできます。悪くない。

画像がユーザーのデスクトップからのものである場合、おそらく次のことをユーザーに提供する必要があります。

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

（sourceは、ファイルアップロードウィジェットに指定された名前を参照することに注意してください）

...そして、FBがこの方法でデータを受け取ることを期待していたことを願っています（JSで動的にコーディングする前に、まず静的HTMLフォームで試してみてください）。彼らはそれを行う別の手段を提供していないので、実際にはそうなると推測するかもしれません。

26
David Bullock

はい、これは可能です、私はそれを行う方法を2つの解決策を見つけ、それらは互いに非常に似ています、あなたは単に外部画像のURLにurlパラメータを定義する必要があります

Javascript SDkを使用する最初のもの：

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);
    }

});

およびjQuery PostリクエストとFormDataを使用する2番目：

 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");
                    }
                });
44
Владимир Дворник

@ВладимирДворникコードを変更して使用しましたが、同じ問題があり、このコードでは非常にうまく機能しました。

        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);
            }

        });
17
Arrabi

次のようにAjaxを使用してFacebookプロフィールに写真をアップロードできます。

$.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"); }
            });

したがって、これは、GRAPH APIを使用してFacebookプロフィールに写真を投稿する最良の方法であり、簡単な方法です。

多くの答えで、私は画像のURLがソース、画像、または画像などによって支配されていることを見ましたが、それは機能しません。

ソース、画像、または画像を使用すると、（＃324）アップロードファイルが必要エラーが発生します。

324エラーを回避する最良の方法。

11
sumitkanoje

@Thiagoの答えのみが、JavaScriptを介してuploadingデータの質問に答えています。 Facebook JS APIはこの状況をカバーしていないことがわかりました。

また、個人用ソリューションを作成してテストしました。

主な手順

  1. 画像のバイナリデータを取得します（キャンバスを使用しましたが、入力ボックスを使用することも可能です）
  2. グラフAPI呼び出しに必要なすべてのデータを含むマルチパートリクエストを作成する
  3. バイナリデータをリクエストに含める
  4. すべてをバイナリ配列にエンコードし、XHR経由で送信します

コード

変換ユーティリティ

var conversions = {
  stringToBinaryArray: function(string) {
    return Array.prototype.map.call(string, function(c) {
      return c.charCodeAt(0) & 0xff;
    });
  },
  base64ToString: function(b64String) {
    return atob(b64String);
  }
};

画像投稿スニペット

var DEFAULT_CALL_OPTS = {
  url: 'https://graph.facebook.com/me/photos',
  type: 'POST',
  cache: false,
  success: function(response) {
    console.log(response);
  },
  error: function() {
    console.error(arguments);
  },
  // we compose the data manually, thus
  processData: false,
  /**
   *  Override the default send method to send the data in binary form
   */
  xhr: function() {
    var xhr = $.ajaxSettings.xhr();
    xhr.send = function(string) {
      var bytes = conversions.stringToBinaryArray(string);
      XMLHttpRequest.prototype.send.call(this, new Uint8Array(bytes).buffer);
    };
    return xhr;
  }
};
/**
 * It composes the multipart POST data, according to HTTP standards
 */
var composeMultipartData = function(fields, boundary) {
  var data = '';
  $.each(fields, function(key, value) {
    data += '--' + boundary + '\r\n';

    if (value.dataString) { // file upload
      data += 'Content-Disposition: form-data; name=\'' + key + '\'; ' +
        'filename=\'' + value.name + '\'\r\n';
      data += 'Content-Type: ' + value.type + '\r\n\r\n';
      data += value.dataString + '\r\n';
    } else {
      data += 'Content-Disposition: form-data; name=\'' + key + '\';' +
        '\r\n\r\n';
      data += value + '\r\n';
    }
  });
  data += '--' + boundary + '--';
  return data;
};

/**
 * It sets the multipart form data & contentType
 */
var setupData = function(callObj, opts) {
  // custom separator for the data
  var boundary = 'Awesome field separator ' + Math.random();

  // set the data
  callObj.data = composeMultipartData(opts.fb, boundary);

  // .. and content type
  callObj.contentType = 'multipart/form-data; boundary=' + boundary;
};

// the "public" method to be used
var postImage = function(opts) {

  // create the callObject by combining the defaults with the received ones
  var callObj = $.extend({}, DEFAULT_CALL_OPTS, opts.call);

  // append the access token to the url
  callObj.url += '?access_token=' + opts.fb.accessToken;

  // set the data to be sent in the post (callObj.data = *Magic*)
  setupData(callObj, opts);

  // POST the whole thing to the defined FB url
  $.ajax(callObj);
};

使用法

postImage({
  fb: { // data to be sent to FB
    caption: caption,
    /* place any other API params you wish to send. Ex: place / tags etc.*/
    accessToken: 'ACCESS_TOKEN',
    file: {
      name: 'your-file-name.jpg',
      type: 'image/jpeg', // or png
      dataString: image // the string containing the binary data
    }
  },
  call: { // options of the $.ajax call
    url: 'https://graph.facebook.com/me/photos', // or replace *me* with albumid
    success: successCallbackFunction,
    error: errorCallbackFunction
  }
});

追加

キャンバス画像のバイナリ文字列表現の抽出

var getImageToBeSentToFacebook = function() {
  // get the reference to the canvas
  var canvas = $('.some-canvas')[0];

  // extract its contents as a jpeg image
  var data = canvas.toDataURL('image/jpeg');

  // strip the base64 "header"
  data = data.replace(/^data:image\/(png|jpe?g);base64,/, '');

  // convert the base64 string to string containing the binary data
  return conversions.base64ToString(data);
}

input[type=file]からbinaryStringをロードする方法に関する情報

HTML5 File APIはテキストおよびバイナリとして読み取られます

ノート：

  1. もちろん代替アプローチもあります
    • IframeでHTMLフォームを使用する-呼び出しから応答を取得できない
    • FormData ＆ File アプローチを使用しますが、残念ながらこの場合、プロセスの使用を難しくする多くの非互換性があり、そして、あなたは一貫性のないものをダクトテーピングすることになります-したがって、HTTP標準はめったに変更されないので、私の選択は手動データアセンブリでした:)
  2. ソリューションには、特別なHTML5機能は必要ありません。
  3. 上記の例では jQuery.ajax 、 jQuery.extend 、 jQuery.each を使用します
6
Matyas

はい。このデータを here のようなiframeに投稿するか、 jQuery File Upload を使用できます。問題は、ページハンドルを使用できるプラグインを使用して、iframeから応答を取得できないことです。

例：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>
4
Guilherme Torres Castro

Javascriptのみを使用してローカルコンピューターからファイルをアップロードするには、 HelloJS を試してください。

<form onsubmit="upload();">
     <input type="file" name="file"/>
     <button type="submit">Submit</button>
</form>

<script>
function upload(){
   hello.api("facebook:/me/photos", 'post', document.getElementById('form'), function(r){
      alert(r&&!r.error?'Success':'Failed'); 
   });
}
</script>

http://adodson.com/hello.js/demos/upload.html にアップロードのデモがあります

2
Drew

https://stackoverflow.com/a/16439233/6821 には、写真データ自体をアップロードする必要があり、URLがない場合に機能するソリューションが含まれています。

2
Daniel X Moore

これは動作します：

   function x(authToken, filename, mimeType, imageData, message) {
    // this is the multipart/form-data boundary we'll use
    var boundary = '----ThisIsTheBoundary1234567890';

    // let's encode our image file, which is contained in the var
    var formData = '--' + boundary + '\r\n';
    formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"\r\n';
    formData += 'Content-Type: ' + mimeType + '\r\n\r\n';
    for (var i = 0; i < imageData.length; ++i) {
        formData += String.fromCharCode(imageData[i] & 0xff);
    }
    formData += '\r\n';
    formData += '--' + boundary + '\r\n';
    formData += 'Content-Disposition: form-data; name="message"\r\n\r\n';
    formData += message + '\r\n';
    formData += '--' + boundary + '--\r\n';

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://graph.facebook.com/me/photos?access_token=' + authToken, true);
    xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);

    // Solving problem with sendAsBinary for chrome
    try {
        if (typeof XMLHttpRequest.prototype.sendAsBinary == 'undefined') {
            XMLHttpRequest.prototype.sendAsBinary = function(text) {
                var data = new ArrayBuffer(text.length);
                var ui8a = new Uint8Array(data, 0);
                for (var i = 0; i < text.length; i++) ui8a[i] = (text.charCodeAt(i) & 0xff);
                this.send(ui8a);
            }
        }
    } catch (e) {}
    xhr.sendAsBinary(formData);
};
2
Thiago Tecedor

これでも機能します。私はそれを以下のように使用しています：

var formdata= new FormData();
if (postAs === 'page'){
    postTo = pageId; //post to page using pageID
}

formdata.append("access_token", accessToken); //append page access token if to post as page, uAuth|paAuth
formdata.append("message", photoDescription);
formdata.append("url", 'http://images/image.png');

try {
    $.ajax({
        url: 'https://graph.facebook.com/'+ postTo +'/photos',
        type: "POST",
        data: formdata,
        processData: false,
        contentType: false,
        cache: false,
        error: function (shr, status, data) {
            console.log("error " + data + " Status " + shr.status);
        },
        complete: function () {
            console.log("Successfully uploaded photo to Facebook");
        }
    });
} catch (e) {
    console.log(e);
}

ただし、FacebookでPHP apiを使用するのに比べて、これが望ましいか、または大きなセキュリティリスクがあるかどうか、皆さんが考えているかどうかを尋ねる必要があります。

2
Carmela

同様の問題があるようですが、上記の解決策は機能しませんでした。

私は、問題なく画像を投稿するためにArrabiによって提案されたソリューション（urlプロパティのみを使用）を使用していました。私の画像はそれぞれ2〜3 MBです。

アプリを別のサーバーに移行した（投稿内の画像の絶対URLを変更した）とき、メソッドは約100kサイズを超える画像に対して324エラーを出し続けました。

Apacheの設定が原因であると思いましたが、Apacheをlighttpdに変更したとき、問題はまだありました。

Facebookからの接続は実際に私の（Apache）ログに表示されます：

69.171.234.7--[08/Jun/2012：11：35：54 +0200] "GET /images/cards/1337701633_518192458.png HTTP/1.1" 200 2676608 "-" "facebookplatform/1.0（+ http：// developers .facebook.com）」

69.171.228.246--[08/Jun/2012：11：42：59 +0200] "GET /images/test5.jpg HTTP/1.1" 200 457402 "-" "facebookplatform/1.0（+ http：//developers.facebook .com）」

69.171.228.246--[08/Jun/2012：11：43：17 +0200] "GET /images/test4.jpg HTTP/1.1" 200 312069 "-" "facebookplatform/1.0（+ http：//developers.facebook .com）」

69.171.228.249--[08/Jun/2012：11：43：49 +0200] "GET /images/test2.png HTTP/1.1" 200 99538 "-" "facebookplatform/1.0（+ http：//developers.facebook .com）」

69.171.228.244--[08/Jun/2012：11：42：31 +0200] "GET /images/test6.png HTTP/1.1" 200 727722 "-" "facebookplatform/1.0（+ http：//developers.facebook .com）」

Test2.pngのみが成功しました。

1
Tom Lous

写真（Phaserフレームワークの一部のBitmapData）を共有するために以下を使用します。うまくいくようです...

// Turn data URI to a blob ready for upload.
dataURItoBlob(dataURI:string): Blob {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/jpeg' });
}

// Share the given bitmapData as a photo on Facebook
sharePhoto(accessToken: string, photo: BitmapData, message: string): void {
    // Create form data, set up access_token, source and message
    var fd = new FormData();
    fd.append("access_token", accessToken);
    fd.append("source", this.dataURItoBlob(photo.canvas.toDataURL("image/jpeg")));
    fd.append("message", message);

    var request = new XMLHttpRequest();
    var thisPtr = this;
    request.onreadystatechange = function () {
        if (request.readyState == XMLHttpRequest.DONE) {
            var json = JSON.parse(request.responseText);
            if (json.hasOwnProperty("error")) {
                var error = json["error"];
                if (error.hasOwnProperty("type")) {
                    var errorType = error["type"];
                    if (errorType === "OAuthException") {
                        console.log("Need to request more permissions!");
                    }
                }
            }
        } else if (request.readyState == XMLHttpRequest.HEADERS_RECEIVED) {

        } else if (request.readyState == XMLHttpRequest.LOADING) {

        } else if (request.readyState == XMLHttpRequest.OPENED) {

        } else if (request.readyState == XMLHttpRequest.UNSENT) {

        }
    }
    request.open("POST", "https://graph.facebook.com/me/photos", true);
    request.send(fd);
}
0
Steven Craft

キャンバスからFacebookの写真に直接アップロードする方法を探している人がいる場合、これは私のために機能します：

function postImageToFacebook(token, imageData, message, successCallback, errorCallback) {
  var fd = new FormData();
  fd.append("access_token", token);
  fd.append("source", imageData);
  fd.append("caption", message);

  $.ajax({
      url: "https://graph.facebook.com/me/photos?access_token=" + token,
      type: "POST",
      data: fd,
      processData: false,
      contentType: false,
      cache: false,
      success: function (data) {
        successCallback(data);
      },
      error: function (shr, status, data) {
        errorCallback(data);
      },
      complete: function (data) {
        console.log('Completed');
      }
  });
}

function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(',')[1]);
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], {type: 'image/jpeg'});
}

それを使用するには

// *IMPORTANT*
var FBLoginScope = 'publish_actions'; // or sth like 'user_photos,publish_actions' if you also use other scopes.

var caption = "Hello Facebook!";
var successCallback = ...;
var errorCallback = ...;

var data = $('#your_canvas_id')[0].toDataURL("image/jpeg");
try {
  imageData = dataURItoBlob(data);
} catch (e) {
  console.log(e);
}

FB.getLoginStatus(function (response) {
  if (response.status === "connected") {
    postImageToFacebook(response.authResponse.accessToken, imageData, caption, successCallback, errorCallback);
  } else if (response.status === "not_authorized") {
    FB.login(function (response) {
        postImageToFacebook(response.authResponse.accessToken, imageData, caption, successCallback, errorCallback);
    }, {scope: FBLoginScope});
  } else {
    FB.login(function (response) {
        postImageToFacebook(response.authResponse.accessToken, imageData, caption, successCallback, errorCallback);
    }, {scope: FBLoginScope});
  }
});

変更後： http://gorigins.com/posting-a-canvas-image-to-facebook-and-Tw​​itter/

0
aunnnn