WordPressサイトにインスタグラムフィードを表示するプラグイン「Smash Balloon Social Photo Feed」の使い方

WordPressのサイト内にインスタグラムフィードを埋め込む際に最も簡単に活用できるプラグインの紹介です。表示するフィードのデザインやカラム数まで調整できますので、当記事で使い方を解説いたします。

弊社のYouTuber TAKAPONによる動画解説は、下記よりご覧いただけます。

「Smash Balloon Social Photo Feed」とは

WordPressで制作したサイト内に簡単にインスタグラムフィードを表示できるプラグインです。主な特徴は以下の通りです。

• インスタグラムアカウントとの連携があっという間に完了できる
• ショートコードを使って任意の箇所に表示することもできる
• サムネイルのレイアウトを調整できる

特別な設定は不要なので、誰でも簡単にご活用いただけます。

「Smash Balloon Social Photo Feed」のインストール

管理画面から「Smash Balloon Social Photo Feed」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

ダウンロード

基本的な使い方、設定方法

次の3ステップで設定完了です。超簡単です。

1. アカウントを紐づける
2. サイト内に表示する設定
3. フィードのレイアウトを調整する

1.アカウントを紐づける

有効化すると下記箇所から、ご自身のインスタグラムアカウントと紐付けできます。

個人アカウント or ビジネスアカウントを選択した後、インスタグラムの認証画面で「承認」をクリックしてください。

アカウント名に間違えがなければ、紐付け完了です。ここまでの設定で、サイト内にインスタグラムのフィードを表示する準備が整います。

2.サイト内に表示する設定

続いてサイト内に表示する設定を行います。下記箇所「Instagram Feed」内の「Display Your Feed」タブを開き、ショートコードを表示します。

↓こんな感じで任意の箇所（投稿内や固定ページ内）にショートコードを貼り付ければ、表示できます。

フロントサイドの表示例は以下のような感じですが、各所を編集してレイアウトを変更可能です。

3.フィードのレイアウトを調整する

表示するフィードのレイアウトを任意に調整できます（無料版でできる範囲で紹介いたします）。「Customize」タブを開くと下記の画面が表示されます。

無料版では以下の項目を調整可能です。

• フィードの幅
• フィードの高さ
• フィードの背景色
• サムネイルの枚数
• カラム数（列数）
• サムネイルの周りのpadding
• 表示する画像の順番
• 表示する画像の解像度
• ヘッダーの有無
• ヘッダーのサイズ
• アカウントの下に表示するキャプション
• アカウント名の色
• さらに読み込むボタンの表示/非表示
• フォローするボタンの表示/非表示

このように無料版でもかなり柔軟にカスタマイズ可能です。表示する場所によって最適な形に変更してください。

投稿ページや固定ページ以外に表示したいときは？

通常の投稿や固定ページ内には、ショートコードをコピペして表示できますが、トップページなどで表示させたい時にどうすればいいのか。管理画面の外観から「テーマエディター」に進んで、表示したい箇所に下記のコードを貼り付けると表示できます。

<?php echo do_shortcode('[instagram-feed]'); ?>

一例ですが、このようにヘッダー下に表示させることも可能です（弊社テーマ「ROCK」に設置した例）。

この方法では、テーマファイルをカスタマイズすることになります。恐れ入りますが、弊社カスタマーサポートではお応えできない範囲ですので、バックアップを取って自己責任で行ってください。

なお、テーマをアップデートするとコードが上書きされるので再度設定が必要になります。コードが上書きされないようにするには、下記記事で紹介しているように子テーマで運用する方法があります。

インスタグラムフィードをレイアウトしてサクッと表示できる

WEBサイトとインスタグラムフィードを表示する際に最適なプラグインをご紹介いたしました。設定が簡単でアカウントとの連携がスムーズです。無料版でも柔軟にレイアウトを変更できるので、表示する場所を選ばずにオリジナルでカスタマイズできます。ぜひご活用ください。

なお弊社テーマ「EGO」では、先日のアップデートにより、フッターのインスタグラムフィードを表示する際に当プラグインの有効化が必須になりました。とはいっても必要な設定はアカウントとの紐付けのみです。フッター部分のスタイルはEGOに合わせて自動で調整される仕様になります。

詳しくは下記記事をご覧ください。