勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

WordPressにインスタグラムの画像を表示させる方法

   2024/01/13  WordPress CMS

WordPressにインスタグラムへ投稿している画像を表示させたかった。プラグインの「Instagram Feed」ではHTMLタグ構成をカスタマイズできないっぽいので、プラグインは使わない方向で対応したい。以下に方法をメモ。

 

アクセストークンとユーザIDを取得

「Instagram Feed」で設定時にどちらも取得できる。念のため、普通の取り方もメモ。

以下のページに遷移してRegisterなんちゃらのところから登録を行う。

https://www.instagram.com/developer/

そうするとクライアントIDが発行される。また、登録した後にSecurityタブを開いて「Valid redirect URIs」の部分にリダイレクト先のURLが登録されているか確認。登録されていない場合は適当に自サイトのURLを登録する。

あまりよく分かってないけど「Disable implicit OAuth」のチェックは外しておくのが良いらしい。

クライアントIDとリダイレクトURLが用意できたら以下URLを書き換えてブラウザから開く。

https://www.instagram.com/oauth/authorize/?client_id=[クライアントID]&redirect_uri=[Valid redirect URIs]&response_type=token

そうすると認証っぽいページが開くのでOK的な選択肢を選ぶと、リダイレクトURLに遷移する。その際にURLのクエリとしてアクセストークンが発行される。

ユーザIDに関しては以下ページでユーザ名を入力すると表示される。

https://smashballoon.com/instagram-feed/find-instagram-user-id/

 

画像の表示方法

<?php
$insta_json = file_get_contents('https://api.instagram.com/v1/users/[ユーザID]/media/recent?access_token=[アクセストークン]'); //APIを叩いてjsonデータ取得
$insta_data = json_decode($insta_json, true); //jsonデータを連想配列に
$insta_file = dirname(__FILE__) . '/' . 'insta_file.log'; //キャッシュ用ファイル
if( $insta_data ){
    file_put_contents($insta_file, serialize($insta_data)); //キャッシュ用ファイル上書き
}else{
    $insta_data = unserialize(file_get_contents($insta_file)); //キャッシュ用ファイル読み込み
}
foreach( $insta_data['data'] as $val ){
?>
    <a href="<?php echo $val['link'];?>" target="_blank">
        <img src="<?php echo $val['images']['thumbnail']['url'];?>">
    </a>
<?php } ?>

キャッシュ用ファイル部分に関してはAPIの使用制限(1時間あたり500回まで)対策になる。制限にひっかかったり、インスタグラム側で何かあって通信ができない場合はキャッシュファイルから読み込んで表示させる。

 - WordPress CMS

  関連記事

WordPressで画像にカテゴリを設定し、記事投稿の際の画像選択時に指定したカテゴリの画像のみ表示させる方法

WordPressのメディアライブラリに画像を沢山登録していると、記事投稿の際の ...

WordPressの5系から搭載されたブロックエディタ(Gutenberg)を元に戻す方法

WordPressを5系にアップデートしたところ記事投稿ページのエディタが大幅に ...

WordPressのウィジェットをTOPのみ等、特定のページだけ表示する方法

■やりたかった事 TOPページのみ任意のウィジェットを表示させ、記事ページやアー ...

WordPressで自動でmetaタグのkeywordsとdescriptionを表示

metaタグのkeywordsとdescriptionにて、基本的にはAll i ...

WordPressでデータベース接続確立エラー発生時の対応方法

WordPressで「データベース接続確立エラー」というエラー表示がされた。大抵 ...