将多张照片发布到一个帖子中
Posting multiple Photos to one post
我一直在尝试创建一个应用程序,该应用程序需要将多张照片附加到一篇帖子中。,以下是我尝试过的
首先,我使用JS sdk的facebook节点sdk来实现不同的功能,但Official JS sdk没有上传文件的选项,然后我在form-data
的帮助下将照片本身附加/插入HTTP POST,代码如下-
var form = new FormData();
form.append('file', fs.createReadStream(picPaths[0]));
form.append('message', "Hello"); //Put message
var ACCESS_TOKEN = "ACCESS_TOKEN";
var options = {
method: 'post',
host: 'graph.facebook.com',
path: '{Object-ID}/photos' + '?access_token=' + ACCESS_TOKEN,
headers: form.getHeaders(),
}
var request = https.request(options, function(res) {
console.log(res, false, null);
});
form.pipe(request);
request.on('error', function(error) {
console.log(error);
});
这适用于一张照片。
但正如你在我开始的github.com/Thuzi/facebook-node-sdk/issues/113中看到的那样,不可能附上多张照片。
因此,正如dantman
所提到的,我在批处理过程中进行了查找,可以在developers.facebook.com/docs/graph-api/making-multiple-requests中找到,标题为上传二进制数据。有一件事打动了我,给了我希望,那就是这一句话。
attached_files属性的值可以采用逗号分隔的附件名称列表。
注意这个库或JS SDK也不可能(用照片进行批处理)
你可以这样做卷曲的张贴图像,
curl -F 'access_token=ACCESS_TOKEN' -F 'batch=[{"method":"POST","relative_url":"{Object-Id}/photos","body":"message=Test Post","attached_files":"file1"}]' -F 'file1=@image1' -F 'file2=@image2' https://graph.facebook.com
上面的代码张贴了一个图像
所以我的问题是,在curl的帮助下,可以将多个图像/二进制文件附加到帖子中,就像文档建议的..."attached_files":"file1,file2"...
一样,请帮助我解决这个问题,如果你已经这样做了,你可以发布你的代码的快照吗。
谢谢,Ravi
我终于明白了怎么做。
因此,首先,请阅读此处标题为"发布带有上传照片的多照片帖子"的部分:https://developers.facebook.com/docs/graph-api/reference/page/photos/#Creating
它所说的基本上是正确的,但是它不是用JavaScript编写的。此外,他们没有足够强调一个重要的步骤:你必须将上传的图像的"已发布"设置为"虚假",然后才能将其附加到创建的帖子上。
无论如何,这是工作代码——在JavaScript中,并且"已发布"正确设置为false:
async function PostImageToFacebook(token, filename, mimeType, imageDataBlob, message) {
var fd = new FormData();
fd.append("access_token", token);
fd.append("source", imageDataBlob);
//fd.append("message", "photo message for " + filename);
fd.append("no_story", "true");
//fd.append("privacy", "SELF");
fd.append("published", "false");
// Upload image to facebook without story(post to feed)
let uploadPhotoResponse = await $.ajax({
url: "https://graph.facebook.com/me/photos?access_token=" + token,
type: "POST",
data: fd,
processData: false,
contentType: false,
cache: false
});
console.log(`Uploaded photo "${filename}": `, uploadPhotoResponse);
let uploadPhotoResponse2 = await $.ajax({
url: "https://graph.facebook.com/me/photos?access_token=" + token,
type: "POST",
data: fd,
processData: false,
contentType: false,
cache: false
});
console.log(`Uploaded photo "${filename}": `, uploadPhotoResponse2);
let makePostResponse = await $.ajax({
"async": true,
"crossDomain": true,
"url": "https://graph.facebook.com/v2.11/me/feed",
"method": "POST",
"headers": {
"cache-control": "no-cache",
"content-type": "application/x-www-form-urlencoded"
},
"data": {
"message": "Testing multi-photo post2!",
"attached_media[0]": `{"media_fbid":${uploadPhotoResponse.id}}`,
"attached_media[1]": `{"media_fbid":${uploadPhotoResponse2.id}}`,
"access_token": token
}
});
console.log(`Made post: `, makePostResponse);
}
上面的代码目前只上传了两次相同的图片,然后将两者都附加到新的帖子中。显然,在现实世界中,你会用不同的图像替换第二张照片上传中的数据。
无论如何,要使用该函数,只需这样调用它:
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/png"});
}
let imageDataURI = GetImageDataURIFromSomewhere();
let imageBlob = dataURItoBlob(imageDataURI);
PostImageToFacebook(fbToken, "some_filename", "image/png", imageBlob, window.location.href);
这是可能的。
注意:这不是一种有效的方法,只是为了解释我在这里做的目的,
我得到的第一个提示,这可能是从这个后
我使用的步骤:
- 按照文档创建自定义打开的图形故事
- 假设您要附加四个图像(图片[1,2,3,4])
-
首先,我在新的
facebook-node-sdk
v1.1.0-alpha1
的帮助下用类似这样的代码(使用批处理)将它们分阶段。FB.api( "", "post", { batch: [ { method: "POST", relative_url: "me/staging_resources", attached_files: "file1", type:"image/png" }, { method: "POST", relative_url: "me/staging_resources", attached_files: "file2", type:"image/png" }, { method: "POST", relative_url: "me/staging_resources", attached_files: "file3", type:"image/png" }, { method: "POST", relative_url: "me/staging_resources", attached_files: "file4", type:"image/png" }], file1: fs.createReadStream(picPaths[0]), file2: fs.createReadStream(picPaths[1]), file3: fs.createReadStream(picPaths[2]), file4: fs.createReadStream(picPaths[3]) }, function(response) { console.log(response); });
-
现在,从响应部分获取url,并使用相同的库发布帖子。代码是这样的。
FB.api( "me/objects/{app-namespace}:{custom-object}", "post", { "object": { "og:title": "Sample Post", "og:image[0]": { "url": "fbstaging:{...}", "user_generated": true }, "og:image[1]": { "url": "fbstaging:{...}", "user_generated": true }, "og:image[2]": { "url": "fbstaging:{...}", "user_generated": true }, "og:image[3]": { "url": "fbstaging:{...}", "user_generated": true } } }, function(response) { console.log(response); } );
现在,有了这两段代码,您将能够将多个图像/照片推送到单个帖子中。
注意:这可能更有意义,或者可以在这里描述的命名批处理的帮助下完成。
谢谢,Ravi
- 灯箱只显示第一张照片
- 照片在模态中滑动多张照片
- 如何通过javascript api在Facebook上发布多张照片
- Jquery 动画第二张照片未显示
- 制作The Galleria Facebook相册的第一张照片 The Actual Facebook Album的封面
- JavaScript幻灯片卡在第一张照片上
- 将多张照片发布到一个帖子中
- 在画布标签里放一张照片
- 上传一张照片到朋友的涂鸦墙上
- 两张照片放在一起.显示一个悬停.可能与css或只有javascript
- 放大缩小多张照片
- Facebook Graph jQuery AJAX调用,代表用户发布一张照片
- 使用PhoneGap从设备图片库中选择多张照片
- 从Flickr公共帐户获取最新的12张照片
- 当我点击一张照片时,如何更改页面上的所有照片?
- 使用html5的网络摄像头拍摄一张照片
- 通过JS在svg中添加图像命名空间仍然没有;不要给我看那张照片
- Javascript:在网络浏览器中显示照片之前,是否可以捕获多张照片
- 我如何让用户上传多张照片,如脸书
- 将两张照片合二为一