Instagram Graph APIをWordPressで使う

【2020/1/16追記】==============

$graph_api      = 'https://graph.facebook.com/v5.0/';

この部分のv5.0は、設定時の最新バージョンに合わせます。

参照：グラフAPI

【2019/8/7追記】==============

インスタに投稿されたのが動画の場合、サムネイルを表示できるよう修正しました。

$fieldsで取得できる値にmedia_typeを追加。

表示部分で画像のURLを取得するところを、メディアタイプによって条件分岐させるよう修正。

（修正前）

<img src="<?php echo $post->media_url; ?>" alt="<?php echo $caption; ?>">

（修正後）

<img src="<?php if($post->media_type=='VIDEO'){ echo $post->thumbnail_url; }else{ echo $post->media_url; } ?>" alt="<?php echo $caption; ?>">

参考：IGメディア – Instagramプラットフォーム – ドキュメンテーション – 開発者向けFacebook

==============【追記おわり】
　

インスタグラムのタイムラインをWordPressサイトに表示させたいという案件。

2020年にこれまでの「Instagram API」は使えなくなるので代わりに「Instagram Graph API」を使いましょうとのことなので、このタイミングで後者を採用することに。

「Instagram Graph API」を使うには、まず下記２つを用意します。

無期限のページアクセストークン
Instagram ビジネスアカウントの ID

取得の仕方はいろんなサイトで紹介されているので割愛。
今回特に参考にさせていただいたこちらのページにも詳しくあります。

参考：「Instagram API」が廃止に！代替の「Instagram Graph API」に移行しよう！ | Analog Studio

私はクライアントさんに取得してもらったコードをいただけましたが、実はここまでが大変かもですね。。

さて今回はその後の、実際にタイムラインを表示させるところです。

タイムラインの表示の仕方は、単に画像をタイル状に並べるというものです。

1. インスタグラム取得用のパーツファイル「instagram.php」を作成する

通常のテンプレートに直書きでもいいですが、今後使い回しができそうなのでパーツ化してみました。ファイル名は一例です。

そのファイルを下記のように。

【instagram.php】

<?php
/*     初期設定     */
$max_posts      = 6; // 投稿の最大取得数
$graph_api      = 'https://graph.facebook.com/v5.0/'; // v5.0は最新バージョンに置き換え
$ig_buisiness   = 'ビジネスアカウントID'; // ビジネスID
$fields         = 'name,username,profile_picture_url,media_count,followers_count,follows_count,media.limit('. $max_posts. '){caption,like_count,media_type,media_url,permalink,timestamp,thumbnail_url}';
$access_token   = 'アクセストークン'; // 無期限のページアクセストークン
$cache_lifetime = 3600; // キャッシュ時間の設定 (最短更新間隔 [sec])
$show_mode      = 'grid'; // 表示形式 (グリッド表示は 'grid'、一覧表示は 'list')


/*     取得処理     */
if(!file_exists(dirname(__FILE__). '/cache/')){
    if(mkdir(dirname(__FILE__). '/cache/', 0774)){
        chmod(dirname(__FILE__). '/cache/', 0774);
    }
}
$cache_lastmodified = @filemtime(dirname(__FILE__). '/cache/instagram_graph_api.dat');
if(!$cache_lastmodified){
    $ig_json = @file_get_contents($graph_api. $ig_buisiness. '?fields='. $fields. '&access_token='. $access_token);
    file_put_contents(dirname(__FILE__). '/cache/instagram_graph_api.dat', $ig_json, LOCK_EX);
} else{
    if(time() - $cache_lastmodified > $cache_lifetime){
        $ig_json = @file_get_contents($graph_api. $ig_buisiness. '?fields='. $fields. '&access_token='. $access_token);
        file_put_contents(dirname(__FILE__). '/cache/instagram_graph_api.dat', $ig_json, LOCK_EX);
    } else{
        $ig_json = @file_get_contents(dirname(__FILE__). '/cache/instagram_graph_api.dat');
    }
}
// 取得したJSON形式データを配列に展開する
if($ig_json){
    $ig_data = json_decode($ig_json);
    if(isset($ig_data->error)){
        $ig_data = null;
    }
}
// データ取得に失敗した場合
if(!$ig_json || !$ig_data){
    header('HTTP', true, 500);
    exit;
}
?>


