こちらのサイトで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でも叩こうかな。
