Instagramの最新のいくつかの写真をWordPressに表示させたいという方におすすめなのが「Instagram Feed（現在はSmash Balloon Social Photo Feedという名称に変更されました）です。
Instagram Feedを使えば、自分のInstagramの投稿を簡単にWordPressに表示させることができます。
今回は初めてSmash Balloon Social Photo Feedを使う方のために、使い方をわかりやすく解説していきます。
もくじ
プラグインは、スマートフォンのアプリのように、好きな機能をWordPress本体に組み込むことができる機能です。プラグインは便利ですが、古いプラグインや、ご利用のテーマやプラグインの組み合わせによっては競合して、不具合を起こす場合もあります。
そのため、WordPressのバックアップを取った上自己責任で実施をお願いいたします。
Instagram Feed(Smash Balloon Social Photo Feed）とは
Instagram Feed（Smash Balloon Social Photo Feed）は、WordPressのサイト内にインスタグラムフィードを埋め込むことができるプラグインです。
インスタグラムのアカウントとの連携を簡単にできて、ショートコードを入力すれば、投稿した場所にインスタグラムの投稿を表示できます。
サムネイルの位置も調整できるので便利です。
Smash Balloon Social Photo Feedのインストール・有効化
WordPressの管理画面でプラグイン＞新規追加をクリックします。
プラグインの新規追加画面で、「instagram feed」と検索すると、Smash Balloon Social Photo Feedと出てくるので、インストールします。
プラグインをインストールまたはアップロードしたら有効化します。
Smash Balloon Social Photo Feedの使い方基本
インスタグラムアカウントに接続する
インスタグラムのフィードを出すには、まず表示させたい対象のインスタグラムアカウントに接続(ログイン)する必要があります。
ダッシュボードから、Instagram Feed ＞ Settingsをクリックしましょう。
Instagram Feedの部分をクリックしたら、以下の画面が出てきます。青いバナーをクリックすればアカウントと紐付けることができます。
アカウントタイプを選択して接続します(通常はPersonal)。
ログイン画面が表示されたらログインしましょう。
接続を許可します。
Connect This Accountを選択します。
紐付けされたら「Succcesfully connected」と出てきます。
以上でアカウントの接続設定は完了です。引き続きインスタグラムのフィードを表示させる方法をご紹介していきます。
インスタグラムフィードを表示させる
ここでは、任意のページ(固定ページまたは投稿)にインスタグラムのフィードを出してみましょう。
任意の固定ページ（または投稿)の編集画面を開いて、ブロックを追加します。
ショートコードブロックを追加します。
ショートコードで［instagram-feed]のタグを貼り付けます。
正しく貼り付けられたら、以下のようにInstagramが表示されます。
ウィッジェットを利用してサイドバーまたはフッターに貼り付ける
WordPressのウィジェットを利用してサイドバーまたはフッターに貼り付けることもできます。
外観＞ウィジェットを選択します。
ここではサイトバーにテキストウィジェットを設定して、[instagram-feed]のショートコードを貼り付けて保存します。
表示を確認すると、インスタグラムフィードが表示されたことが確認できました。
初期の表示設定のカスタマイズ
初期の表示設定はInstagram feedの設定ページから設定できます。
Instagram feed ＞ Settingを選択します。
Customizeタブを選択します。
初期状態のままでも構いませんが、変更したい場合は画像の幅、高さ、背景色、枚数、列数、画像の間隔など変更して保存をクリックします。
ショートコードで表示内容を設定する方法
先ほどショートコードを利用してインスタグラムのフィールドを表示する方法をご紹介しましたが、ショートコードにオプションを追記することでいろいろな表示にカスタマイズできます。
Instagram feed ＞ Settingを選択します。
Display your feedタブを選択します。
ここでは無料版で使えるショートコードについて説明していきます。ピンク色の部分がpro版になりますので、pro版以外の部分を解説していきます。
Customize Optionsの設定
- width・・・投稿表示の幅を設定
- withunit・・・投稿表示の幅を「pix または％」で設定
- height・・・投稿表示の高さを「値」で設定
- heightunit・・・投稿表示の高さを「pix または％」で設定
- background・・・投稿表示の背景色をカラーコードで設定
- class・・・CSSクラスを追加できる。CSSでオリジナルの装飾ができる
1.のショートコード、［instgram-feed width=50］で設定すると、以下のようなレイアウトになります。
Layout Optionsの設定
- num・・・表示する画像の枚数を設定
- cols・・・フィードに表示するコラム数
- imagepadding・・・画像の余白を数値で設定
- imagepaddingunit・・・画像の余白をpxか％で設定
1. の[instagram-feed num=10]のショートコードを使って、Instagram Feedに表示する画像の枚数を10枚に設定しました。
Follow on Instagram Button Optionsの設定
InstagramのFollowボタンをカスタマイズすることもできます。
- showbutton・・・「Follow on Instagram」ボタンを表示するかしないか。表示する場合はtrue、表示しない場合はfalseで設定
- buttoncolor・・・ボタンの文字の色をカラーコードで設定
- buttontextcolor・・・ボタンの文字色をカラーコードで設定
- buttontext・・・ボタンの文字を設定
4.のショートコード、[instagram-feed followtext="webst8"]を使って、Follow meの文字をwebst8に変更しました。
上記以外にも色々と設定がありますが、今回は代表的なショートコードを説明しました。
インスタグラムフィードで複数アカウントを表示する方法
Instagram Feedの画面から複数のアカウントを表示・選択することができます。
青い接続ボタンをクリックします。
アカウントタイプを選択して接続します(通常はPersonal)。
ログイン画面が表示されたらログインしましょう。
接続を許可します。
Connect This Accountを選択します。
新たなInstagramアカウントに接続されました。
アカウントを複数追加した場合、ショートコード[instagram-feed user="ユーザーID"]と指定することで、どのアカウントを表示させるか指定することができます。
まとめ
まとめです。今回は、WordPressに簡単にインスタの埋め込みができるInstagram Feedのプラグイン「Smash Balloon Social Photo Feed」について説明しました。
Smash Balloon Social Photo FeedはWordPressとの連携がスムーズで、ショートコードを利用して簡単にインスタグラムのフィードを好きな場所に表示させることができます。。
自分のサイトとInstagramの連携を強化したい人はぜひ導入を検討してみてくださいね。
今回は以上になります。最後までご覧いただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
