勉強したことのメモ

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

  関連記事

WP Social Bookmarking LightでSNSボタンが表示されない際の対応方法

WordPressでWordPress WP Social Bookmarkin ...

WordPressのcontact form7で500エラーの対応方法

WordPressプラグインのcontact form7で送信ボタンを押し、ロー ...

WordPressにてAdvanced Custom Fieldsを用いて連載(シリーズ)記事機能を実装する方法

先日「Series」プラグインで連載(シリーズ)記事機能の実装方法をメモしたが、 ...

Advanced Custom Fieldsでセレクトメニューを動的に生成する方法

WordPressでカスタムフィールド設定用のプラグインAdvanced Cus ...

Contact form7で送信数を測定(トラッキングタグ)

contact form7でフォーム送信が完了した時点で計測されるようにトラッキ ...