横浜のITサポート・WEB制作会社

Webサイト制作

WordPressの使い方を知りたい!

Windows

パソコンのトラブル解決方法を知りたい!

Office365

Office365でできることを知りたい!

アプリ

便利なアプリを知りたい!

h

すべての記事

人気記事TOP15

タグ一覧

会社情報

採用情報

お問い合わせ

ITサポートスタッフ募集中です。詳しくはこちらから!

WordPressの無料プラグインSpotlightでInstagramを埋め込む

2023/11/08 | WordPress

こんにちは。

今回は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のフィードを埋め込むことが可能です。

同じような機能をもつプラグインを他にもご紹介しています。

以下もあわせてご覧ください。

ITサポート・ホームページ制作はお任せください

  • パソコンの動作が遅い・重いと感じる
  • パソコンやスマートフォン、複合機などIT機器を新しく入れ替えたい
  • システム化・クラウド化など業務のIT化・DX化を考えている
  • ホームページを新しく作りたい
  • 古くなったホームページを修正をしてほしい

上記の様なお悩みがありましたらぜひ弊社までお気軽にお問い合わせください!