WordPress & instagram API ハッシュタグで画像取得したいだけなのに…結局 Instagram Feed proが解決してくれた

instagram
wordpressの固定ページで、instagram APIを使って、ハッシュタグで画像取得したいだけなんですが、2016年6月にinstagram APIの審査基準が厳しくなったようです。
といっても、このタイミングで画像取得したい熱が沸いてきたので、その前がどれくらい使い放題だったかは分かりませんが。

やりたかったことは

  • WordPressで
  • 自分のinstagram投稿の
  • 特定のハッシュタグを付けた画像だけを取得して
  • 全部表示する

だけなんです。

しかし!新API基準では、sandbox modeとやらで、取得できる画像が最新20件になったようです。これを特定のタグで絞り込んだら、「最新20件の中の特定のタグがついた画像」しか表示されないわけです。せめて、「特定のタグがついた最新20件」ならまだ救いはあったのに。

自分の投稿の特定のハッシュタグを付けた画像を取得する

ひとまず、「自分の投稿の特定のハッシュタグを付けた画像」を取得するのは、PHPで出来ました。(人さまのPHPですが)
↓こちらのPHPそのまんまです(ありがとうございます!)。
https://gist.github.com/YuzuruSano/7ecd2802140b17283b8e
↑このPHPの「アクセストークン」と「ユーザーアカウント」「ハッシュタグ」を書き替えて、htmlとJavascriptで

<div id="sample"></div>

<script>
$(function() {
     $.ajax({
          url: 'PHPのURL',
          dataType: 'json',
          success: function(data) {
               var insert = '<ul>';
               for (var i = 0; i < data.length; i++) {
                         insert += '<li><img src="' + data[i]['url'] + '"></li>';
               };
               insert += '</ul>';
               $('#sample').append(insert);
          }
     });
});
</script>

と記述するだけです。

20メディア以上取得する

しかし、上記PHPでがんばっても、元のAPIはsandbox modeで上限20件までしか許可されていないので、それ以上表示することは出来ません。

このsandbox modeから抜け出して、思う存分APIを使い倒すには、Permissionsから申請(アピール)して厳しい審査を受けなければなりません。

気軽にStart a submission を推してみたのですが、どうしたいの?と聞かれ、選択肢の中から「I want to display my Instagram posts on my website.」を選択すると、「申請する必要ないのよ。sandbox modeで充分じゃない。20メディアにアクセスできるのよ」と。なんだか諭されたまま先へ進めません。

似たような悩みの方もおられるようで…
https://teratail.com/questions/21770
私が頑張っても無理っぽい。だれか助けて。金なら出すよ。

太っ腹になると解決する

というわけで、前置きが長くなりましたが、

WordPressで表示したいなら、素晴らしい開発者が素晴らしいプラグインを作ってくれているはず!素晴らしいゆえに、審査も通っているはず!
と思って探したところ、ありました!

Instagram フィード
(Wordpressの「プラグイン」→「新規追加」→ Instagram feedで検索)
Instagram フィード

WordPressでInstagramを表示するプラグインで、使っている方も多いと思います。
自分の投稿 or ハッシュタグ or 位置情報のどれかの最新20件を表示します。

無料のプラグインでは最新20件ですが、このプラグインはInstagram Feed Pro」にアップグレードすることで、私の希望である、

  • 自分のinstagram投稿の
  • 特定のハッシュタグを付けた画像だけを取得して
  • 全部表示する

が解決できました。

Instagram Feed Proは有料です。
1サイト1年のサポートで$39、円高の現在(2016/06/20)で4,200円ぐらいです。
Instagram Feed Pro

↓こちらがデモページ

Instagram Feed Pro 使い方

Instagram Feed Pro

Instagram Feed Proサイトで、Paypal or クレジットカードで支払い手続きを済ませると、ダウンロードリンクとライセンスキーがメールで送られてきます。

②ダウンロードしたら、解凍して、WordpressのプラグインエリアにFTPでアップします。

③Wordpressのプラグイン管理ページで「Instagram Feed Pro」を有効化すると、
(無料版を使っていたら「無効化」してから)
サイドバーに「Instagram Feed」のメニューが出現します。

④Instagram Feed Proの設定画面 1. Configure で、「Instagram | Log in and get my Access Token and User IDButton not working?」のボタンがあるので、ここからアクセストークンとユーザーIDを取得します。(無料版で使っていたら、勝手に引き継がれていると思います。)
Instagram Feed Pro

⑤:Show Photos From
ユーザーID or ハッシュタグ or いいね or 位置情報 or 座標
のどれかを選択し「変更を保存」
※ここでは、5つのうちのどれかしか選択できませんが、次の設定ページで「ハッシュタグで絞り込み」や「ユーザーで絞り込み」、もしくは「特定のハッシュタグをブロック」「特定のユーザーをブロック」などが設定できます。

⑥ 設定ページ 2. Customize で 表示や取得数のカスタマイズができます。
Instagram Feed Pro

1)一般:画像表示エリアの横幅・高さ・背景色を指定
2)レイアウト:最初に表示する件数・横並びの個数・画像のマージン・モバイル用の表示の無効化
3)Photos:ソート順(新着orランダム)・サムネイルのサイズ・メディアタイプ(写真のみ・動画のみ)・lightbox無効化(デフォルトではクリックするとlightboxで表示されます)
4)Photo Hover Style:マウスオーバーした時の透過カラー・文字色・表示項目
5)Carousel:カルーセル表示有効化・ナビゲーション表示・自動スライド・秒数
6)ヘッダー:instagramのプロフィール欄の表示設定
7)キャプション:コメントの表示:文字数・文字色・文字サイズ
8)Likes & Comments Icons:いいね数とコメント数の表示
9)’Load More’ Button:2)で設定した表示数以上あった場合の「もっとみる」ボタンのデザイン設定
10)’Follow’ Button:フォローボタンのデザイン設定
11)Post Filtering:取得した画像から除外したいタグ・特定のタグがついた画像のみを取得
12)Moderation:特定の画像を非表示(画像IDで指定)、特定のユーザーの写真を非表示
13)Misc:カスタムCSSとカスタムJSをここで指定

これらの設定項目を設定したら、固定ページやウィジェット等でショートコード
[instagram-feed]
と記述すると、取得した画像が表示されます。

この設定にかかわらず、ショートコードで
[instagram-feed type=user]
[instagram-feed num=10]
[instagram-feed sortby=random]
や、
複数を指定した
[instagram-feed type=hashtag hashtag=”#sun,#beach” num=4 cols=4 showcaption=false]
などで、ページ毎に取得する画像を変えたりできます。

自分で解決しようと頭を悩ましましたが、$39で解決するなんて。
Smash Balloonさん、素敵なプラグインをありがとう!

Instagram Feed Pro

Pocket