WordPress無料プラグインWPZOOM Social Feed WidgetでInstagramフィードを埋め込む

2023/09/19 | WordPress

こんにちは。

今回はWordPressで作られたWEBサイトにプログラミング不要、ショートコード1つでInstagramのフィードを埋め込むことができるプラグイン「WPZOOM Social Feed Widget & Block」をご紹介します。

以下では他にも類似機能を持つプラグインをご紹介しています。

ぜひあわせてご覧ください。

Instagramフィードを埋め込みできるWordPressの無料プラグイン集

プラグインのインストール・有効化

WordPressのプラグインの追加画面で「WPZOOM Social Feed Widget & Block」と検索します。

インストール・有効化します。

以下の赤オレンジ色のアイコンがWPZOOM Social Feed Widget & Blockです。

有効化するとWordPress管理画面のサイドバーに「Instagram Widget」の項目が追加されます。

Instagramアカウントの接続

WordPress管理画面のサイドバーより「Instagram Widget」をクリックすると、どのSNSとどのように接続するかの選択画面が表示されます。

その画面から「Connect with Instagram」と書かれた青色のボタンをクリックします。

このとき、使っているブラウザですでにInstagramアカウントにログインしている場合は次のようにアクセス許可画面が表示されます。この画面が表示されたら「許可する」をクリックします。

Instagramアカウントの接続が成功すると次のようなメッセージが表示されます。

「OK」と書かれた青色のボタンをクリックするとメッセージは閉じます。

上記のメッセージを閉じるとWordPressに埋め込むInstagramフィードの設定画面に移ります。

Instagramフィードの設定

「Select an Account」と書かれたボタンをクリックしてフィード設定を行うInstagramアカウントを選択します。

ボタンをクリックすると先程接続したInstagramアカウントが表示されるのでそれを選択します。

Instagramアカウントが選択されるとフィードにプレビューが表示されます。

プレビューされているInstagramのフィードをWebページに埋め込むにはショートコードを使います。

そのショートコードはフィード設定画面の「Embed」タブより取得できます。

まずはデフォルト設定の状態で控えておきます。

Instagramフィードの埋め込み：デフォルト設定

先程控えたInstagramフィードショートコードをWebページに埋め込むと3×3で9枚の画像を表示されます。

表示されているInstagramの画像をマウスホバーすると、透明の黒色でオーバーレイされてInstagramのアイコンが表示されるようです。

そのまま画像をクリックするとInstagram投稿の詳細がモーダルで表示されます。

「View on Instagram」と書かれた青色のボタンをクリックすると、埋め込みされているInstagramアカウントへアクセスできます。

モバイルでは次のように表示されるようです。

Instagramフィードの埋め込み：カスタマイズ設定

無料版のWPZOOM Social Feed Widget & Blockでは、テーマの調整も行いつつ次のようなカスタマイズしたInstagramフィードの埋め込みができそうです。

余白をなくしたレイアウト

フルワイドのレイアウト

WPZOOM Social Feed Widget & Blockの設定項目

プラグインで設定できる内容をご紹介します。

レイアウト

4つのレイアウトが用意されていますが無料版だとそのうちグリッドかフルワイドが設定できます。

画像の表示枚数や画像間の余白はいずれも設定できます。

プロフィール

Instagramアカウントの情報をどこまで表示させるかの設定ができます。

リンクボタンのテキストも変更できるので、デフォルトでは英語ですが日本語にするなど可能です。

フィード

テキストや画像などのサイズ調整、画像の読み込みタイミングやマウスホバー、クリックしたときの動きなどを設定できます。