InstagramをWordPressに埋め込むプラグイン『Smash Balloon Social Photo Feed 』の設定方法

プラグインの新規インストール画面で「Smash Balloon」と検索し、表示される『Smash Balloon Social Photo Feed』を今すぐインストールからインストールします。

インストールしたら有効化しましょう。

有効化するとダッシュボードのサイドメニューに「Instagram Feed」が追加されるので編集ページを開きます。新規追加をクリックしてください。

拡張フィードのメニューは有料のPro版の機能ですので、そのまま次へをクリック。

ご自身のInstagramのアカウントに合わせて、個人アカウントかビジネスアカウントかを選択しLogin with Instagramをクリックします。

インサイトを見たりFacebookページと連携できるビジネスアカウント（プロアカウント）を使用している人が多いかと思います。「『Business』を選択したけどうまく連携できない」という場合は「Personal」でも連携できますので試してみてください。

デフォルトでは4 × 5の20枚表示になっています。20枚の表示は埋め込むには多いし、Instagramの基本レイアウトを考えると3列表示にしたいですよね。

フィードレイアウトをクリックして編集ページを開きます。

ここでは3 × 3の9枚表示にしてみました。PC、タブレット、モバイルで表示を変えられますので自由に設定してください。

タイムラインの背景色を変更できます。

僕としてはここでは変更せず「テーマから選ぶ」に設定しておき、埋め込み場所の方で背景色を変更するやり方がおすすめです。

ヘッダーとはタイムラインの上に表示されるアカウント名のことです。

けっこう大きくて邪魔なので無効化させておきましょう。

解像度の変更ができますが「自動検出（推奨）」のままでOKです。

ボタンに表示させるテキスト、ボタンの色、マウスカーソルを乗せたときの色を変更できます。

もっと見る場合はサイトで読み込むよりも、Instagram側を開かせたいので「無効化」がおすすめです。

「もっと見るボタン」同様にフォローボタンに表示させるテキスト、ボタンの色、マウスカーソルを乗せたときの色を変更できます。

僕は多くの場合で非表示にさせますが、Instagramを開かず直接フォローさせられるメリットはありますのでお好みで。

ライトボックスとは画像をポップアップで拡大表示させられる機能ですが、Pro版限定となっています。

フッター用とレイアウトを使い分けることもできますので複製しましょう。

同様にレイアウトなどのデザインを設定します。完了したら保存してショートコードをコピー。

ここではサンプルとして以下のように設定してみます。SWELL限定の設定箇所もありますのでご自身のサイトのテーマに合わせて設定してください。

• トップページに「フルワイドブロック」を挿入
• フルワイドブロック内に「カスタムHTMLブロック」を挿入してショートコードをペースト
• フルワイドブロックの表示幅を「全幅」に設定
• 表示枚数が多いのでPC限定で表示させるよう「デバイス制限」を「PCのみ」に設定

サイトを確認して表示されていればOK。

画面サイズ横いっぱいに9枚の画像が横並びで表示されるようにしました。画像同士の隙間は0にしています。