インスタグラム画像ギャラリーをホームページやブログに設置する(API利用)

スポンサーリンク
スポンサーリンク

インスタグラム画像ギャラリー

Instagram API と instafeed.jsを使って、インスタグラム(Instagram)の画像ギャラリーをホームページやブログに設置してみました。

インスタグラムは写真に特化したSNSで、若い女性を中心に利用者も多く、アップされている写真の美しさには定評があります。

皆さんもインスタグラムにご自慢の写真をたくさんアップされてると思いますが、その写真はインスタグラムのアプリ内でしか見ることができません。自前のホームページやブログを運営されている方であれば、自分のギャラリーも一緒に公開したいですよね。

そこで、今回は Instagram API と instafeed.jsを使って、htmlに組み込み可能なインスタグラムの画像ギャラリーを作成し、ホームページやブログに設置してみます。

なお、Instagram API は英語ページで、HTML組み込みはそれなりの知識が必要です。ちょっと敷居が高いと感じた方は、同様のInstagramウィジェット「SnapWidget」もあります。

また、WordPressをお使いの方は、プラグイン「Smash Balloon Social Photo Feed」を使うと、たった数分でインスタグラム画像ギャラリーを設置できます。

WordPressプラグインでインスタグラム写真を埋め込み「Smash Balloon Social Photo Feed」
WordPressサイトにインスタグラム写真ギャラリーを埋め込むプラグイン「Smash Balloon Social Photo Feed」は、ギャラリーのややこしい設定はすべてプラグイン任せでOK、埋め込み用コードをコピペするだけで設置可能です。
スポンサーリンク

Instagram Developer クライアント登録

まずはPCからInstagramにログインします。

Instagram PCからログイン

右上の人物アイコンをクリックしてプロフィールページに進み、下のメニューから「API」をクリックします。

Instagram API

Instagram API 開発者向けの Instagram Developer ページが表示されます。「Register Your Application」をクリックしてください。

Instagram Developer

Instagram Developer は初回のみサインアップが必要なので、webサイトと電話番号、APIを利用する目的を入力し、Instagram API利用規約にチェックを入れて、「Sign up」をクリックします。

Instagram Developer signup

Instagram API のクライアントを登録します。緑の「Register a New Client」をクリック。

Instagram API Register a New Client

Instagram API のクライアント登録フォームに必要事項を入力していきます。日本語でも問題ありません。

Instagram API Register a New Client

Application Name: アプリ名です。適当に入力してください。
Description:    アプリの詳細です。こちらも適当で大丈夫です。
Company Name:  会社名です。自分のサイトやブログ名を入れておけばよいでしょう。
Website URL:    自分のサイトやブログのURLを入れて下さい。
Valid redirect URIs: 真上の「Website URL:」をそのままコピーして入力してください。

Privacy Policy URL: と Contact email: はそのままでOKです。

入力情報はこんな感じでOKですが、URLはきちんと入れて下さい。不備があるとエラーが表示されます。

Instagram API Register フォーム入力

次に Details の 隣のタブ、Security で「Disable implicit OAuth:」のチェックを外します。ここをそのままにしておくと、アクセストークンを取得できません。あとはキャプチャの文字を入力して、最後に「Register」をクリックします。

Instagram API Register Security

「Successfully registered ‘アプリ名’」が表示されたら登録完了です。Client ID を控えておいて下さい。

Instagram API 登録完了

Instagram API アクセストークン取得

続いてアクセストークンを取得します。必要な情報は発行された「Client ID」と 登録時に入力した「Valid redirect URIs」です。下記URLの該当部分に入力してアクセスしてください。

https://instagram.com/oauth/authorize/?client_id=***********&redirect_uri=###########&response_type=token

*********** に「Client ID」を入力
########### に「Valid redirect URIs」を入力

入力した情報が正しければ、「このアプリはSandboxモードである」と表示されるので「Authorize」をクリックします。

Instagram API アクセストークン取得

「Valid redirect URIs」で入力したURLにリダイレクトされますが、この時のアドレスバーに表示されているURLで #access_token= の後ろがアクセストークンになります。これをメモして保存しておいてください。

http://wind-mill.co.jp/#access_token=1234567890.abcdefg.re687ga867gre456he86eagr8rag8hga

Instagram アクセストークンURL

ちなみに Sandbox Mode とは、Instagram API のテスト機能みたいなもので、機能にも制限があり、表示できる写真も20枚までという制限があります。とはいえ、普通で使う分には20枚で十分です。

Instafeed.js を設置する

それでは Instafeed.js を設置してみましょう。まずは instafeedjs.com から必要なファイルをダウンロードします。

Instafeed.js - a simple Instagram javascript plugin
Instafeed.js is a dead-simple way to add Instagram photos to your website. No jQuery required, just good 'ol plain javascript.

Instafeed.js トップページの「view on github」をクリックします。

Instafeed.js ファイルダウンロード

github の「Clone or download」をクリックして、「Download ZIP」でファイルをダウンロードします。

Instafeed.js ファイルダウンロード

Instafeed.js の動作に必要な「instafeed.min.js」をサーバーにアップしてください。他に同梱されているファイルは不要です。

Instafeed.min.js

htmlファイルの<head></head>内で instafeed.min.js を呼び出します。「js」フォルダ等にアップする場合は、パスの変更をお忘れなく。

<script src="instafeed.min.js" type="text/javascript"></script>

続いて下記のコードを<head></head>内に設置します。ここで入力する userId: は、普段使っているユーザーIDではなく、アクセストークンの頭から10桁までの数字になります。

<script type="text/javascript">
$(document).ready(function() {
    var userFeed = new Instafeed({
	get: 'user',
        userId: '1234567890', //アクセストークンの頭から10桁までの数字
        accessToken: '1234567890.abcdefg.re687ga867gre456he86eagr8rag8hga' //アクセストークン
    });
    userFeed.run();
});
</script>

さらにオプションを指定することで、表示枚数やタグの選択などが可能です。また、template: を追記すれば、画像のキャプションや「いいね!」の数、撮影場所なども表示されます。

オプションと template: の詳細は、先ほどの https://github.com/stevenschobert/instafeed.js 内に記載されているので、興味のある方はチャレンジしてみてください。ただし、内容はすべて英語です。

あとはホームページやブログのギャラリーを表示させたい部分に下記のコードを記述すればOKです。

<ul id="instafeed"></ul>

template:を追加 htmlタグやCSSで表示を整える

表示が乱れる場合は、template: を追加して html タグや CSS で整えます。以下は一例です。

    var userFeed = new Instafeed({
	get: 'user',
        userId: '1234567890',
        accessToken: '1234567890.abcdefg.re687ga867gre456he86eagr8rag8hga',
		template: '<div class="instagallery"><a href="{{link}}" target="_blank"><img src="{{image}}" width="145"/></a></div>'
    });
.instagallery{
position: relative;
display: inline-block;
margin:0 5px;
}

写真が横一列にうまく収まらなかったので、template: に<div>タグを追加して、CSS で表示を整えました。html タグでは写真の別ウィンドウ表示と画像サイズを指定していますが、サイズはCSSで指定してレスポンシブ対応にするのも手ですね。

あとはサイズと余白を整えて、自分のホームページやブログに合った画像ギャラリーを作ってくださいね。

タイトルとURLをコピーしました