shoyan/instagram-basic-display-api-sample.php

## instagram-basic-display-api-sample.php
<?php
// インスタグラムのAPI情報
define('TOKEN', 'YOUR_ACCESS_TOKEN');
define('MEDIA_URL', 'https://graph.instagram.com/me/media?fields=id,caption,permalink,media_type,media_url,username&access_token=%s');
// 取得する件数
define('LENGTH', 10);

// インスタグラムからデータを取得
$response = json_decode(file_get_contents(sprintf(MEDIA_URL, TOKEN)), true);
// 表示する件数に切り取る
$imageList = array_slice($response['data'], 0, LENGTH);

?>
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Instagram Display API Sample</title>
  <style>
    img {
      width: 200px;
    }

    li {
      list-style: none;
      margin: 10px;
      max-width: 200px;
    }

    #instagram-feed {
      display: flex;
      flex-wrap: wrap;
    }

    a {
      text-decoration: none;
      color: #333;
      font-size: 14px;
    }

    .user-profile {
      display: flex;
    }
    .user-image img {
      width: 25px;
      border-radius: 50%;
      border: 1px solid #ddd;
      margin: 0 10px;
    }
    .user-username {
      font-size: 14px;
      font-weight: 600;
    }
  </style>
</head>

<body>
<h1>Instagram Display API Sample</h1>
  <ul id="instagram-feed">
    <?php foreach ($imageList as $media) : ?>
      <li>
        <a href="<?php echo $media['permalink'] ?>" target="_blank">
          <img src="<?php echo $media['media_url'] ?>" alt="">
          <div class="user-profile">
            <p class="user-username"><?php echo $media['username'] ?></p>
          </div>
          <p class="user-caption"><?php echo $media['caption'] ?></p>
        </a>
      </li>
    <?php endforeach ?>
  </ul>

</body>

</html>
	<?php
	// インスタグラムのAPI情報
	define('TOKEN', 'YOUR_ACCESS_TOKEN');
	define('MEDIA_URL', 'https://graph.instagram.com/me/media?fields=id,caption,permalink,media_type,media_url,username&access_token=%s');
	// 取得する件数
	define('LENGTH', 10);

	// インスタグラムからデータを取得
	$response = json_decode(file_get_contents(sprintf(MEDIA_URL, TOKEN)), true);
	// 表示する件数に切り取る
	$imageList = array_slice($response['data'], 0, LENGTH);

	?>
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Instagram Display API Sample</title>
	<style>
	img {
	width: 200px;
	}

	li {
	list-style: none;
	margin: 10px;
	max-width: 200px;
	}

	#instagram-feed {
	display: flex;
	flex-wrap: wrap;
	}

	a {
	text-decoration: none;
	color: #333;
	font-size: 14px;
	}

	.user-profile {
	display: flex;
	}
	.user-image img {
	width: 25px;
	border-radius: 50%;
	border: 1px solid #ddd;
	margin: 0 10px;
	}
	.user-username {
	font-size: 14px;
	font-weight: 600;
	}
	</style>
	</head>

	<body>
	<h1>Instagram Display API Sample</h1>
	<ul id="instagram-feed">
	<?php foreach ($imageList as $media) : ?>
	<li>
	<a href="<?php echo $media['permalink'] ?>" target="_blank">
	<img src="<?php echo $media['media_url'] ?>" alt="">
	<div class="user-profile">
	<p class="user-username"><?php echo $media['username'] ?></p>
	</div>
	<p class="user-caption"><?php echo $media['caption'] ?></p>
	</a>
	</li>
	<?php endforeach ?>
	</ul>

	</body>

	</html>