はてなブログにInstagramのタイムラインを埋め込むカスタマイズ

投稿日：2017-07-18 更新日：2018-11-13

今回は、はてなブログのにインスタグラムを表示させるカスタマイズです。

SnapWidget（スナップウィジェット）っていう簡単にタイムラインを埋め込めるサービスもあるのですが、クリックするとSnapWidgetに飛んでしまい、Instagramに直接行かないのが難点。

ということで、InstagramのAPIを使って埋め込み用のJavaScriptコードを自作しました。

サンプル画像ですが、こんな感じに並びます。

ライブラリはなしで生のJavaScriptで作りました。

ただし、自力での取得には2つの制限があります。

注意点

1時間あたり500件まで
画像の表示は最新20件まで

まあ、大した問題ではないね。

アクセストークンを取得する

まずは、アクセストークンっていうのをゲットします。

これが面倒ですが、頑張ってください。

アクセストークンの取得はこの記事が分かりやすいです。

Instagram APIを使ってWEBサイトに写真を表示させてみよう｜株式会社カポタスト

アクセストークンを取得できたら、次に進みます。

HTML,CSS,JavaScript

まずは、HTML。PCならサイドバーあたりに設置するのがおすすめ。スマホはフッターあたりでしょうか。

<!-- Instagramタイムライン -->
<div class="instagram-timeline">
<div class="instagram-profile" id="js-insta-profile">
</div>
<ul id="js-instagram">
</ul>
</div>
<!-- Instagramタイムラインここまで -->

お次はCSS。

/* インスタグラム */
.instagram-timeline {
padding-top: 12px;
height: 340px;
overflow: hidden;
overflow-y: auto;
}
.instagram-timeline ul {
list-style: none;
padding: 0;
margin: 0;
}
.instagram-timeline ul:after,
.instagram-timeline ul:before {
display: block;
content: "";
clear: both;
}
.instagram-timeline ul li {
display: block;
width: 33.3%;
margin: 0;
padding: 0;
float: left;
}
.instagram-profile {
margin-bottom: 16px;
}
.instagram-profile a {
display: inline-block;
vertical-align: middle;
}
.instagram-profile img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 4px;
vertical-align: bottom;
}

スマホの場合は、<style> ～ </style>　でCSSを囲って、ヘッダーあたりにコピペして下さい。

<style>
この中にCSSのコード
</style>

んで、JavaScript。

アクセストークンなんですが、JavaScriptなので丸見えです。はてなブログだとPHPとか使えないのでしょうがない。

SandBoxモードなので、利用に制限が掛かっているので悪用はできないと思いますが、一応自己責任でお願いします。

「アカウント名」と「アクセストークン」の所を書き換えて下さい。これをフッターにコピペします。

PCとスマホで埋め込む場合、両方にコピペするのを忘れずに。

<script>
// Instagramのタイムランを埋め込むJS
function getJsonInsta(json){
  var instTimeline = document.getElementById('js-instagram');
  var profArea = document.getElementById('js-insta-profile');
  var username = 'アカウント名';
  var profile = json.data[0].user;
  var url = 'https://www.instagram.com/'+profile.username+'/';
  var profData = html = '';
  profData += "<a href='"+url+"' target='_blank'><img src='"+profile.profile_picture+"' alt=''></a>"
  profData += "<a href='"+url+"' target='_blank'>@"+profile.username+"</a>";
  for(var i=0;i<json.data.length;i++) {
    var item = json.data[i];
    var imgurl = item.images.low_resolution.url; //画像のURLを取得
    var link = item.link; //リンクを取得
    html += "<li><a href='" + link + "' target='_blank'><img src='" + imgurl + "'></a></li>";
  }
  profArea.innerHTML = profData;
  instTimeline.innerHTML = html;
} 
(function(){  
  var accessToken = 'アクセストークン';
  var script = document.createElement('script');
  script.src = 'https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=getJsonInsta';
  document.body.appendChild(script);
}());
</script>