今回は、はてなブログのにインスタグラムを表示させるカスタマイズです。
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>
以上です!
他にもこんな記事書いてます。
必見!はてなブログのカスタマイズを一気に紹介する – SHIROMAG