BLOG

ブログ

不まじめなことも書いています。

Instagram API経由で取得した画像の読み込みが遅い場合の改善?対策方法

2019.05.06

これを書いたのは下っ端です。

WordPressやXOOPSなど更新システム(CMS)を入れない場合、お知らせをホームページ内に載せるたFacebookやTwitter、InstagramなどのSNSを利用することはありますよね。
SNSを使う場合のメリットは多々ありますが、デメリットの1つとして挙げられるのが、仕様の変更等でホームページに正常な表示が出来なくなることだと思います。

Instagram APIを使ったサイトで、その問題があることが分かりました。
全てのサイトではないものの、Instagram API経由で画像を取得した場合ページの読み込み自体遅くなるサイトがあるようです。
以下は、「Instagram API」で取得した画像の読み込みが遅い場合の対策方法です。
※2020年の初めまで「Instagram API」は使用できなくなるので、「Instagram Graph API」への切り替えをお勧めします。

ページ内に画像を取得、表示させる記述をすると読み込み自体を遅くしてしまう為、
Instagram API経由で画像を取得する記述を後で読み込む様にしましょう。

<script>
$(function(){
	$("#hogehoge").load("./instagram.php");
})
</script>

instagram.php は、Instagram API経由で画像を取得する記述を行ったファイルです。
#hogehoge は、instagram.php を読み込むブロックです。

instagram.phpのサンプル、一例は以下です。

<?php $instagramApiURI    = 'https://api.instagram.com/v1/users/ユーザID/media/recent?access_token=アクセストークン&count=表示させる件数';
    $instagramDates = json_decode(file_get_contents($instagramApiURI));
    foreach((array) $instagramDates->data as $instagramData):
?>
<div class="item"><a href="<?php echo $instagramData->link; ?>"><img src="<?php echo $instagramData->images->standard_resolution->url; ?>"></a></div>
<?php endforeach; ?>

以上になります。
ページの表示スピードは大幅に改善されるので、閲覧者のストレスは軽減されるはずです。
ただ、「Instagram API」は2020年の初めまでは使用できなくなるので、「Instagram Graph API」への切り替えをお勧めします。

ちょっとしたご相談事などでもお気軽にお問い合わせください。

BLOGを見る