こちらのサイトでInstagramのAPIを取得できます。非常にわかりやすくまとめてあり、手順通りにやれば大丈夫です。

今はv3.3ではなくv4.0が使用することができるのでそちらを使用しています。

いくつかデザインのサンプルも用意しました。

最後におまけで下からふわっと写真が現れるアニメーションを実装するコードも書いてあります。

インスタグラムAPIでWordPressに投稿の一覧を表示

最初に、先ほどのサイトで、一つだけ間違えている(最新版ではない)部分があったのでそこを修正して下さい。

修正箇所

【3-2、InstagramビジネスアカウントIDを取得】の、me?fields=instagram_business_accountの部分があると思います。

me?fields=instagram_business_accountではなく、{page-id}?fields=instagram_business_accountの形が正しいビジネスアカウント情報の取得のurlです。

公式にも書いてありました。https://developers.facebook.com/docs/instagram-api/reference/page?locale=ja_JP

GET /{page-id}?fields=instagram_business_account

page_idは【2-3、3段階目のアクセストークンを取得する】で取得した、nameの次のidです。

用意するデータ

先ほど紹介したサイトで、以下のデータを用意してください。

• instagram_business_id
• access_token
• user_name

データを取得

<?php
$instagram_business_id = '{instagram_business_id}';
$access_token = '{access_token}';
$target_user = '{user_name}';
$query = 'id,followers_count,media_count,ig_id,media{caption,media_url,media_type,like_count,comments_count,timestamp,id}';
$instagram_api_url = 'https://graph.facebook.com/v4.0/';
$target_url = $instagram_api_url.$instagram_business_id."?fields=".$query."&access_token=".$access_token;
$result = wp_remote_get("$target_url");
$instagram_items = json_decode($result['body'],true);
?>

これだけです。{}に対応するデータを入れてください。

解説

$instagram_business_id

$queryはカンマ区切り(,)で指定します。mediaの中の要素は{}で指定することができます。データ量が大きくなると表示速度が遅くなるので必要最低限のデータだけ取得するようにしましょう。

$target_urlでAPI用のurlを生成しています。

wp_remote_getのレスポンスはbodyの中に入っているのでjson_decodeで配列に直します。

2種類のデザインを紹介します。

デザイン

共通部分です。

<?php
$instagram_business_id = '{instagram_business_id};
$access_token = '{access_token}';
$target_user = '{user_name}';
$query = 'id,followers_count,media_count,ig_id,media{caption,media_url,media_type,like_count,comments_count,timestamp,id}';
$instagram_api_url = 'https://graph.facebook.com/v4.0/';
$target_url = $instagram_api_url.$instagram_business_id."?fields=".$query."&access_token=".$access_token;
$result = wp_remote_get("$target_url");
$instagram_items = json_decode($result['body'],true);
if ($instagram_items) :
?>
//デザインの表示部分
<?php endif; ?>

先ほど紹介したものと同じで、ifで囲った間に、以下に紹介するデザインの共通部分を入れてください。

両方のデザインともレスポンシブ対応しています。

一つ目は、写真同士の幅の余白を狭くしタイル状に並べたレイアウト。

写真を並べるとなると、このレイアウトが結構一般的。Masonayと言われるレイアウトです。hoverしたら文章が出てきます。

表示部分

<div class="masonry">
	<?php foreach ($instagram_items['media']['data'] as $instagram_item_key => $instagram_item) : ?>
			<div class="item">
				<img src="<?php echo $instagram_item['media_url']; ?>">
				<div class="mask">
					<div class="caption"><?php echo $instagram_item['caption']; ?></div>
				</div>
			</div>
	<?php endforeach; ?>
</div>

style.css

.masonry { /* Masonry container */
  column-count: 4;
  column-gap: 2px;
  /* column-gap: 1em; */
}

.item { /* Masonry bricks or child elements */
  background-color: #eee;
  display: inline-block;
  margin: 0 0 2px 0;
  /* margin: 0 0 1em; */
  width: 100%;
	overflow:		hidden;
	position: relative;
}
.item .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;

	text-align: center;
	align-items: center;
	display: flex;
	justify-content: center;
}
.item:hover .mask {
	opacity:		1;
}
.item .caption {
  color: #fff;
	text-overflow: ellipsis;
	padding: 0 12px;
}
/* Masonry on large screens */
@media only screen and (min-width: 1024px) {
  .masonry {
    column-count: 4;
  }
}
/* Masonry on medium-sized screens */
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}
/* Masonry on small screens */
@media only screen and (max-width: 767px) and (min-width: 540px) {
  .masonry {
    column-count: 2;
  }
}
/* Masonry on small screens */
@media only screen and (max-width: 540px){
  .masonry {
    column-count: 1;
  }
}

2つ目はタイル状に並べるのは同じですが、hoverした時のスタイルと、画像のスタイルを変えています。私は結構こちらも好きです。

表示部分

<div id="columns">
	<?php foreach ($instagram_items['media']['data'] as $instagram_item_key => $instagram_item) : ?>
	  <figure>
		  <img src="<?php echo $instagram_item['media_url']; ?>">
			<figcaption><?php echo $instagram_item['caption']; ?></figcaption>
		</figure>
	<?php endforeach; ?>
</div>

style.css

div#columns figure {
	background: #fefefe;
	border: 2px solid #fcfcfc;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	padding: 15px;
	padding-bottom: 10px;
	transition: opacity .4s ease-in-out;
  display: inline-block;
  column-break-inside: avoid;
}

div#columns figure img {
	width: 100%; height: auto;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

div#columns figure figcaption {
  font-size: .9rem;
	color: #444;
  line-height: 1.5;
}

div#columns small {
  font-size: 1rem;
  float: right;
  text-transform: uppercase;
  color: #aaa;
}

div#columns small a {
  color: #666;
  text-decoration: none;
  transition: .4s color;
}

div#columns:hover figure:not(:hover) {
	opacity: 0.4;
}

@media screen and (max-width: 750px) {
  #columns { column-gap: 0px; }
  #columns figure { width: 100%; }
}

おまけ

下からふわっと写真が現れるアニメーション

imgタグにclass=”fadein”を付け加えて下さい。

css

.fadein {
  opacity : 0;
  transition : all 300ms;
  transform: translateY(100px);
}

初期設定でopacityで隠し、y方向に100pxずらしておきます。

script

<script type="text/javascript">
$(function(){
    $(window).scroll(function (){
	        var myFade = $('.fadein');
		for(var i = 0; i < myFade.length; i++){
	        var targetElement = myFade[i].getBoundingClientRect();
	        var scroll = document.documentElement.scrollTop || document.body.scrollTop;
	        var windowHeight = window.innerHeight;
	        if (scroll > scroll + targetElement.top - windowHeight + 200){
	          myFade[i].style.opacity = "1";
	          myFade[i].style.transform = "translateY(0)";
	        }
	      }
    });
});
</script>

fadeinクラスを全て取得し、スクロール位置と取得した要素の高さからアニメーションを実行しています。

これで下からふわっと出てくるアニメーションができます。

これは画像だけでなく、文字や見出しにも使うことができるので汎用性が高いです。

まとめ

Instagram Graph APIは非常に扱いやすいAPIでした。さすがのfacebookです。

API叩くの結構楽しい。次はアリババのAPIでも叩こうかな。