【WordPress】インスタグラムのタイムラインを表示できるSmash Balloon Social Photo Feedの使い方

WordPressでインスタグラムのタイムラインってどうやって表示させるの？

WordPress以外でインスタグラムのタイムラインを表示させようとすると非常に大変なのですが、WordPressではプラグインを使えば簡単に表示させることが出来ます。

今回はその便利なプラグイン、Smash Balloon Social Photo Feedの使い方をご紹介します。

効率よくWordPress制作したい人はこちら

WordPressでインスタグラムのタイムラインを表示する方法

WordPressでインスタグラムのタイムラインを表示させるには、Smash Balloon Social Photo Feedというプラグインを使います。

Smash Balloon Social Photo Feedは何度か名前が変わっていて、私の知る限り

と変わっています。

なので「インスタグラム タイムライン」で検索してヒットする Instagram Feed の記事はこの Smash Balloon Social Photo Feed の事だと思って下さい。

Smash Balloon Social Photo Feedの使い方

それでは早速使い方を以下の順番で解説していきます。

プラグインをインストール～有効化

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

プラグインのインストールが初めての方は以下の記事を参照下さい。

【WordPress】プラグインのインストール方法

すると管理画面左のメニューに追加されたのが分かります。

ここで設定をクリックするとこちらが表示されます。

ここから設定をしていきます。

インスタグラムのアカウントと連携する（紐付ける）

連携するというと難しく聞こえるかも知れませんが、簡単に出来ます。

まずは設定画面からGeneral → ソースを管理のソースを追加をクリックします。

ソースを追加をクリックするとこちらがポップアップされるので、少し待ちます。

そしてこちらに画面が切り替わります。

Select Account Typeは通常はPersonal、インスタグラムがビジネスアカウントであればBusinessを選択します（今回はPersonalで進めていきます）

そしてLogin with Instagramというボタンをクリックするとインスタグラムのログイン画面に切り替わります。

表示されたアカウントで良ければログインボタンをクリック、別のアカウントであれば下のアカウントを切り替えるをクリックします。

するとこちらが表示されます（既にログイン済みの場合は最初からこちらが表示されます）

そして許可するをクリックするとWordPressの設定画面に戻ります。

そしてソースを管理にアカウントが追加されていればOKなので、一旦右上の変更を保存をクリックしておきましょう。

Instagram フィードを作成

次はすべてのフィードを開き、上の新規追加ボタンをクリックします。

こちらの画面に切り替わるので、次へをクリックします。

次の画面で先ほど登録したアカウントが表示されているので、アカウントにチェックを入れてから次へをクリックします。

そして画面が切り替わるので、チュートリアルのような説明文を読んでおきましょう。

最後に終了ボタンをクリックすれば完了です。

タイムラインを表示させる

先ほどの終了ボタンをクリックした後、右上の埋め込みをクリックします（これは「すべてのフィード」の画面です）

そしてこちらがポップアップされるので、コピーをクリックしてショートコードをコピーします。

あとはタイムラインを表示させたいページにショートコードを貼るだけです。

これをHOMEとタイトルを付けたトップページに貼ってみます。

テキストエディタはビジュアルでもテキストでもOKです。

ショートコードを貼ったら右にある更新をクリックします。

するとトップページにタイムラインが表示されます（これはスクショなのでインスタには飛べません）

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

このままでもいいと思いますが、色々とカスタマイズすることも出来ます。

すべてのフィードを開いてアカウントをクリックします。

そしてこちらが表示されるので、カスタマイズと設定でカスタマイズしていきます。

カスタマイズ内容は右側にすぐ反映されるので、設定のたびにページを開いて確認する必要はありません。

それでは1つずつ解説していきます（有料版や変更不要と思われる設定は割愛しています）

フィードレイアウト（カスタマイズ）

フィードレイアウトでは5つの項目を変更出来ます。

レイアウト

これはグリッド、カルーセル、レンガ状、ハイライトから選択できますが、無料版で選択できるのはグリッドのみです。

フィードの高さ

px単位で設定することが出来ます。

デフォルトでは投稿が全部表示されていますが、高さを指定すると指定した高さを超えた分はスクロールしないと見れません。

デフォルトでは20枚表示されますが、20枚表示したいけど一度に全部表示させたくないという場合に有効です。

余白

px単位で設定することが出来ます。

デフォルトは5pxで、大きくするほど投稿間の余白が広くなります（投稿が小さくなる）

50pxにするとこのようになります。

ちなみに0にすると余白はなくなります。

投稿数

これはデスクトップとモバイルで設定を分けることが出来ます（モバイルは480px以下）

デフォルトではどちらも20になっています。

デスクトップでは4列表示でもモバイルでは1列表示にしたい場合、1列で20投稿は多過ぎるかと思うので、モバイルの数は10や5に変更するのもアリかと思います。

列

これは表示させる列の数で、デフォルトでは以下のようになっています。

これはこのままでもいいと思いますが、1〜10の間で変更可能です。

配色（カスタマイズ）

配色では以下の4種類から選択できます。

カスタムのみ、下のボタンの色も変更可能です。

ヘッダー（カスタマイズ）

ヘッダーでカスタマイズ出来るのは以下になります。

ヘッダーサイズ

ヘッダーサイズのデフォルトは「中」で、他には小と大が選択できます。

こちらは「大」にした時になります。

カスタムアバターを使う

これはユーザー名の左のアイコンで、デフォルトでは未設定となっています。

設定するとこのようになります。

テキスト

まずは色ですが、ユーザー名の色を変更できます。

あとは自己紹介の表示はデフォルトではONになってますが、紹介文は未記入なのでデフォルトでは表示されていません。

テキストエリアに文章を書けば以下のようにユーザー名の下に自己紹介文が表示されます。

ヘッダーのスタイル

これは標準、ボックス、中央揃えの3種類ありますが、無料版は標準しか選択できません。

投稿（カスタマイズ）

投稿でカスタマイズ出来るのは以下になります。

画像と動画

これは「デフォルトでは画像の幅を自動検出し、最適な解像度を取得します。」と書いてあり、以下の中から選択できます。

特に理由がない限りデフォルトの自動検出のままでいいかと思います。

もっと見るボタン（カスタマイズ）

これは下にある「Load More」ボタンのカスタマイズになります。

デフォルトでは有効になっていて、以下の項目が変更可能です。

ホバー状態の色もこの画面でカーソルを乗せれば確認できます。

フォローボタン（カスタマイズ）

これはもっと見るボタンの右にあるボタンのカスタマイズになります。

もっと見るボタンと同じでデフォルトでは有効になっていて、以下の項目が変更可能です。

ソース（設定）

これはタイムラインに表示するアカウントを選択または追加する項目になります。

並べ替え（設定）

これは投稿の並び順を変更できる項目で、以下の3つから選択できます。

設定が完了したら右上の保存をクリックしましょう。

テンプレートにショートコードを貼る

先ほどは管理画面から固定ページに直接ショートコードを貼りましたが、オリジナルテーマで作成する場合はテンプレートファイルに貼る事が多いと思います。

その場合のコードは以下のようになります。

<?php echo do_shortcode('[instagram-feed feed=1]'); ?>

これはContact Form 7のショートコードを貼る時と同じですね。

テンプレートファイルはPHPファイルなので、上記のようにしないといけません。

以上になります。

WordPress案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック