数年前にインスタのAPIがサービス終了して、「Facebook管轄のAPIに切り替わりますよ」って発表がありました。
「Facebook Graph API」って代物ですね（言わずもがなInstagramはFacebook傘下なので）。
わたしも重い腰をあげて、ようやく切り替えに着手していたわけですが、このGraph APIの設定がとにかく面倒くさい。。
この記事にたどり着く方はもうある程度リサーチしきっているかと存じますが、一応、かんたんに手順を説明していきます。
もう見るのもコリゴリって方は、本題のプラグインまで飛ばしてくださいね！
もくじ
Graph APIトークン取得はとにかく面倒
Graph APIを経由してwordpressサイトにインスタ写真を埋め込むために、わたしが行なった手順としては、
- インスタアカウントを用意（当然しますとも）
- Facebook個人アカウントを用意（FBは離脱してたので新たに登録）
- Facebookビジネスアカウント作成（ウザいけど従うか）
- インスタとFBのアカウントを連携（まあ、必要だよね）
- (4.)設定中にFBアカ凍結……、復旧のためリサーチ（は？）
ここまでで虫の息ですが、まだ続きますよ。
- 顔写真の送付など行い24時間後ようやく復旧（は？？）
- インスタアカをビジネスアカに変更（もう引き返せない）
- Facebook for Developersに登録（え……！）
- 開発ページでアクセストークンを生成（ダル過ぎ！）
- そのトークンは３種類必要（バカか！）
- ようやく埋め込む要素が揃う（達成感＜怒り）
FBアカウントの凍結に関しては、わたしの不注意があったのかも知れませんが、この行程をサクッと完遂できる素人ってどれだけいるんでしょうかね？
（さらにプログラマーやエンジニアが、クライアントのトークンを代行して取得するパターンもありそうですが、こんなこと本人以外がやったらプライバシーを晒す部分が多すぎるし、下手したら関係が決裂したり、案件が立ち消えになったりしかねない段取りの煩雑さだと思いますよ？）
しかもこのあと、設置のためのCSSの書き方とかさらにリサーチが必要なわけなので、途中で挫折した方も沢山いらしたのでは、、と想像します。
Graph APIは素人利用なら必須ではない
Graph APIは当然、インスタの関連アプリ開発なんかには必要でしょうが、wordpressなどウェブサイトでのインスタ写真の利用を考えていて、
- 中小規模のコーポレートサイトに埋め込みたい
- 個人ブログに表示させたい
というような用途の場合には、わざわざGraph APIで、インスタ写真をサイト表示させる必要はありません。
少なくとも、取得作業時間や個人情報管理の手間に対して得られる対価が少ないのではないかと思います（元々FBアカウントがない方など尚更）。
あくまで個人的な見解ですが、個人利用においては、これから紹介するプラグインで対応できる事例が多くあるのではないかと思いましたので、着手してウンザリする前に、プラグインのみで目的を達成できないか先に検証してみてください。
Instagram Feed Galleryを試そう
ここからが本題です。
けっこうインスタ表示のwordpressプラグインて、サイドバーに設置するタイプの数が多いので、コンテンツ部分に表示を考えている場合にはスルーしてしまってるケースもあるのではないでしょうか？
一方、この「Instagram Feed Gallery」は無課金でも最大640pxサイズの設定があり、初期設定でコンテンツ部分に使用することができます。
Instagram Feed Galleryのカスタマイズ要素
- 表示枚数指定（最大33枚）
- カラム数指定（3×3で組むか、5×1で組むかなど）
- サイズ（150、320、640px）3段階から選択可能
- スペース指定（表示写真同士の間隔の値）
- マウスオーバーでのエフェクト
- コメント数やいいね数表示
- クリック時のポップアップアクション
- インスタアカウントページへのリンク
以上、FREEプラン以外は未検証ながら、かなり幅広く初期設定を行えます。
なお、プラグイン新規追加で検索すると、「Social Feed Gallery」というタイトルになっているコチラ↓が「Instagram Feed Gallery」です。
記事ページにInstagram Feed Galleryを実装
百聞は一見に如かず、ということで実際に貼ってみましょう。
上記のカスタマイズ要素を設定後、ショートコードが生成されるので、そのまま記事ページのコードエディターで貼り付けるだけで設置完了です（あまりにも有名なお問い合わせプラグイン「Contact Form 7」の設置と方法は同じですね）。
640px四方、全6枚表示の3カラム設定で、2段にわたって表示される設定を用いています（ブラウズサイズ480px以下からは、初期設定で2カラム表示に切り替え）。
マウスオーバーでブルーのマスクがかかり、クリックでポップアップ表示、さらに下部リンクでアカウントへ飛ばします。
ちなみに並んだ写真下の「View on Instagram」のリンクは表示しない選択ができます。
いかがでしょうか？
これで事足りてしまう状況ってかなり多いのではないかと思います。
ハッシュタグ連動設定がかなり便利
で、ひとつ設定要素で特筆したいのが、ディスプレイする写真の抽出方法の選択です。
設定画面の最上段、Typeで「Tag」を選択し任意のワードを入力すれば、指定したハッシュタグのついた写真を表示させることができます。
これの何が便利かって、『インスタ本体にはアップしたいけど、サイトには連動させたくない写真』に対して、タグで表示をコントロールできてしまう点です。
アカウント丸ごと連動だとこれができません。
特にビジネスサイトで利用する場合など、選りすぐりの写真だけでビシッと固めることができるので重宝するのではないでしょうか。
ちなみに先ほどの実装シミュレーションでは、『#GEZAN』のタグを指定しています。
セキュリティ重視ならアカウント連動設定
セキュリティというと大げさかも知れませんが、先ほどのタグ連動設定は、故意に迷惑写真をボムされるリスクが出てきてしまいます。
前提として、他人が絶対に使わないタグを設定しておくことはもちろんですが、比較的目に触れやすいキャプション部分には任意タグを付けず、コメント欄に後付けでセルフコメントすることで多少リスクを抑えられるかも知れません。
ただ、悪意を持ってリサーチすれば簡単に見破られてしまうでしょうから、万全を期す際には、やはりアカウント連動設定の方が安心です。
アカウント連動は、設定画面のバナーを使って追加することができます。
必ずログインが伴うので、管理しているインスタアカウント以外は紐づけることができません。
FREEプランでも充分に使える
ここまではすべて、無料プランで使える範囲の紹介でした。
写真を生業にしている場合を除いて、ほとんどの個人利用では充分ではないかと思います。
ちなみに有料プランにすると、
- 表示テンプレート数が2種類増える
- 「Load More Button」が利用可能
- 詳細までカスタマイズできる（フィードの色指定など）
ビジュアル面でこだわりたい場合には、有料プランでガッツリ作り込まないと納得がいかない方もいらっしゃるかも知れませんね。
やっぱり面倒なGraphAPIは無視しよう
というわけで、そもそもGraph APIがダル過ぎるところから始まって、インスタを埋め込むために色々な方法をリサーチした結果、「Instagram Feed Gallery」が一番使いやすく見栄えも良かったという記事でした。
もしも「APIトークンくらい取得できるスキルがなきゃ」みたいな気持ちで、実使用よりもトークン取得が目的になっている方（←わたしです）がいたら、さっさとプラグインで問題解決して、その時間を他に当てた方が有意義なケースもあるのではないでしょうか。
Graph APIについて検索して嫌になってしまっている、どなたかの参考になれば幸いです。