やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

instagramのフィードを表示させたい

JSONデータをPHPでごにょごにょして....

というのを自作するのは骨が折れるので、

プラグインを使うことに。

下準備

↓を参考に、Instagramの開発者ページからアプリケーション登録を行っておく。
teamnaporitan.com

instafeed.js

instafeedjs.com

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


こういう見た目にしたかったので、
f:id:ajicolor:20171121191142p:plain
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;
}