はてなブログに自分のInstagramのフィードを入れる方法

こんにちは。今日は、はてなブログのサイドバーにInstagramの写真を載せる方法を試してみたので紹介します。

使用スクリプト

instafeed.jsというスクリプトを使って表示します。

いつものデザイン＞フッターあたりに以下のコードをコピペしてください。

ユーザーIDとアクセストークンは後ほど取得したあと差し替えます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="//ecchie.github.io/instafeed/js/instafeed.min.js"></script>
<script>
var userFeed = new Instafeed({
get: 'user', //ユーザー名から取得します
userId: 自分のユーザーID, //ユーザーIDを指定
accessToken: 'XXXXXXXXXXXXXXXXX', //アクセストークンを指定
limit: 10, //取得投稿の上限を設定
sortBy: "random", //ランダムで並び替え
template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"></a></li>',
after: function() {
$('#scroller ul').simplyScroll(); //Instafeed実行後、simplyScrollを実行して横スクロールさせる
},
});
userFeed.run();
</script>

アクセストークンの取得

Instagram Developer (Instagram Developer Documentation)へアクセスして下図の赤枠「Register Your Application」をクリックします。

赤枠の「Register a New Client」をクリックして進めます。

項目を登録して赤枠の「Register」をクリックします。

• Application Name - お好きな名前

• Description - 説明

• Company Name - 会社名（個人なのでPrivateとしました）

• Website URL - ウェブアプリを作る訳ではないので適当でOK（一応ブログのURLに）

• Valid redirect URIs - アクセストークン取得時のリダイレクトURL（上と一緒でOK）

• PrivacyPolicy URL - 空白

• Contact Email - 念のため連絡のつくEメール

登録が完了するとCLIENT ID、CLIENT SECRETなどが表示されます。これは後ほど使うので控えておいてください。

次に以下のURLのCLIENT IDとREDIRECT URIを置き換えてブラウザからアクセスします。

https://instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=token

問題がなければaccess_token=がついたURLにリダイレクトされます。このときに付与されているaccess_token=の後にあるXXXXXXXXXがアクセストークンです

https://www.weblog-life.net/#access_token=XXXXXXXXX

※もしもエラーが出たりした場合はManage ClientのEdit→SecurityにあるDisable implicit OAuthのチェックを外してみてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="//ecchie.github.io/instafeed/js/instafeed.min.js"></script>
<script>
var userFeed = new Instafeed({
get: 'user', //ユーザー名から取得します
userId: 自分のユーザーID, //ユーザーIDを指定
accessToken: 'XXXXXXXXXXXXXXXXX', //アクセストークンを指定
limit: 10, //取得投稿の上限を設定
sortBy: "random", //ランダムで並び替え
template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"></a></li>',
after: function() {
$('#scroller ul').simplyScroll(); //Instafeed実行後、simplyScrollを実行して横スクロールさせる
},
});
userFeed.run();
</script>

<div id="scroller">
<ul id="instafeed" class="clearfix"></ul>
</div>