インスタグラムの投稿をPHPで表示する方法

インスタグラムの投稿をPHPで取得し、取得した投稿をタイル状で表示する方法を紹介します。
使うコードは HTML、PHP、CSS の3つです。
また、投稿を取得するため、PHPのコードからインスタグラム（Facebook）が用意してくれているGraph APIにつなぎます。

完成イメージ
HTML
PHP
CSS
最後に & 関連書籍

完成イメージ

投稿を取得するインスタグラムのアカウントですが、わざわざアカウントを作るのも手間なので、私のプライベートアカウントを使いました。
そのため、画像の内容が分からないように加工しています。
webサイトに表示すると、以下のようにタイル状になります。

HTML

まずはHTML側のコードです。
インスタグラムの投稿を表示したいところで、以下のように記載してください。
PHPのコードが入っていますので、ファイル名は「index.php」のように最後を.phpとしてください。

<?php
require './php/instaApi.php';
$instagram = new Instagram();
if( $instaPosts = $instagram->getPost() ): ?>
    <ul class="insta-container">
        <?php foreach ( $instaPosts as $post ): ?>
            <li>
                <a href="<?php echo $post['link']; ?>"><img class="insta-photo" src="<?php echo $post['img']; ?>" alt="instagramの画像"></a>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

PHP

次は投稿を取得するPHPのコードを書いていきます。

まず、HTMLファイルと同じフォルダ内に「php」という名前のフォルダを作成します。
次に、作成した「php」フォルダに「instaApi.php」というファイルを作成しましょう。

この「instaApi.php」の中身は以下のコードになります。

<?php
class Instagram
{
    protected $instaMediaLimit;
    protected $instaBusinessAccount;
    protected $instaAccessToken;
    protected $baseUrl;
    
    public function __construct()
    {
        $this->version              = 'v10.0';
        $this->instaMediaLimit      = 36;
        $this->instaBusinessAccount = '自分のインスタグラムビジネスアカウントのID';
        $this->instaAccessToken     = '自分のtoken';
        $this->baseUrl = 'https://graph.facebook.com/'
                            . $this->version .'/'
                            . $this->instaBusinessAccount
                            . '?fields=name%2Cmedia.limit('. $this->instaMediaLimit .')'
                            . '%7Bcaption%2Cmedia_url%2Cthumbnail_url%2Cpermalink%2Ctimestamp%7D'
                            . '&access_token=' . $this->instaAccessToken;
    }
    
    protected function curl_get_contents( $url ){
        $ch = curl_init();
        curl_setopt( $ch, CURLOPT_URL, $url );
        curl_setopt( $ch, CURLOPT_HEADER, false );
        curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
        curl_setopt( $ch, CURLOPT_TIMEOUT, 5 );
        curl_setopt( $ch, CURLOPT_FAILONERROR, true );
        $result = curl_exec( $ch );
        curl_close( $ch );
        return $result;
    }

    public function getPost(): ?array
    {
        $rawJson = $this->curl_get_contents("$this->baseUrl");
        $json = mb_convert_encoding($rawJson, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
        $obj = json_decode($json, true);
        $insta = [];
        if( isset( $obj['media']['data'] ) ){
            foreach ($obj['media']['data'] as $mediaData => $info) {
                $data = [
                    'img' => !empty($info['thumbnail_url']) ? $info['thumbnail_url'] : $info['media_url'],
                    'caption' => $info['caption'],
                    'link' => $info['permalink'],
                ];
                $insta[] = $data;
            }            
            return $insta;
        }
        return null;
    }
}

コンストラクタ（function __construct()）の中で、冒頭で説明したGraph APIに接続するために必要となる情報を記載します。

必要な情報は次の2つです。

instaBusinessAccount：
自分のインスタグラムビジネスアカウントのID
（現在は17桁の数字）
instaAccessToken：
インスタグラムのアクセストークン
（Graph APIの利用申請時にもらえる文字列）

今回の記事ではGraph APIの利用方法は割愛しますが、利用方法が分からないとの声が多ければ、また別の記事にでも書こうと思います。

instaMediaLimitは取得する投稿の数になります。
今回のコードでは、36枚の投稿を取得しています。

CSS

最後にCSSです。
取得したインスタグラムの投稿をタイル状に成型します。

.insta-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
  align-self: center;
}
.insta-container li{
  margin: 0;
  padding: 0;
  width: 33.33%;
  height: 33.33%;
  background-color: #FCEAFD;
}
.insta-container li a{
  position:relative;
  display: flex;
  width: auto;
  height: 333px;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
}
.insta-photo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: cover no-repeat;
}