[Smash Balloon Social Photo Feed]の使い方！Instagramをサイトに埋め込む方法をサイト制作のプロが図解入り解説！

Instagramの投稿をワードプレスに埋め込みしたいと思っている方は多いですよね。

そこで、初心者さんでも使いやすい、プラグイン「Smash Balloon Social Photo Feed」を使ってインスタをワードプレスに埋め込む方法をワードプレス構築の解説のプロのわたしがお伝えします♪

以前の記事では、プラグイン未使用のインスタ埋め込み方法「snapwidget」についてアップしました。

＞＞　Instagramをサイトに埋め込む方法【SnapWidget（スナップウィジェット）】

ですが、「snapwidget」では、何かと不具合が多くてかなりたくさんの方からご相談がありました。

インスタの埋め込みするなら、プラグインを使う方法がオススメになります。

この記事にかいてあることはこんなことだよ♪

1 Smash Balloon Social Photo Feedとは？
2 Smash Balloon Social Photo Feedのインストール方法
3 Smash Balloon Social Photo Feedにインスタアカウントを連携する
4 Instagramをワードプレスに埋め込み表示させる方法
5 Smash Balloon Social Photo Feedのカスタマイズ
- 5.1 Configure（設定）
- 5.2 Customize(カスタマイズ)
6 まとめ

Smash Balloon Social Photo Feedとは？

サイトとインスタグラムを連携して、自動でインスタの画像を表示させることができるプラグインです。

特に難しい操作はなく、誰でも簡単にインスタグラムをブログに埋め込みできるので、この記事を読みながら一緒に操作してみてくださいね(^O^)／

Smash Balloon Social Photo Feedのインストール方法

まずは、プラグイン「Smash Balloon Social Photo Feed」をインストールしていきます。

ワードプレスのダッシュボード（管理画面）の左側のメニューから、「プラグイン」にマウスを合わせて「新規追加」をクリックしてください。

プラグインの追加画面が開きますので「Smash Balloon Social Photo Feed」を検索します。

▼

下図のようなプラグインが表示されますので、「今すぐインストール」をクリックしてください。

インストールから「有効化」に変わりますので、「有効化」をクリックします。

これで、プラグインのインストールが完了しました♪

Smash Balloon Social Photo Feedにインスタアカウントを連携する

インストールが終わったら、そのままSmash Balloon Social Photo Feedの設定まで行っていきたいと思います。

有効化したら、画面がプラグイン一覧に変わりますので、「Smash Balloon Social Photo Feed」を見つけて、「Settings」をクリックしてください。

「Instagram Feed」という設定画面が開きますので、「1. Configure」タブからInstagramアカウントに接続するために青いボタン「Connect an Instagram Account」をClickします。

下図のようなポップアップが立ち上がります。

Personal・・・個人アカウント
Business・・・ビジネスアカウント

アカウントの確認なのですが、個人アカウントで接続する方がやりやすいです。

個人の場合は、直接インスタアカウントを連携でOKですが、ビジネスの場合は、Facebookからインスタ連携という流れになります。

Instagramの認証画面が表示されますので、ログインしてください。

このような画面が開きますが、お好みでいいかと思います。わたしは情報を保存にしました。

承認してくださいという画面が開くので「承認」します。

ワードプレスの画面に戻ってきて、もう一度確認画面が表示されるので、「Connect This Account」をクリックします。

これでアカウントの連携が完了しました。

Instagramをワードプレスに埋め込み表示させる方法

「Instagram Feed」の画面から「3. Display your Feed」タブを開き、Display your Feedのところにあるショートコード「instagram-feed」をコピーします。

Instagramを表示したいところにショートコードを貼り付けします。（例えば、サイドバーウィジェット・固定ページなど・・・）

わたしは、今回、ホームページの表示を固定ページで作成しているので、固定ページに貼り付けをしました。

すると下の画像のように、 Instagramの写真を簡単に表示することができました。埋め込みした Instagramは、自動更新なので、インスタに写真をUPすると写真が増えます。

表示しているのは、わたしのブログの生徒さんで、あみぐるみ作家tokiさんのサイトです♪
tokiさんサイト『miche Ccoche（ミーチェ・クロシェ）』

Smash Balloon Social Photo Feedのカスタマイズ

今の状態だと20枚の写真が表示されている状態なので、表示のカスタマイズをしていきます。

ワードプレスのダッシュボードの左メニューから「Instagram Feed」をクリックします。

設定画面が開きますので、順番に説明していきます。

Configure（設定）

「1.configure」タブを開き赤枠内の設定を行います。

Preserve settings when plugin is removed:
不具合などでプラグインを削除し再インストールした時に、チェックを入れておけば、今行っている設定を保存しているので引き継ぐことができる。
Check for new posts every:
InstagramにUPされた画像をサイトに反映させるための自動更新の時間を決めることができます。
「分」「時間」「day」で設定することができますので、お好みで選んでください。
インスタを毎日朝更新している方は、[1][Days]にすると１日ごとに Instagramが更新されていないかチェックして更新してくれます。

Customize(カスタマイズ)

「２.customize」タブを設定していきます。

General 一般

Width of Feed: 埋め込みした画面の横幅
Height of Feed: 埋め込みした画面の高さ
Background Color: 埋め込みした画面の背景色

Layout レイアウト

Layouttype:有料版のみ使用可能
Number of Photos: 写真の表示枚数
Number of Columns: 列の数
Padding around Images: 写真の周りの余白
Disable mobile layout: モバイルレイアウト
チェックを入れるとモバイルレイアウトが有効化になり、スマホにすっぽり表示がおさまるように設定されます。（お好みで設定が可能ですので、いろいろ試してみてください）

Photos 写真

Sort Photos By: 画像の並び替え　「新しいのから古い画像」「ランダム」のどちらか選択

mage Resolution: 画像解像度（推奨は自動検出）

Photo Hover Style・Carousel

写真にマウスを合わせたときの挙動と、スライド表示の設定になるのですが、この2つは、有料版のみなので、設定を飛ばします。

Header （ヘッダー）

ワードプレスで表示させたときのインスタグラムのヘッダー部分を自由に設定できます。

Show Feed Header: ヘッダー表示の切り替え（チェックを外すとヘッダーが非表示になります。）
Header Size: ヘッダーの表示サイズ「small」「medium」「large」の３パターンから選択できます。
Show Bio Text: プロフィール表示の切り替え（チェックを外すと自己紹介文が非表示になります。）
チェックを入れた場合は、プロフィールの文章を空欄になっているところに入れ込めば、プロフィール文章が表示されます。
Use Custom Avatar:アバターの設定ができます。（インスタアカウントで使っているプロフィール写真を設定すると分かりやすいです。）
設定するには、一度メディアライブラリに写真を追加して、メディアのURLを取得して貼り付けする形になります。
Header Text Color: ヘッダーのテキスト色を変更できます。