WordPressとInstagramを接続して、ホームページやブログにInstagramフィードを埋め込むことができるプラグイン「Smash Balloon Social Photo Feed」の使い方をご紹介します。
プラグインの設定は簡単で、WordPressからInstagramに接続してサイトにフィードを埋め込むまで、5分ほどで作業が完了します。
このプラグインは無料で使える「Instagram Feed Lite」と、ストーリーズを表示させたり、フォロワー数を表示できる有料のPRO版がありますが、無料版でも十分に使えます。
Smash Balloon Social Photo Feed とは
Smash Balloon Social Photo Feed は、WordPressとInstagramを接続して、サイトの好きな場所にフィードを表示させることができるプラグインです。
設定はとても簡単で、フィード設定はすべてプラグイン任せでOK、埋め込みコードをコピペするだけで設置可能です。
使いやすくて簡単に設定できるので、プラグインの評価は高く、レーティングは星5つです。
また、様々な機能が強化された有料版「Instagram Feed Pro」を使うと、レイアウトの変更やハッシュタグを使った写真表示、カルーセル表示機能などが使えるようになります。
なお、このプラグインは以前「instagram feed」という名称でしたが、今は「Smash Balloon Social Photo Feed」に変更されているので、間違えないように注意してください。
Smash Balloon Social Photo Feedのインストール
では、さっそくSmash Balloon Social Photo Feedをインストールしてみましょう。
まずはダッシュボードの左メニューから「プラグイン」→「新規追加」へ進み、検索窓から「Smash Balloon Social Photo Feed」と入力してください。
検索結果には「Smash Balloon Social Post Feed」という似たプラグインが出てきますが、こちらはFacebook用なのでお間違いなく。
プラグインを「今すぐインストール」→「有効化」して、設定に進みます。
Smash Balloon Social Photo Feedの設定
インストール後に左メニューから「Instagram Feed」をクリックすると、初期設定の画面が表示されます。
Instagramとの連携はとても簡単で、以下の３ステップで設定完了です。
- Instagram アカウントに接続し、フィード形式を選択
- レイアウト、配色、スタイルなどを選択して、フィード形式をカスタマイズ
- ウェブサイトやブログにフィードを埋め込む
「新規追加」をクリックして、Instagram Feedの設定に進みます。
Instagramアカウントの選択
まずは「Instagramフィードを作成」から、Instagramアカウントに接続するための設定を行います。「ユーザータイムライン」を選んで「次へ」進みます。拡張フィードはPROにアップグレードすると使えます。
次にソースを選択します。ソースとはフィードにコンテンツが表示されるInstagramアカウントのことです。「ソースを追加」をクリックしてください。
connect.smashballoon.comへリダイレクトされるので、少し待ちましょう。
Instagramに接続する
Smash BalloonのConnect to Instagram（Instagram接続）ページに移動しました。ここでInstagramアカウントに接続するための設定を行います。
まずはSelect Account Typeで、Instagramアカウントの種類「Personal」か「Business」を選びます。
次に「Login with Instagram」ボタンをクリックして、Instagramアカウントに接続します。告知が不要なら「Receive our Get Started emails」のチェックを外しましょう。
Instagramのログインページに移動するので、そのままログインしてください。
Smash BalloonとInstagramの接続を許可します。
「Smash Balloon Social Personalは、”アカウント名”に関する以下の情報をリクエストしています:」と表示されるので「許可する」をクリックします。
セキュリティの確認画面です。Instagramアカウントに接続するドメインが正しければ「Yes, it is my domain」をクリックします。
フィードのレイアウトとカスタマイズ
Smash BalloonとInstagramを接続したら、フィードのレイアウトとカスタマイズに進みましょう。
ふたたび「Instagramフィードを作成」に戻りました。「1つ以上のソースを選択」から、先ほど接続したInstagramアカウントにチェックを入れて「次へ」進みます。
しばらく待つと、フィードのカスタマイズと設定画面に移ります。ガイドが表示されるので確認してください。
フィードを埋め込み
フィードのカスタマイズが完了したら、ここをクリックしてフィード埋め込み用のコードを取得します。
カスタマイズ
フィードのレイアウトや配色を変更したり、個々のフィードセクションをカスタマイズします。
設定
フィードのソースを更新したり、投稿をフィルタリングしたり、詳細設定を変更します。
Instagramフィード埋め込み
この時点で設定は完了しています。レイアウトや配色など、フィードのデザインにこだわりがなければ、すぐWordPressにInstagramフィードを埋め込むことが可能です。
Instagramフィードの埋め込みはとても簡単、WordPressの固定ページ又は投稿ページにショートコードをコピペするか、ブロックかウィジェットにショートコードを追加するだけです。
埋め込み用ショートコード作成
ショートコードの作成ですが、まず右上の「＜/＞ 埋め込み」をクリックします。
「埋め込みフィード」から、以下の方法でショートコードを追加できます。
- 任意のページ、投稿、またはウィジェットにショートコードを追加
- WordPress のブロックかウィジェットを使用
ショートコードを追加してInstagramフィード表示
次に、ショートコードをコピーします。
編集中の投稿か固定ページに、コピーしたショートコード［instagram-feed feed=1］をテキストモードで貼り付けてみて下さい。
[instagram-feed feed=1]
ブロックエディタの場合は「カスタムHTML」を選んで、ショートコードを貼り付けます。
これでInstagramフィードが埋め込まれて写真が表示されるようになります。
以上、Smash Balloon Social Photo Feedをインストールしてから、WordPressに接続してInstagram写真フィードを埋め込むまで、たったの数分程度で作業が完了しました。
フィード下の「Load More..」をクリックすると、さらに写真が表示され、「Follow on Instagram」からは、そのユーザーのInstagramページに移動することができます。
あとは1列あたりの表示写真数を変更したり、ヘッダーにアイコン画像やプロフィールを入れるなど、フィードのデザインをカスタマイズするのもよいでしょう。
テーマに直接ショートコードを追加
WordPressのテーマに直接ショートコードを貼り付けることもできます。
ダッシュボードから「外観」→「テーマエディター」に進んで、Instagramフィードを表示したい場所に以下のPHPコードを追加します。
<?php echo do_shortcode('[instagram-feed feed=1]'); ?>フィードのカスタマイズ
Smash Balloon Social Photo Feedは、左のメニューでフィードのカスタマイズや設定を行いながら、プレビューで表示を確認することができます。
プレビューのアイコンをクリックすると、PC、タブレット、スマホのプレビューを確認できます。
フィードレイアウト
「フィードレイアウト」では、投稿数や一列あたり表示枚数などのカスタマイズが可能です。
開くと各項目が表示されるので、レイアウトや投稿数、列などを設定していきましょう。
レイアウト
無料版のレイアウトはグリッドのみ選択できます。カルーセル、レンガ状、ハイライトはPRO版にアップグレードする必要があります。
フィードの高さ
フィードの高さをピクセル単位で指定します。
余白
フィード内に並んだ写真間の余白をピクセル単位で設定します。
投稿数
フィードに表示する投稿数を、デスクトップとモバイル別々に設定できます。中途半端な表示を避けるため、投稿数は列の表示数の倍数にするとよいでしょう。
列
フィードの列に並ぶ投稿数を、デスクトップ、タブレット、モバイル別々に設定できます。初期値は4,2,1ですが、モバイルで表示される画像が大きいので4,4,2に設定しました。
フィードの配色
「配色」で、フィードの配色やボタンの色を変更できます。
配色は以下の4種から選べます。ウェブサイトやブログの背景色に合わせて変更しましょう。
- テーマから継承
- ライトカラー
- ダークカラー
- カスタム
一番下の「カスタム」を選ぶと、フィードの配色、ボタン2つの色をカスタムパレットから自由に選ぶことができます。
フィードカスタマイズの例
カスタマイズの一例として、投稿数は30、列は6、余白は2px、配色をカスタムにして、背景色を青に設定してみました。
フィードのヘッダー
次はフィード上部のヘッダーをカスタマイズしましょう。
ヘッダーを有効にすると、フィード上部にInstagramアカウント名やプロフィールを表示させることができます。
ヘッダーサイズ
ヘッダーサイズを小、中、大から選択できます。
カスタムアバターを使う
Instagramアカウント名の左側にあるアイコン内の画像を選択できます。
テキスト
Instagramアカウント名やプロフィールの文字色を選べます。
プロフィールを表示
テキストを入力すると、アカウント名の下に説明やプロフィールを表示できます。
スクロール可能な領域の外側を表示
背景色をスクロール可能な範囲だけにします。通常はオフでよいでしょう。
高度な設定
Instagram FeedのPRO版のみ設定できる項目です。ヘッダーからInstagramのストーリーズを表示させたり、フォロワー数を表示させることができます。
投稿
ここはPRO版のみ、キャプションなどの設定項目があります。「画像と動画」のResolution（画像の解像度）は、「自動検出（推奨）」のままでOKです。
もっと見るボタンとフォローボタン
フィードの一番下にある「Read More」と「Follow on Instagram」ボタンの設定です。
有効にすると、各ボタンが表示されます。
テキスト
テキストを入力すると「Load More」と「Follow on Instagram」ボタンの文字を変更できます。
色
ボタンの背景、ホバー状態、テキスト配色を変更します。
無限スクロール
「もっと見るボタン」のみ、PRO版の「高度な設定」があり、フィードの最後で次の投稿を自動で読み込める「無限スクロール」を有効にできます。
あと、ライトボックスもPRO版のみ設定できます。
フィードの設定
フィードの設定は以下の5項目で、通常は変更する必要はありません。ショッピングフィードはPRO版のみ有効で、フィードからショッピングができるようになります。
- ソース
- フィルタと承認
- 並べ替え
- ショッピングフィード
- 高度な設定
「並べ替え」では、表示する投稿を最新またはランダムから選ぶことができます。PRO版にアップグレードすると「いいね」の多い順も選択できます。
Smash Balloon Social Photo Feed 設定
Smash Balloon Social Photo Feedの設定は、ダッシュボード左側のメニューから行います。
General、Feeds、Advancedの3項目があり、プラグインの各種設定、キャッシュの期間、他にカスタムCSSやJavaScriptの設定も可能です。
General 設定
Generalではライセンスキーやソースの管理を行います。
「プラグインが削除されても設定を保持する」をonにすると、プラグインを削除しても連携設定はそのまま残るので、ギャラリーを一時停止する場合に便利です。
フィード設定のインポート、エクスポートもGeneralで設定します。
Feeds 設定
Feedsのキャッシュは新規投稿をチェックする間隔で、1日の投稿が多い場合は更新間隔を短く設定します。キャッシュの時刻を指定して、最後に「変更を保存します。
GDPR (一般データ保護規則) の設定や、カスタムCSS、カスタムJSの設定もここで行います。
Advanced 設定
Advancedでは以下の設定ができます。AJAXやJavaScriptの読み込みといったカスタマイズの他に、エラーの通知やデータの管理もここで行います。
- AJAXテーマの読み込み
- 画像を最適化
- エラーログをリセット
- 使用状況の追跡
- AJAX で最初の投稿を読み込む
- JavaScript ファイルを head で読み込む
- フィードのあるページのみCSS を読み込む
- JavaScript で画像を読み込む
- 管理者エラー通知
- フィードの問題をメールで送信
- データを管理
有料のInstagram Feed Pro版
Smash Balloon Social Photo Feedには、有料版の「Instagram Feed Pro」もあります。
PRO版にアップグレードすると、レイアウトの変更やハッシュタグを使った写真表示、フィード内写真の情報やキャプション追加、カルーセル表示機能などが使えるようになります。
他にも、ストーリーズを表示させたり、フォロワー数の表示といった機能が追加されます。
Instagram Feed PROのプランは、年間49ドルから使える「Personal」から、サイト制限数なし、他のPROプランも使える「All Access Bundle」までの4種です。
| Personal | Business | Developer | All Access Bundle | |
|---|---|---|---|---|
| 価格 | $49/年 | $99/年 | $149/年 | $299/年 |
| サイト数 | 1サイトのみ | 5サイト | 25サイト | サイト数制限なし |
さらなる機能やカスタマイズをお望みの方は、Instagram Feed Proも検討してみてください。
Instagram埋め込みはWordPressプラグインで
以上、Smash Balloon Social Photo Feedの使い方をご紹介しました。
以前にInstagram API と instafeed.jsを使って、Instagram写真を埋め込む方法を紹介しましたが、WordPressの場合はプラグインを使うと簡単に設置できます。
手軽に使えてフィードの各種設定も可能です。InstagramフィードをWordPressに埋め込むなら、ぜひ「Smash Balloon Social Photo Feed」を使ってみてください。
プラグインなしでInstagram埋め込み
WordPress以外のサイトや、プラグインを使わずにInstagramギャラリーを埋め込む場合は、Instagram API と instafeed.jsを使うという方法もあります。
プラグインを使いたくない方は、以下の記事を参照してください。
Instagram埋め込み APIを使ってインスタグラム画像ギャラリーを埋め込む
