Instagram API と instafeed.jsを使って、インスタグラム(Instagram)の画像ギャラリーをホームページやブログに設置してみました。
インスタグラムは写真に特化したSNSで、若い女性を中心に利用者も多く、アップされている写真の美しさには定評があります。
皆さんもインスタグラムにご自慢の写真をたくさんアップされてると思いますが、その写真はインスタグラムのアプリ内でしか見ることができません。自前のホームページやブログを運営されている方であれば、自分のギャラリーも一緒に公開したいですよね。
そこで、今回は Instagram API と instafeed.jsを使って、htmlに組み込み可能なインスタグラムの画像ギャラリーを作成し、ホームページやブログに設置してみます。
なお、Instagram API は英語ページで、HTML組み込みはそれなりの知識が必要です。ちょっと敷居が高いと感じた方は、同様のInstagramウィジェット「SnapWidget」もあります。
Instagram Developer クライアント登録
まずはPCからInstagramにログインします。
右上の人物アイコンをクリックしてプロフィールページに進み、下のメニューから「API」をクリックします。
Instagram API 開発者向けの Instagram Developer ページが表示されます。「Register Your Application」をクリックしてください。
Instagram Developer は初回のみサインアップが必要なので、webサイトと電話番号、APIを利用する目的を入力し、Instagram API利用規約にチェックを入れて、「Sign up」をクリックします。
Instagram API のクライアントを登録します。緑の「Register a New Client」をクリック。
Instagram API のクライアント登録フォームに必要事項を入力していきます。日本語でも問題ありません。
Application Name: アプリ名です。適当に入力してください。
Description: アプリの詳細です。こちらも適当で大丈夫です。
Company Name: 会社名です。自分のサイトやブログ名を入れておけばよいでしょう。
Website URL: 自分のサイトやブログのURLを入れて下さい。
Valid redirect URIs: 真上の「Website URL:」をそのままコピーして入力してください。
Privacy Policy URL: と Contact email: はそのままでOKです。
入力情報はこんな感じでOKですが、URLはきちんと入れて下さい。不備があるとエラーが表示されます。
次に Details の 隣のタブ、Security で「Disable implicit OAuth:」のチェックを外します。ここをそのままにしておくと、アクセストークンを取得できません。あとはキャプチャの文字を入力して、最後に「Register」をクリックします。
「Successfully registered ‘アプリ名’」が表示されたら登録完了です。Client ID を控えておいて下さい。
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」をクリックします。
「Valid redirect URIs」で入力したURLにリダイレクトされますが、この時のアドレスバーに表示されているURLで #access_token= の後ろがアクセストークンになります。これをメモして保存しておいてください。
http://wind-mill.co.jp/#access_token=1234567890.abcdefg.re687ga867gre456he86eagr8rag8hga
ちなみに Sandbox Mode とは、Instagram API のテスト機能みたいなもので、機能にも制限があり、表示できる写真も20枚までという制限があります。とはいえ、普通で使う分には20枚で十分です。
Instafeed.js を設置する
それでは Instafeed.js を設置してみましょう。まずは instafeedjs.com から必要なファイルをダウンロードします。
Instafeed.js トップページの「view on github」をクリックします。
github の「Clone or download」をクリックして、「Download ZIP」でファイルをダウンロードします。
Instafeed.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で指定してレスポンシブ対応にするのも手ですね。
あとはサイズと余白を整えて、自分のホームページやブログに合った画像ギャラリーを作ってくださいね。
WordPressプラグインでInstagram埋め込み
WordPressプラグイン「Smash Balloon Social Photo Feed」を使うと、たった数分でインスタグラム画像ギャラリーを設置できます。
Smash Balloon Social Photo Feed は、WordPressとInstagramを接続して、サイトの好きな場所にフィードを表示させることができるプラグインです。
設定はとても簡単で、フィード設定はすべてプラグイン任せでOK、埋め込みコードをコピペするだけで設置可能です。
APIの埋め込みがうまくいかない場合は、プラグインを使うのも手です。
Instagram埋め込みプラグイン Smash Balloon Social Photo Feedの使い方 Instagram埋め込みプラグイン
