こんにちは。
今回はWordPressのプラグイン「Spotlight Social Feeds」を使い、WebページにInstagramのフィードを埋め込む方法をご紹介します。
Spotlight Social Feedsは無料から使うことができます。
プログラミングなどは不要で、ショートコード1つでWebページにInstagramのフィードを埋め込むことが可能です。
同じような機能をもつプラグインを他にもご紹介しています。
以下もあわせてご覧ください。
Spotlight Social Feedsのインストールと有効化
WordPressにSpotlight Social Feedsをインストールして有効化します。
Spotlight Social Feedsを有効化するとWordPress管理画面にInstagram Feedsのメニューが追加されます。
Spotlight Social Feedsの設定画面を開く
WordPress管理画面のメニューからInstagram Feedsメニューをクリックします。
Spotlight Social Feedsのアップデート情報などを受け取るか選択します。
Instagram Feedsメニューをクリックすると、Spotlight Social Feedsで埋め込むInstagramフィードのレイアウトを選択する画面が表示されます。
ClassicレイアウトのInstagramフィードを選択します。
選択したら右下にあるNext stepと書かれた青色のボタンをクリックします。
続けて右下にあるConnect & customizeと書かれた青色のボタンをクリックします。
Connect & customizeと書かれた青色のボタンをクリックすると、Instagramフィードのプレビューが表示された設定画面が開きます。
Spotlight Social FeedsでInstagramアカウントに接続する
画面右側にパーソナルアカウント、ビジネスアカウントそれぞれの接続ボタンが表示されています。
今回はパーソナルアカウントで接続します。
そのボタンが表示されていない場合、画面上部の「Connect」タブをクリックすると表示されます。
アカウント接続ボタンをクリックすると、そのInstagramアカウントへログインを求められます。
Instagramアカウントへログインしてアクセスも許可します。
Instagramアカウントへ接続が完了すると、パーソナルアカウントの仕様に関するメッセージが表示されます。
メッセージを閉じるとInstagramフィードの設定画面に戻り、プレビューが接続したInstagramアカウントの画像に変化しています。
Spotlight Social Feedsの設定を保存する
今回はSpotlight Social FeedsのClassicレイアウトを利用しているので、そのまま設定内容を保存します。
画面の右上にあるSaveと書かれたボタンをクリックします。
このInstagramフィードの設定に名前をつけてSaveボタンをクリックします。。
入力した名前でInstagramフィードの設定内容が保存されます。
Spotlight Social Feedsのショートコードを取得する
設定したInstagramフィードをWebページに埋め込むためのショートコードは、設定画面上部のEmbedタブをクリックすると画面右側に表示されます。。
Instagramフィードを埋め込む
Spotlight Social Feedsで取得したショートコードをWebページに入力すると次のようにInstagramフィードが埋め込まれます。
フィードの画像をマウスホバーするとInstagramのアイコンがオーバレイで表示されます。
フィードの画像をクリックするとそれがモーダル表示されます。
表示された画像はスライドになっており、左右の矢印をクリックすると他の画像も表示することができます。
埋め込んだInstagramフィードはレスポンシブ対応されており、スマートフォンでは次のように表示されます。
設定によっては横一列での表示もできます。
スマートフォンでは次のようになります。
Spotlight Social Feedsの設定項目
無料版のSpotlight Social Feedsでは多少制限がありますが、様々な項目が用意されています。
レイアウトの設定
フィードに表示する画像の並び順やクリックされたときの挙動の設定
フィードのサイズなどの設定
フィードのヘッダー部分の設定
アカウントフォローボタンの設定
もっと見るボタンの設定
カスタムCSSの設定
まとめ
今回はWordPressのプラグイン「Spotlight Social Feeds」を使い、WebページにInstagramのフィードを埋め込む方法をご紹介しました。
Spotlight Social Feedsは無料から使うことができます。
プログラミングなどは不要で、ショートコード1つでWebページにInstagramのフィードを埋め込むことが可能です。
同じような機能をもつプラグインを他にもご紹介しています。
以下もあわせてご覧ください。
