2

ライトボックス（または同様のギャラリータイプのもの）にフォトギャラリーを表示しようとしていますが、クライアントは、写真を2回アップロードする必要がないように、Facebookアルバムから写真を取得することを望んでいます。

私はワードプレス内で作業していますが、利用可能なプラグインのいくつかを見回しましたが、それらはあまり有望ではないようです。

ここでの私の最善の攻撃計画は何ですか？私は実際にFacebookAPIを掘り下げ始めていませんが、それがあなたたちが提案するものであれば、私は先に進んでそれを実行します。私は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 に答える