Instagramの表示は本来ですとAPIを使用する方法がベターかと思います。
ただ、この方法ですと結構な手間が掛かってしまい経験が無い方は諦めてしまうことがほとんどだと思います。
また、外部に発注した場合も同様でその分のコストが掛かってしまいます。
業者に依頼するのでもちろん仕方ないことなんですが、どうしてもコストを掛けたくない場合は自分で対応するしかありません。
今回は紹介記事その1として私が今まで対応してきた方法を簡単にご紹介したいと思います。
APIでの掲載方法は今回紹介しませんので、API(アクセストークン)での対応方法が知りたかった人は申し訳ありませんが今回の記事はスキップしてください。申し訳ありません。
表示させる方法
過去私が運営・管理するサイトでInstagramを表示させた方法は大きく分けると3つございました。
- Instagram Graph APIを使用して表示
- webサービスを利用して表示
- プラグインを利用する（Word Pressでサイトを制作している場合に限ります）
(1)は先にも述べましたが、一番確実な方法ではございますが利用するには知識が必要になります。
業者に依頼する方法もありますが当然コストが掛かります。
(2)は比較的簡単に設定することができますが、多くの場合はInstagramの画像が表示されても写真や動画をクリックすると、webサービスのサイト（またはページ）が一度表示されるなどの問題もございます。
場合によってはSSLサイトでは表示されないなどのサービスもございます。
(3)はWord Press限定になってしまいますがプラグインを利用してInstagramと連携させる方法で無料版でも比較的簡単にかつ別ページなどを挟まずご自分のInstagramのページへ遷移させることができます。
(2)と(3)は有料にすれば述べた問題は解決されるうえに、便利な機能も使えるようになるので結構おすすめだったりします。
ただし年間コストが掛かる場合がほとんどですので、ご自分のサイト状況を考慮して、無料版か有料版かを検討してください。
前置きが長くなりましたが今回の記事は(3)のプラグインを利用したWord PressサイトでInstagramの最新写真を表示させる方法をご紹介させて頂きたいと思います。
Smash Balloon Social Photo Feed[プラグイン]
Instagram アカウントの投稿より、ひとつのフィードまたは複数の異なるフィードを表示します。
https://ja.wordpress.org/plugins/instagram-feed/
こちらのプラグインは無料版と有料版がありますが、今回紹介するのは無料版となります。
Smash Balloon Social Photo Feedのインストール
プラグイン > 新規追加から「Smash Balloon Social Photo Feed」を検索しインストールを行い有効化を行います。
Instagramを表示させる方法
Instagramの写真などを表示させたいと思います。
Instagram Feedをクリックし「新規追加」をクリックします。
ユーザーのタイムラインを表示させるので、そのまま「次へ」をクリック。
「ソースを追加」をクリックします。
専用サイトにページが遷移されますので、1と2をお使いのInstagramの内容に合わせて設定します。個人で使う場合は「Personal」をInstagramのビジネスアカウントがある場合は「Business」を選択します。
Login with Instagramをクリックし、Instagramへログインします。
すでにログイン指定ある場合は下記画像の様にページが表示されますので「許可する」をクリックします。
画像の様にInstagramのアカウントが表示されればOKです。
「すべてのフィード」クリックすると先程Instagramのアカウントと連携したフィードが掲載されます。
そちらにあるショートコードを掲載させたい箇所（固定ページやウィジェットなど）に貼り付ければOKです！
固定ページや記事投稿内に表示させる方法
ショートコードをコピーします。
「ブロック挿入」からショートコードブロックを挿入し、先程コピーしたショートコードを貼り付けます。
プレビュー画面で確認してみる以下の画像のように表示されます。
ウィジェットを利用し、サイドカラムやフッターなどに表示させる方法
ウィジェットに追加したい場合はウィジェット画面の「テキスト」を掲載したい箇所に追加します。（例としてフッター1に追加しております。）あとはテキスト画面内にコピーしたショートコードを貼り付けて完了になります。
Smash Balloon Social Photo Feedのカスタマイズ方法
現在はデフォルトでの表示となっておりますが、Smash Balloon Social Photo Feedはカスタマイズをすることが可能です。
無料版でも出来ることは数多くありますので是非自分好みでカスタムしてみてください！
今回は簡単にですが、私がカスタマイズした箇所を紹介したいと思います。
フィールドレイアウト
- フィールドの高さ
- 余白
- 投稿数（デスクトップ/モバイル）
- 列（デスクトップ/タブレット/モバイル）
以上の4つの機能がカスタムできます。
それではカスタムしていきましょう！
フィールドの高さ
フィールドの高さを指定することができます。
非表示エリアはスクロールすることで確認することができますよ！
余白
写真と写真の間の余白を設定することができます。
0にすることもできるのでお好みの数字を入力してください。
投稿数（デスクトップ/モバイル）
デスクトップとモバイルそれぞれで掲載する投稿数を設定することができます。
列（デスクトップ/タブレット/モバイル）
デスクトップ、タブレット、モバイルそれぞれで表示方法を設定することができます。
確認方法はプレビューボタンが用意されてますので、確認したいデバイスボタンをクリック。
その他
- ヘッダーの非表示
- もっと見るボタンの非表示
もちろん同じ様にカスタムする必要はありません。
是非お好みのレイアウトになるようカスタムしてみてください！
ヘッダーの非表示
ヘッダーの有効のチェックを外せばOK
もっと見るボタン
ヘッダー同様に有効のチェックを外せばOKです。
ヘッダーはもちろん、もっとよく見るボタンもサイズを変更したり、テキストやボタンの色。その他にもカスタマイズすることができますので、興味がある方は是非チャレンジしてみてください！
まとめ
今回はInstagramの写真を表示させる方法その1としてWord Pressのプラグイン「Smash Balloon Social Photo Feed」を紹介させていただきました。
InstagramをWord Pressサイト上に表示させたいと考えている方、導入を検討してみては如何でしょうか？
その他にも、Instagramを表示させるプラグインやWebサービスを今後紹介していきたいと思いますので今しばらくお待ち下さい！
それではまた次回！
