プラグイン概要

インスタグラムの投稿を自分のブログやコーポレイトサイトに表示したいという需要は多いと思います。 WordPress のプラグイン Smash Balloon Social Photo Feed を使えば比較的簡単な設定ですばやく自分のインスタグラム投稿をページに表示できるようになります。 レイアウトやボタンの設定などはいろいろとカスタマイズができるので、自分のサイトに合ったテイストで組み込むことが可能だと思います。

このページでは Smash Balloon Social Photo Feed の基本的な使い方を紹介します。

---

インストール方法

まず、WordPress のダッシュボード画面を開きます。

1. ダッシュボード左側のメニューから「プラグイン」を選択します
2. 表示されたメニューから「新規追加」を選択します

1. 表示された検索画面のキーワード欄に「Smash Balloon Social Photo Feed」と入力します
2. 表示された検索結果の Smash Balloon Social Photo Feed の情報を確認します
3. 「今すぐインストール」ボタンをクリックします

1. プラグインのインストールが完了すると「有効化」ボタンが表示されるので、このボタンをクリックします

1. 有効化が完了するとプラグイン一覧が表示されるので「Settings」をクリックします

以上で Smash Balloon Social Photo Feed のインストールが完了し、設定画面が表示されます

---

日本語化

Smash Balloon Social Photo Feed は日本語化されていませんので、インストールしただけでは上記のように英語のメニューになっています。
英語での使用に違和感の無い方はこのまま使用しても問題無いと思います。

日本語で使用したい方は、日本語データを販売していますのでこちらを適用してからご使用ください。

日本語化ファイルを適用すると以下のように日本語メニューで設定等が行えるようになります

これ以降は日本語化後のメニューを使って Smash Balloon Social Photo Feed の使い方説明を行っていきます。

---

Smash Balloon Social Photo Feed の使い方

まずダッシュボードからInstagramフィードの設定を開き、基本的な設定を行っていきます。Instagramアカウントを持っていることが前提ですので、まだInstagramアカウントをお持ちでない方は予め作成しておいてください

1. Instagramフィードを選択します
2. 「Instagramアカウントを接続する」ボタンをクリックします

このポップアップは翻訳できない部分なので英語で表示されます。

1. 連携したいアカウントが個人アカウントかビジネスアカウントかを選択します。普通にアカウントを作っただけでしたら個人アカウントですので「Personal」を選択、個人アカウントからビジネスアカウントに昇格させた場合は「Bussiness」にチェックをつけます
2. ConnectボタンをクリックしてInstagramアカウントと連携します

Instagramのログイン画面が表示されます

1. Instagramアカウントのメールアドレス、ユーザーネーム、電話番号等を入力します
2. パスワードを入力します
3. ログインボタンをクリックします

1. ログイン情報を保存する場合は「情報を保存」、保存しない場合は「後で」をクリックします

この画面は、プラグインがInstagramの情報を使用しても良いですよ、という許可を確認するためのポップアップです。

1. プラグインがInstagramアカウントに対してできる処理が記述されていますので、内容を確認します
2. 問題なければ「承認」ボタンをクリックします

WordPressの設定画面に戻り、最終的な接続確認の表示が出てきます

1. Instagramアカウントのユーザ名を確認してから「このアカウントを接続する」をクリックします

1. Instagramアカウントが表示されていることを確認します

アカウントが連携できたらもうInstagramフィードが表示できる状態になっているので、諸々の設定は後にして表示してみます

1. 「フィードを表示する」タブをクリックして設定を表示します
2. この部分のショートコードと呼ばれるテキストをコピーして投稿に貼り付けます

1. 記事の文章として先ほどコピーしたショートコードを記述します
2. プレビューボタンをクリックして記事のプレビューページを表示させます

1. 設定で連携したInstagramアカウントのフィードが記事中に表示されているのを確認します

ショートコードにパラメタを書き込むことによってフィードのレイアウトを変更することができます

1. num=10 と記述するとフィード内の写真の数を10個とします
2. cols=5 と記述するとフィード内の列の数を5個とします

1. 例えばショートコードに [instagram-feed num=6 cols=3] と記述してみます
2. プレビューボタンをクリックして記事のプレビューページを表示させます

1. ショートコードを [instagram-feed num=6 cols=3] にしたら無事に 3×2=6 のフィードが表示されました

他にもいろいろな設定が用意されていて比較的簡単に指定できますので、いろいろといじって自分のサイトにあうレイアウトなどを見つけてみると良いと思います

以上で Smash Balloon Social Photo Feed の使い方の解説は終了です。

Smash Balloon Social Photo Feed の日本語化はこちらをご確認ください。