2

我正在尝试在灯箱（或类似的画廊类型的东西）中显示照片库，但我的客户希望照片来自 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>

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

4

1 回答 1

2

如果相册是公开的并且归 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)
        );
    });

});​
于 2012-10-29T21:43:38.003 回答