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」タブを開くと下記の画面が表示されます。

Customizeタブ

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

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

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

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

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

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

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

ヘッダースライダー下に表示した例

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

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

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

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

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

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