COLUMN コラム

2021.9.6

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

SNSが発達している今の時代、「TwitterやFacebook、Instagramのフィードをサイト内に埋め込みたい。」という要望をお客様からいただくことが多々あります。

Twitter、Facebookは公式のサービスを使えば埋め込むためのコードが発行されますが、Instagramに同様のサービスはありません。※2021年3月現在

今回紹介するプラグイン「Smash Balloon Social Photo Feed」を使用すれば、誰でも簡単にインスタグラムの投稿をサイト内に表示することができます。

1. Smash Balloon Social Photo Feedのインストール

①WordPress管理画面「プラグイン」→「新規追加」より「Smash Balloon Social Photo Feed」を検索しましょう。

②同じプラグインが二つ表示されていますが、有効インストール数の多いものをインストールして下さい。

③プラグインを有効化し、サイドバーに「Instagram Feed」と表示されていれば事前準備は完了です。

プラグインの有効化が完了したらサイドバー「Instagram Feed」より設定画面を開きます。

赤枠内のボタンを選択し、インスタグラムの各種情報を入力します。

①アカウントタイプの選択

個人利用なのか業務として利用するのかを選択して下さい。

②Instagramアカウントを接続する

接続を選択すると次の画面に遷移します。

サイト内に表示させたいインスタグラムのログイン情報を入力します。

プラグインがフィードを取得するため「許可する」を選択して下さい。

インスタグラムとの紐付けが完了したら赤枠内に先ほど設定したアカウント名が表示されます。

この画面が表示されていればアカウントの紐付けは完了です。

先ほどインスタグラムとの紐付けを行なった設定画面を下にスクロールすると、「フィードを表示する」が現れます。

説明文にある通り、[instagram-feed]をコピーし、表示させたい箇所に貼り付けて下さい。

今回は私の個人的なアカウントを紐付けましたので可愛い愛犬がサイト上に表示されました。

残念ですが、今回は愛犬については割愛させていただきます。

Instagram Feed設定画面「2.カスタマイズ」よりレイアウトの変更が可能です。

表示する枚数や並び、その他ボタンの装飾なども設定画面から手軽に行うことが可能です。

また、出力されるコードには細かくclass名が付いているので、スタイルシートからのレイアウト変更も可能です。自分好みのレイアウトに変更しましょう。

今回はインスタグラムフィードをWebサイトに表示するプラグイン「Smash Balloon Social Photo Feed」を紹介しました。

飲食店やアパレルショップ、美容院などのサイト制作で使用することが多いので、使用する際はこの記事を参考にしてみて下さい。

弊社では士業やメディア、医療関係の制作実績もありますので、Webサイトについてお悩みがある方は、お気軽にお問い合わせください。

DOLに制作を相談する

よく読まれている記事