【プラグインなし】インスタグラムAPIでWordPressに投稿の一覧を表示する。デザインサンプル付 - inokawablog

    【プラグインなし】インスタグラムAPIでWordPressに投稿の一覧を表示する。デザインサンプル付

    こちらのサイトで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したら文章が出てきます。

    instagramのレイアウト1

    表示部分

    <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した時のスタイルと、画像のスタイルを変えています。私は結構こちらも好きです。

    instagramのレイアウト2

    表示部分

    <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でも叩こうかな。