WordPressブログに簡単・おしゃれにInstagramフィードを表示。プラグイン「Smash Balloon Social Photo Feed」の解説

公開日 2021-08-21 最終更新日 2021-08-21

当ブログは、ワードプレスで作っています。
Instagramのフィードをフッターに表示させたいと思い、それまではJetpackのウィジェットを使っていました。
しかし原因は不明ですが、設置しても一日ぐらいで非表示になってしまうのです。
Instagramアカウントを連携し直せば表示されますが、また一日くらいで非表示に。
これはちょっと使えないなと思い、別のものを探しました。

自分の条件を叶えるものを選んだところ、「Smash Balloon Social Photo Feed」がよかったです。
そこでこの記事では、「Smash Balloon Social Photo Feed」を使ったInstagramフィードの設置方法を解説します。

SPONSORED

WordPressのブログに簡単・おしゃれにInstagramを表示する。プラグイン「Smash Balloon Social Photo Feed」の解説

Instagramフィードを表示させるWordPressのプラグインは、それこそ無数にあります。
選ぶ際の自分の条件は、以下のような感じでした。

  • 無料で使える
  • デザインをカスタムできる
  • 表示が安定している

Instagramフィードの表示は、自分にとってそれほど優先順位が高くありません。
そのため基本的には、無料のプラグインが前提です。
さらにサイトに馴染むよう、デザインはカスタムしたいです。
当然ながら、フィードの表示は安定しなくては困ります。

これら条件をもとに調べたところ、「Smash Balloon Social Photo Feed」が見つかったという次第です。
このプラグインはPro版もありますが、無料版で十分に満足できました。

インストール方法

「Smash Balloon Social Photo Feed」は、WordPressの新規プラグインで検索すると出てきます。

インストール後に「有効化」をクリックすると、左サイドメニューの下の方に設定画面のInstagram Feedが表示されます。

Smash Balloon Social Photo Feed
「Instagram Feed」で設定していく

Instagramアカウントの接続

プラグインとInstagramアカウントとの接続は簡単です。
設定画面であるInstagram Feedをクリックすると、上部にタブが並んでいます。
その中の一番左の「設定」をクリックすると、目立つ位置に「Instagramアカウントを接続する」というボタンがあります。

Smash Balloon Social Photo Feed
「Instagram アカウントを接続する」で紐付ける

「Instagramアカウントを接続する」をクリックすると、ポップアップウィンドウが開き、「Personal」か「Business」かを尋ねられます。

Smash Balloon Social Photo Feed
ビジネスアカウントもPersonalで表示が可能

とりあえず「Business」を選んでみましたが、フェイスブックページとの連携がややこしそうだったので、「Personal」にしておきました。
Instagramのアカウントがビジネスであっても、「Personal」で問題なく表示されます。

「Personal」選択後に「Connect」をクリックすると、Instagramのウェブサイトが開き、紐付けを許可するか尋ねられます。
「Allow」をクリックします。

Smash Balloon Social Photo Feed
「Allow」をクリック

すると再びWordPressへ戻り、Instagramのアカウントと接続するか尋ねられます。
「このアカウントを接続する」をクリックします。
これで連携が完了します。

Smash Balloon Social Photo Feed
「このアカウントを接続する」をクリック

サイトへフィードを表示する方法

連携が完了した状態で画面下へスクロールし、「変更を保存」をクリック。
「フィードを表示する」という囲みに、以下の文字が見えます。

[instagram-feed]

このショートコードを表示したい場所へコピペすれば、InstagramのフィードがWordPressのサイト内に表示されます。
とても簡単です。

Smash Balloon Social Photo Feed
ショートコードを表示したい場所へ貼り付ける

表示場所はサイドバーやフッターなどウィジェットのほか、投稿内でも可能です。

フッターに設置してみた

実際に当ブログのフッターに貼り付けてみました。
ウィジェット画面のフッターに「カスタム HTML」を挿入し、ショートコードを貼り付けて、左下の完了をクリック。

Smash Balloon Social Photo Feed
ウィジェットのカスタムHTMLでサイドバーやフッターへ設置する

サイトのフッターを見てみると、Instagramフィードが表示されていました。

Smash Balloon Social Photo Feed
デフォルトのデザイン

デザインのカスタマイズ

サイトのデザインに合わせ、もっとシンプルにカスタムしてみます。
カスタムはInstagram Feedのタブ「2. カスタマイズ」から行います。
ここではフィードの幅や高さ、一行に表示する写真の枚数など、フィードのデザインをかなり細かく設定できます。

Smash Balloon Social Photo Feed
「2. カスタマイズ」タブでカスタムする

自分は以下のように、設定をカスタムしました。

【一般】
フィードの高さ → 490px
背景色 → #ffffff

【レイアウト】
写真の数 → 8
列の数 → 2

【ヘッダー】
自己紹介を表示 → チェックを外す

【「さらに読み込む」ボタン】
「さらに読み込む」ボタン → チェックを外す

【「フォロー」ボタン】
フォローボタンを表示 → チェックを外す

変更後に「変更を保存」ボタンを押し、サイトを確認します。
無事、サイトと同じような、シンプルなデザインに変更できました。

Smash Balloon Social Photo Feed
カスタム後の表示画面

複数のフィードをカスタムする場合

個別にフィードのデザインをカスタムする場合は、ショートコードに追記するだけで自由に設定できます。

ショートコードに追記できるコードは、タブの「3. フィードの表示」に一覧がのっています。
ピンクに塗られた部分は、Pro版のみ可能です。
当然ながらPro版のほうが自由度は高いですが、無料版でも十分にカスタム可能です。

ショートコードに追記していく

例えば表示するフィードの幅を50pxにしたい場合は、以下のように追記します。

[instagram-feed width=50]

複数項目を指示する場合は、コードを半角スペースで区切っていきます。
例えば幅を50pxにしつつ、高さを250px、列を5にしたい場合は、以下のように書きます。

[instagram-feed width=50 height=250 cols=5]

ウィジェットの細かなカスタムも、ショートコードに直に記入していったほうがやりやすいかもしれません。

まとめ

Instagramをやっているひとは、ブログにもフィードをのせたいと思うでしょう。
今回試してみた「Smash Balloon Social Photo Feed」は、簡単で細かな部分までデザインできます。
よいプラグインだと思いました。

ファッション系のサイトだと、Instagramが重要になります。
その場合はPro版にして、より自由にカスタムすると良いかもしれません。
ブログにInstagramのフィードを入れたいと考える人は、「Smash Balloon Social Photo Feed」を試してみてください。

関連記事

ブログのひとつひとつの記事には、サイトの住所となるパーマリンクが付けられています。
パーマリンクは一度付けたら変更しないのが鉄則ですが、当サイトで全記事のパーマリンク変更の必要性が出てしまいました。

以下の記事で、SEOの順位を落とさず、すべてのパーマリンクを変更したやり方を解説しました。

SPONSORED