WordPressにインスタグラムの画像を表示
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の管理画面で記事一覧にアイキャッチ画像を表示
WordPressの管理画面で記事一覧にアイキャッチ画像を表示させる方法のメモ。 ...
-
-
WordPressで記事毎に設定した広告を表示させる方法
WordPressでGoogleアドセンスのようなクリック広告ではなく、商品を指 ...
-
-
WordPressと別プログラム間でSESSIONが引き継げない
同一サーバ内に自作したプログラムとWordPressを設置しており両者でセッショ ...
-
-
WordPressで自作テーマにウィジェット対応
WordPressで自作したテーマでウィジェットを登録しようとしたところダッシュ ...
-
-
WordPressのWP-Mail-SMTPプラグインが動かない
PHPのバージョンを下げてからWordPressで外部メールサーバが使えるWP- ...
-
-
FeedWordPressでアイキャッチ画像も設定する方法
FeedWordPressで更新記事を取得しつつ、アイキャッチ画像も自動で設定し ...
-
-
WordPressのカテゴリーベースに関して
WordPressのパーマリンク設定でカテゴリベースを設定したかった。ここは変更 ...
-
-
WordPressでユーザー毎にフラグを持たせる
WordPressでユーザー毎に何らかのフラグを持たせて、フラグによって分岐処理 ...
-
-
WordPressで任意のクエリをページ内で出力する方法
WordPressの固定ページ内でuidという任意のGETクエリを取得して、記事 ...
-
-
WordPressでNo URL was~というエラー
WordPressでmp4ファイルをアップロードして記事に埋め込んだものの、記事 ...
- PREV
- WordPressのカテゴリーベースに関して
- NEXT
- CodeIgniterのバージョンの調べ方