Home Made Garbage

WordPress に Instagram API を使って タグのギャラリー表示

ホーム
電子工作
Raspberry Pi
WordPress
IOT

先日書いたフクロウカフェの記事で、「インスタグラムのタグを拾ってギャラリー表示したい!」と試みたところめちゃくちゃ苦労したので、残しておきます。

まずはAPIの取得

登録方法などは色々なサイト様で解説して下さっているのでここではざっくり記載します。

Instagram Developer Documentation にアクセスして、「Regist Your Application」。

下記を入力します。

  • Application Name;適当に
  • Description:適当に
  • Website URL:使用するサイトのURL
  • Valid redirect URIs :私は上記と同じURLにしました
  • Disable implicit OAuth;チェックを外す

登録すると、「CLIENT ID」などが出てきます。

この「CLIENT ID」を使ってアクセストークンの取得をします。

アクセストークンの取得

此処でハマりました。

下記ではタグ取得ができない

色々なサイトに上記のパターンで書いてあったのですが、これだとタグの取得が出来ないんです。(ユーザーの取得はできます。)「 400 error scope=public_content」云々ってエラーが出ます。

APIにアクセスすると、

エラー内容は確かこんな感じでした。

「&scope=public_content」を追加する

謎過ぎてエラーメッセージコピペで検索して辿り着きました。アクセストークン取得時に「&scope=public_content」を追加する必要があるようです。

Can’t get Instagram app work with the new API policy and restrictions 

(英語が読めないから色々体当たり・・・)

再度アクセストークン取得

 

APIにアクセスして確認

Instagram Developer Documentation を参考に適宜変更して、ブラウザのURLにアクセスして、なんか取れてるのを確認します。

例えばこれだと、

こんな風に表示されます。

 

WordPressにGallery表示

ここも色々はまって・・・・例えば「 instafeed.js 」もタグ取得だけが何故か上手くいかず、他ももいくつか試してみてだめだったのでこちらを参考にさせて頂きました。

ほぼこちらのサイト様の通りにさせて頂いたので、詳細の説明は割愛致します。

php

のところを、タグ取得用に修正しました。

※ 2016.10.01追記:タグを直書きだと汎用性が無い…ので、HTML側で指定するように改造しました。

WordPress に Instagram API を使って タグのギャラリー表示②

jQuery

そしてjQueryでもハマったのが・・・・・

WordPress の jQuery は、「$」が使えない!

下記で囲った中に上記の jQuery を 書いた所うまくいきました。

参考にさせて頂きました。

WordPress で jQuery を使う時の注意点

因みに私の環境では、functions.php に記述しなくても jQuery が使えたので、此処は記載していません。

css

スタイルシートに適当にこんな感じで追加しました。もうちょっと調整してもよいかもとは思っています。

表示!

これでやっと表示ができましたー。

instagram-tags-Gallery

こちら のページに表示してあります。Instagramに「フクロウカフェ」タグが追加される度にこのページも自動的に更新されていきます。

コメントを残す

メールアドレスが公開されることはありません。コメントのみでもOKです。

TOP