InstagramをWordPressに表示できる「Instagram Feed」が便利すぎた！

こんにちは！最近金のミルクという飴にハマっている社員Aです👩

ノーマルなミルク味と抹茶味があり、やみつきになるくらい美味しいです🍬

さて、今回はInstagram（インスタグラム）の写真をサイトに表示できるWordpressプラグイン「Instagram Feed」の使い方について書いていきます！

サイトデザインでInstagramの組み込みが必要な案件は、すべてこのプラグインを使って表示しています。

一度使い方を覚えるととても簡単なので、ぜひご覧ください！

InstagramをWordpressに表示できる「Instagram Feed」の使い方

Instagramにアップした投稿をリアルタイムでサイトに表示することで、Instagramのフォロワー数増加や、集客にも繋がります。

ここからはプラグインの設定・表示方法について説明していきます。

1.プラグインをインストール

まずは「Instagram Feed」をインストールし、有効化します。

WordPress管理画面のプラグインから「Instagram Feed」を検索し、有効化してください。

2.プラグインとInstagramアカウントを提携する

プラグインを有効化すると、ダッシュボードのサイドメニューに「Instagram Feed」が表示されますので、クリックします。

設定画面が開きますので、まずは「Log in and get my Access Token and User ID」のボタンをクリックします。

Instagramへのログインが促されますので、提携したいアカウントでログインしてください。

Instagramへログインすると、下記のようなポップアップが表示されますので、緑色の「Authorize」ボタンをクリックします。

ボタンを押すと自動的にリダイレクトされ、提携が完了しました。

3.表示のカスタマイズ

アカウント提携が終わりましたら、続けて表示のカスタマイズをします。

上部のタブで「2.Customize」に切り替えてください。

ここでは、Instagramをサイトに表示するときにどのような見た目にしたいかを設定できます。

1. Width of Feed（フィードの横幅）
2. Height of Feed（フィードの縦幅）
3. Background Color（背景色）
4. Number of Photos（写真の表示枚数）
5. Number of Columns（列の数）
6. Padding around Images（写真の周りの余白）
7. Disable mobile layout（モバイルレイアウト）

4.ショートコードでサイトに表示する

上部のタブを「3.Display Your Feed」に切り替えると、ショートコードが表示されていますのでサイトに貼り付けることで、リアルタイムでInstagramの投稿を表示することが出来ます。

[instagram-feed]

また、このショートコードには様々な引数が利用でき、好みにカスタマイズできます。

オプションは下記です。

デフォルトでは、下記のような見た目になります。

ヘッダー部分はいらないので、引数にshowheader=falseを指定すると、写真だけがすっきり表示できます。

まとめ

プラグインを使うだけで、簡単にInstagramの投稿が表示できるので便利ですね。

アカウント連携もログインするだけでできるので、Wordpress初心者の方でも簡単に設定できます。

Instagramにアップした投稿をリアルタイムでサイトに表示することで、Instagramのフォロワー数増加や、集客にも繋がりますので是非試してみてください！

無料でここまでカスマイズできるのはすごい！