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

スポンサードリンク

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

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

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

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

f:id:shiromatakumi:20170718201908j:plain

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

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

注意点

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

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

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

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

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

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

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

 

スポンサードリンク

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>

以上です!

 

スポンサードリンク

 

他にもこんな記事書いてます。

必見!はてなブログのカスタマイズを一気に紹介する - NO TITLE

カスタマイズが超簡単なデザインテーマ「SOHO」を公開しました - NO TITLE

YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - NO TITLE