勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

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/

 

画像の表示方法

 

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

 - WordPress

  関連記事

images
WordPressでプラグインの作成方法

WordPressで簡単なニュースを表示させるというプラグインを作成したので、使 ...

images
WordPressを4.8.2にして不具合

WordPressを4.8.2にすると記事の新規追加時にウィジウィグの挙動がおか ...

images
WordPressで固定ページに記事一覧を表示させるプラグイン

WordPressで固定ページ編集時にショートコードを書くことで、記事一覧を表示 ...

images
contact form7で送信数を測定

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

images
WordPressを停止しないままサーバ移設する方法

WordPressを設置しているサーバのリソースがそろそろ危ういので移設を検討す ...

images
WordPressで自作テーマにウィジェット対応

WordPressで自作したテーマでウィジェットを登録しようとしたところダッシュ ...

images
PHP5.1系にWordPressを入れる方法

無料レンタルサーバーにWordPressを突っ込むと、 「 サーバーの PHP ...

images
WordPressで「データベース接続確立のエラー」

WordPressで設定ファイル(wp-config.php)は触っていないのに ...

images
WordPressのサーバー移行で気付いた点

あるWordPressを置いているサーバーのリソースが苦しくなってきたので、新た ...

images
Advanced Custom Fieldsで記事取得

WordPressでAdvanced Custom Fieldsにて設定した項目 ...