使用 facebook 照片创建相册（灯箱等）答案

【问题标题】：creating a photo album (lightbox, etc) with facebook photos使用 facebook 照片创建相册（灯箱等）
【发布时间】：2023-03-30 20:15:01
【问题描述】：

我正在尝试在 Lightbox（或类似的画廊类型的东西）中显示照片库，但我的客户希望照片来自 Facebook 相册以避免必须两次上传照片。

我在 wordpress 中工作，但我环顾了一些可用的插件，但它们似乎不太有希望。

我在这里最好的进攻计划是什么？我还没有真正开始深入研究 facebook api，但如果这是你们建议的，我会继续做。我对 javascript 和 php 非常熟悉。在我确定它会起作用之前，我不想进入那个兔子洞。

我只是在寻找可以分享一些见解的人，因为我真的不知道从哪里开始。

编辑：

这就是我被困的地方......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Facebook Photo Gallery</title>
    <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

$.getJSON('http://graph.facebook.com/356611067762340/photos').then(function(response) {
        // 0-8, 0 returns the largest available images, 8 the smallest
        var imageIndex = 5;

        var images = _(response.data)
            .chain()
            .pluck('images')
            .pluck(imageIndex)
            .value();

        console.log(images);

        _(images).each(function(image) {
            $('#image-container').append(
                $('<img>').attr('src', image.source)
            );
        });

        });
    </script>


    </head>

    <body>
    <div id="image-container"></div>

    </body>
    </html>

这对我来说似乎完全有效，为什么它不起作用......？

【问题讨论】：

标签： javascript facebook wordpress integration

【解决方案1】：

如果相册是公开的并且归 Facebook 页面（不是个人资料）所有，这应该很容易。我是通过一个婚礼网站做到这一点的。

这是我使用的专辑：https://www.facebook.com/media/set/?set=a.428653951748.228645.6815841748&type=3

这是我需要的 Facebook API 端点：http://graph.facebook.com/428653951748/photos

您只需要能够从 Facebook 相册的 URL 中提取的相册 ID，然后向 graph.facebook.com/[id]/photos 发出请求。你会得到一组很好的图像和不同大小图像的 URL。

示例，使用 jQuery 和 Underscore.js（同样位于 http://jsfiddle.net/ey2Pd/2/）：

$.getJSON('http://graph.facebook.com/10150198713667381/photos').then(function(response) {

    // 0-8, 0 returns the largest available images, 8 the smallest
    var imageIndex = 4;

    var images = _(response.data).chain()
        .pluck('images')
        .pluck(imageIndex)
    .value();

    _(images).each(function(image) {
        $('#image-container').append(
            $('<img>').attr('src', image.source)
        );
    });

});

【讨论】：

对 facebook 的请求是什么样的？
只是一个简单的 GET 请求。在浏览器中打开该 URL，您可以看到 JSON 响应。
我可以看到图片，但我得到了每张图片的每个尺寸。我将如何循环并仅从每个中获取 960x540？我对所有这些嵌套数组感到困惑......
想通了。忘了包括 underscore.js ...... duh