/*     表示部分     */
<ul class="insta-img-list">
<?php
  if(is_array($ig_data->media->data)){
    foreach($ig_data->media->data as $post){
      $caption = $post->caption;
      $caption = mb_convert_encoding($caption, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
      $pattern=array('/\n/','/</','/>/',);
      $caption = preg_replace($pattern, '', $caption);
?>
<li class="item">
  <a href="<?php echo $post->permalink; ?>" class="instagram" target="_blank" rel="noopener" title="likes:<?php echo $post->like_count; ?>">
    <img src="<?php if($post->media_type=='VIDEO'){ echo $post->thumbnail_url; }else{ echo $post->media_url; } ?>" alt="<?php echo $caption; ?>">
  </a>
</li>
<?php
        }
    }
?>
</ul>

こちらは先ほど紹介したページにあったソースを元に、表示部分を改変したものです。

「初期設定」のところの下記3点、

$max_posts = 6;
$ig_buisiness = ‘ビジネスアカウントID’;
$access_token = ‘アクセストークン’;

ここを自分の環境に合わせて変えます。’ ‘（クオート）はそのまま！

$fieldsで何やら色々引っ張ってきているようなので不要なものもありそうですが、取り敢えずそのまま使います。

「取得処理」のところは、キャッシュを確認したり取得・保存したりといったことをしているようです（詳しい解説は参考ページに^^;）。

そして「表示部分」の<li>〜</li>のところが画像１枚分で、取得数分ループされるようになっています。

2. パーツファイル「instagram.php」をテンプレートファイルで読み込む

上記ファイルが用意できたら、WordPressテンプレートファイル（front-page.phpとかsidebar.phpとか）のインスタを表示させたい箇所に、パーツファイルを読み込む記述をします。

【front-page.phpとかhome.phpとかsidebar.phpとか】

〜
<h2>Instagram</h2>
<div class="instagram-wrap">
  <?php get_template_part( 'instagram' ); ?>
</div>
〜

get_template_part( 'instagram' );でinstagram.phpを読み込んでいます。

3. CSSで整える

あとはCSSで表示を好きなようにできます。

今回はPCで3×2、スマホで2×3の表示にしたので下記のような感じになりました。

【style.css】

.instagram-wrap {
    max-width: 900px;
    width: 90%;
    margin: 0 auto;
}
.insta-img-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.insta-img-list .item {
  width: 200px;
  margin: 15px;
}

@media only screen and ( max-width: 960px ) {
  .insta-img-list .item {
    width: 42%;
    margin: 3vw;
  }
}

こんな感じでいけたんじゃないでしょうか！

確認してみて、もし$max_postsを変更したのに数が合わないな…ということがあれば、初期設定の
$cache_lifetime = 3600;
の部分、いったん数値を30とかにしてみてください。

（短いままにしておくとあまり良くなさそうなので、私は確認できた後に3600に戻しました。）

まとめ

表示させる作業自体は特に難しくないですが、タイムラインを表示させるのにインスタもFacebookもビジネスアカウントを持たないといけないっていうのがどうも面倒な気持ちになりますね。

こういう案件に今後も当たるのかしら、あんまりなさそうな。

Instagram Graph APIをWordPressで使う

1. インスタグラム取得用のパーツファイル「instagram.php」を作成する

2. パーツファイル「instagram.php」をテンプレートファイルで読み込む

3. CSSで整える

まとめ

コメントを残すコメントをキャンセル

よく読まれている記事

タグリスト

Instagram Graph APIをWordPressで使う

1. インスタグラム取得用のパーツファイル「instagram.php」を作成する

2. パーツファイル「instagram.php」をテンプレートファイルで読み込む

3. CSSで整える

まとめ

コメントを残す コメントをキャンセル

よく読まれている記事

タグリスト

コメントを残すコメントをキャンセル