[み]jQueryでInstagramのAPIを使ってみた。ポピュラーは取得できたけど…

楽天のAPIが思った以上にカンタンに使えたのでサンプルを紹介してくださっている方がたくさんいたので、InstagramのAPIもカンタンだろうとなめてかかったんです。そしたら、それはそれはとても痛い目にあいました。惨敗です。それでも、サンプルを紹介してくださっている方が何人かいらっしゃったので、なんとかポピュラーは取得して表示することができました。

InstagramのAPIでポピュラーを取得する方法

まずは、InstagramのクライアントID(CLIENT ID)が必要なので、開発者登録をして取得してください。

Instagram Developer Documentation

そしたら、あとはこんなコードです。いろんなかたのコードをコピペして弄って、コピペしていじってるので、かなりの確率でもっとキレイにできるんだと思います。でも、ちゃんと動きます。

JavaScript

$(function() {
    $("#images").text("読み込み中...");
    $.ajax({
        url: "https://api.instagram.com/v1/media/popular",
        data: { client_id: "ココにクライアントID" },
        dataType: "jsonp",
        error: function(jqXHR, textStatus, errorThrown) {
            $("#images").text(textStatus);
        },
        success: function(data, textStatus, jqXHR) {
            $("#images").text("");
            for (var i = 0, length = data.data.length; i < length; i++) {
                var d = data.data[i];
                $("#images").append(
                    $("<li>").addClass("image")
                        .append($("<a>").attr("href", d.link).attr("target", "_blank")
                            .append($("<img>").attr("src", d.images.thumbnail.url)))
                );
            }
        }
    });
});

HTML

<ul id="images"></ul>

CSS

ご自由にどうぞ。

やりたかったこと

本当は、ポピュラーを取得したかったわけではないんです。場所を指定して、その近辺から投稿された写真を取得して表示したかったんです。そこまでの道のりはまだまだ長いようですね。でも、まずはAPIをつかってポピュラーを取得・表示できただけよしとします:)

Instagram Instagram
価格: 無料(記事公開時)
App Storeで詳細を見る
アプリをダウンロード

jQueryを勉強しましょう

htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねw でも、jQueryって、実はカンタンなんです。

でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。

なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします!

実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ!という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup