ウェブと食べ物と趣味のこと

読者です 読者をやめる 読者になる 読者になる

ウェブと食べ物と趣味のこと

格安SIMのこと、windows10、迷惑メールネタ、写真ネタなど。困った方の参考になる記事を心掛けます。

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

はてな プログラミング

スポンサードリンク

f:id:photoblg:20160316001820j:plain

こんにちは。今日は、はてなブログのサイドバーに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>

アクセストークンの取得

f:id:photoblg:20160315232429j:plain

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


f:id:photoblg:20160315232712j:plain

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


f:id:photoblg:20160315233437j:plain

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

  • Application Name - お好きな名前
  • Description - 説明
  • Company Name - 会社名(個人なのでPrivateとしました)
  • Website URL - ウェブアプリを作る訳ではないので適当でOK(一応ブログのURLに)
  • Valid redirect URIs - アクセストークン取得時のリダイレクトURL(上と一緒でOK)
  • PrivacyPolicy URL - 空白
  • Contact Email - 念のため連絡のつくEメール

f:id:photoblg:20160315233609j:plain

登録が完了すると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がアクセストークンです

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


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

f:id:photoblg:20160316000059j:plain

ユーザーIDの取得

次に自分のユーザーIDを調べます。ユーザーIDをサクっと調べる方法がわからなかったのでソースから見ていきます。

https://www.instagram.com/ユーザー名/にアクセスしてソースコードを見ます。

"owner":{"id":"で検索して"id":"のあとの数字がユーザーIDですXXXXXXXX

f:id:photoblg:20160315235108j:plain

タグの反映

デザイン>フッターに追加したコードのユーザー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>

これで下準備は終わりです。あとはフィードを表示させたい部分に以下のタグを入れます。

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

サイドバーに入れてみたらこのような感じで表示されました。

f:id:photoblg:20160316000808j:plain

最後に

かなり久々にInstagramのAPIを叩いてみました。アクセストークンの取得工程がちょっと面倒なので初めての方は手こずるかもしれないですね。。
スクリプトはgithubに設置しましたのでそのまま使っていただいてOKです。

スポンサードリンク