こんにちは。
今回はWordPressのプラグイン「Spotlight Social Feeds」を使い、WebページにInstagramのフィードを埋め込む方法をご紹介します。
Spotlight Social Feedsは無料から使うことができます。
プログラミングなどは不要で、ショートコード1つでWebページにInstagramのフィードを埋め込むことが可能です。
同じような機能をもつプラグインを他にもご紹介しています。
以下もあわせてご覧ください。
Spotlight Social Feedsのインストールと有効化
WordPressにSpotlight Social Feedsをインストールして有効化します。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS.png)
Spotlight Social Feedsを有効化するとWordPress管理画面にInstagram Feedsのメニューが追加されます。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-1.png)
Spotlight Social Feedsの設定画面を開く
WordPress管理画面のメニューからInstagram Feedsメニューをクリックします。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-1.png)
Spotlight Social Feedsのアップデート情報などを受け取るか選択します。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-2-1024x879.png)
Instagram Feedsメニューをクリックすると、Spotlight Social Feedsで埋め込むInstagramフィードのレイアウトを選択する画面が表示されます。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-4.jpg)
ClassicレイアウトのInstagramフィードを選択します。
選択したら右下にあるNext stepと書かれた青色のボタンをクリックします。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-5.jpg)
続けて右下にあるConnect & customizeと書かれた青色のボタンをクリックします。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-6.jpg)
Connect & customizeと書かれた青色のボタンをクリックすると、Instagramフィードのプレビューが表示された設定画面が開きます。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-8.jpg)
Spotlight Social FeedsでInstagramアカウントに接続する
画面右側にパーソナルアカウント、ビジネスアカウントそれぞれの接続ボタンが表示されています。
今回はパーソナルアカウントで接続します。
そのボタンが表示されていない場合、画面上部の「Connect」タブをクリックすると表示されます。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-8-1.jpg)
アカウント接続ボタンをクリックすると、そのInstagramアカウントへログインを求められます。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-9.png)
Instagramアカウントへログインしてアクセスも許可します。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-10.png)
Instagramアカウントへ接続が完了すると、パーソナルアカウントの仕様に関するメッセージが表示されます。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-11-1024x477.png)
メッセージを閉じるとInstagramフィードの設定画面に戻り、プレビューが接続したInstagramアカウントの画像に変化しています。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-12.png)
Spotlight Social Feedsの設定を保存する
今回はSpotlight Social FeedsのClassicレイアウトを利用しているので、そのまま設定内容を保存します。
画面の右上にあるSaveと書かれたボタンをクリックします。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-12-1.png)
このInstagramフィードの設定に名前をつけてSaveボタンをクリックします。。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-13.png)
入力した名前でInstagramフィードの設定内容が保存されます。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-14-1.png)
Spotlight Social Feedsのショートコードを取得する
設定したInstagramフィードをWebページに埋め込むためのショートコードは、設定画面上部のEmbedタブをクリックすると画面右側に表示されます。。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-15-1.png)
Instagramフィードを埋め込む
Spotlight Social Feedsで取得したショートコードをWebページに入力すると次のようにInstagramフィードが埋め込まれます。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-18.png)
フィードの画像をマウスホバーするとInstagramのアイコンがオーバレイで表示されます。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-19.png)
フィードの画像をクリックするとそれがモーダル表示されます。
表示された画像はスライドになっており、左右の矢印をクリックすると他の画像も表示することができます。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-20.png)
埋め込んだInstagramフィードはレスポンシブ対応されており、スマートフォンでは次のように表示されます。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-21.png)
設定によっては横一列での表示もできます。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-23.png)
スマートフォンでは次のようになります。
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-24.png)
Spotlight Social Feedsの設定項目
無料版のSpotlight Social Feedsでは多少制限がありますが、様々な項目が用意されています。
レイアウトの設定
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-25.png)
フィードに表示する画像の並び順やクリックされたときの挙動の設定
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-26.png)
フィードのサイズなどの設定
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-27-665x1024.png)
フィードのヘッダー部分の設定
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-28-602x1024.png)
アカウントフォローボタンの設定
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-29.png)
もっと見るボタンの設定
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-30.png)
カスタムCSSの設定
![](https://www.kaname-gh.co.jp/wp/wp-content/uploads/2023/11/SS-32-752x1024.png)
まとめ
今回はWordPressのプラグイン「Spotlight Social Feeds」を使い、WebページにInstagramのフィードを埋め込む方法をご紹介しました。
Spotlight Social Feedsは無料から使うことができます。
プログラミングなどは不要で、ショートコード1つでWebページにInstagramのフィードを埋め込むことが可能です。
同じような機能をもつプラグインを他にもご紹介しています。
以下もあわせてご覧ください。