勉強したことのメモ

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
contact form7で送信時に別サーバへデータ送信

contact form7でフォーム送信時に別サーバーでフォーム内容をPOST送 ...

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

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

images
WordPress記事本文の文字検索と置換方法

WordPressの記事本文内にhogeという文字列が含まれていた場合、hoge ...

images
WordPressでユーザー毎にフラグを持たせる

WordPressでユーザー毎に何らかのフラグを持たせて、フラグによって分岐処理 ...

images
WordPressで閲覧者にテーマを変更させるプラグイン

「新規サイトを○○みたいなイメージでWordPressのテーマを見繕って欲しい」 ...

images
WordPressで任意のクエリをページに出力するプラグイン

先日、「WordPressで任意のクエリをページ内で出力する方法 」という記事で ...

images
contact form7で送信数を測定

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

images
WordPressのメール送信フォームに画像認証を設置する

■やりたかった事 ココで作成したメール送信フォームに画像認証を設置する ■方法 ...

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

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

images
WordPressのxmlrpc.phpへの攻撃

サーバーの死活監視をしているシステムから、1つのサイトが落ちているとアラートがき ...