【WordPress】ワードプレスブログで超簡単にInstagramのフィードを表示するプラグイン「Smash Balloon Social Photo Feed」の設定方法を解説

WordPressサイトやブログを運営していて、Instagram（インスタグラム）に写真を投稿している方は、このように考えたことはありませんか？この記事では、Instagramのフィード（タイムライン）をWebページやウィジェット（サイドバー・フッター）に表示させる事ができるプラグイン「 Smash Balloon Social Photo Feed 」を紹介します。

Instagramのフィード表示プラグイン「Smash Balloon Social Photo Feed」

Instagramのフィード表示プラグイン「 Smash Balloon Social Photo Feed 」を使うと、ショートコードを貼るだけで、Instagramのフィードを簡単に表示させる事ができます。

■Smash Balloon Social Photo Feedの特徴

Smash Balloon Social Photo Feedの特徴は下記のとおりです。

• ショートコードを貼るだけで表示可能
• 表示させる写真の枚数を指定可能
• 写真表示の「列」の指定可能
• 写真のサイズの指定可能

シンプル操作で誰でも簡単に設定できます。

プラグイン『Smash Balloon Social Photo Feed』の設定手順

Instagramのフィード表示プラグインSmash Balloon Social Photo Feedの設定手順を解説します。

ステップ①：プラグインのインストール

まずはプラグインをインストールします。

ダッシュボード＞プラグイン＞新規追加 を選択します。

プラグイン検索窓に「Smash Balloon Social Photo Feed」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。

インストール終了後「有効化」をクリックして、プラグインを有効化します。

左側メニューに、「Instagram Feed」という項目が追加されたことが確認できればOKです。

ステップ②：プラグインとInstagramアカウントを接続

プラグインとInstagramのアカウントを接続します。
ダッシュボード＞Instagram Feed を選択します。

「Configure」の［Instagramアカウントを接続する］というボタンをクリックします。

Instagramのアカウントにログインするよう求められますので、①メールアドレスと、②パスワードを入力し、③ログインをクリックします。

接続が成功すると、Instagram Feedの設定画面にInstagramアカウントが表示されます。

ステップ③：フィードを表示させるショートコードを取得

Instagramのアカウントを接続したら、Instagramのフィードを表示させることができるショートコードを取得します。

ショートコードは設定画面の下の方にあります。

ちなみに、Instagram Feedの①～④は特に設定しなくてもそのまま使う事ができますが、いくつか設定項目がありますので一応解説しておきます。

各項目の詳細は下記のとおりです。

ステップ④：表示させたい場所にショートコードを貼り付ける

Instagramフィードを表示させたい場所にショートコードを貼り付けます。

インスタグラムのフィードを、表示させたいページの編集画面で、取得したショートコードを貼り付け、公開・更新ボタンをクリックします。以上！！簡単でしょう。

◆まずはブログ編集画面でショートコードボタンを選択してください。

◆本文上にショートコードの入力欄が出てきたら プラグイン『Smash Balloon Social Photo Feed』の設定画面で出てきたショートコードをコピー＆ペーストしてください。

編集画面ではショートコードだけ表示されるけど安心してください！！

プレビューで確認すると、下図のようにWebページにInstagramのフィードが表示されていることが確認できます。