というのを自作するのは骨が折れるので、
プラグインを使うことに。
下準備
↓を参考に、Instagramの開発者ページからアプリケーション登録を行っておく。
teamnaporitan.com
instafeed.js
header部分で、instafeed.min.jsを読み込んでおく。
(jQueryは不要、javascriptのみで動く)
※あいにく動画をブラウザ上で再生する機能はついていないので注意。
javascript
var userFeed = new Instafeed({ get: 'user', userId: 000000000000, //ユーザーID accessToken: '000000000.xxxxxxxxx.xxxxxxxxxxxxxxxx', //アクセストークン target: 'insta-feed', //要素のID limit:1, resolution: 'standard_resolution', template: '<a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"></a><span class="likes">{{likes}}</span><span class="comments">{{comments}}</span><p class="caption">{{caption}}</p>' }); userFeed.run();
ユーザーIDがわかんなくなっちゃったら、
ここですぐに出せる。
smashballoon.com
こういう見た目にしたかったので、
HTMLとCSSは以下のように整えた。
HTML
<div class="instagram"> <img src="img/insta_icon.jpg" class="insta_icon" alt=""><a class="btn-insta" href="https://www.instagram.com/userid/" target="_blank"><span class="username">username</span></a><i class="fa fa-instagram" aria-hidden="true"></i></a> <div id="insta-feed"> </div><!--#insta-feed--> </div><!--.instagram-->
CSS
.instagram{ box-shadow: 0 0 1px 0 rgba(0,0,0,0.3); padding:8px 0; position: relative; height:400px; overflow-y: scroll; } .instagram img.insta_icon{ width:30px; height:30px; border-radius:15px; margin:0 8px 8px; } .instagram span.username{ display: inline-block; padding:4px 0 0; font-size:1.2rem; color:#333; font-weight: 500; vertical-align: top; } .instagram i.fa-instagram{ position: absolute; top:14px; right: 14px; font-size:20px; color:#aaa; } #insta-feed{ font-family: Arial,sans-serif; word-wrap:break-word; } #insta-feed img{ width:100%; height:auto; } #insta-feed .caption{ font-size: 0.8rem; line-height:1.2; } #insta-feed .likes, #insta-feed .comments{ display: inline-block; color:#777; padding:2px 4px 2px 0; } #insta-feed .comments::before{ content:"\f075"; font-family: FontAwesome; padding-right: 3px; } #insta-feed .likes::before{ content:"\f004"; font-family: FontAwesome; padding-right: 3px; }