WordPressプラグインでインスタグラム写真を埋め込み「Smash Balloon Social Photo Feed」

スポンサーリンク
スポンサーリンク

Smash Balloon Social Photo Feed

WordPressとインスタグラムを連携して、写真ギャラリーをサイトに埋め込むことができるプラグイン「Smash Balloon Social Photo Feed」をご紹介します。

自分のインスタグラム写真をWordPressに表示させるなら、インスタグラムギャラリーの埋め込みプラグインを使う方法が一番簡単です。

今回紹介する Smash Balloon Social Photo Feed は、ギャラリーのややこしい設定はすべてプラグイン任せでOK、埋め込みコードをコピペするだけで設置可能です。

また、様々な機能が強化された有料版「Instagram Feed Pro」を使うと、レイアウトの変更やハッシュタグを使った写真表示、カルーセル表示機能などが使えるようになります。

なお、このプラグインは以前「instagram feed」という名称でしたが、今は「Smash Balloon Social Photo Feed」に変更されています。プラグイン検索で「instagram feed」と入力すると、名称変更後のプラグインが見つかるので間違わないように注意してください。

WordPress以外のサイトにインスタグラム写真ギャラリーを埋め込む場合は、Instagram API と instafeed.jsを使うという方法もあります。以下の記事を参照してください。

インスタグラム画像ギャラリーをホームページやブログに設置する(API利用)
Instagram API と instafeed.jsを使って、インスタグラム(Instagram)の画像ギャラリーをホームページやブログに設置してみました。オプションを指定することで、表示枚数やタグの選択、キャプションの表示などが可能です。
スポンサーリンク

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」という似たプラグインが一緒に出てくるのでお間違いなく。「今すぐインストール」→「有効化」します。

Smash Balloon Social Photo Feed 有効化

インスタグラムとWordPressを連携させる

インストール後に左メニューの「Instagram Feed」から設定を表示させて、インスタグラムのアカウントと連携するボタン「Connect an Instagram Account」をクリックします。

Smash Balloon Social Photo Feed 設定

ユーザーネームとパスワードを入力して、インスタグラムにログインしてください。

Instagram ログイン

連携済みのインスタグラムアカウントが表示されました。これで準備はOKです。

Smash Balloon Social Photo Feed アカウント接続

以前はインスタグラムのアクセストークンとユーザーIDを入力する必要がありましたが、今はプラグインが自動で設定してくれます。

他の設定項目ですが、「Preserve settings when plugin is removed」にチェックを入れると、プラグインを削除しても連携設定はそのまま残るので、ギャラリーを一時停止する場合に便利です。

「Check for new posts every」は、新規投稿をチェックする間隔です。更新間隔の単位は分、時、日を指定できます。最後に「変更を保存」してください。

Smash Balloon Social Photo Feed 設定

インスタグラムギャラリー埋め込み

続いてInstagramギャラリーをWordPressに埋め込みます。やり方はとても簡単、ギャラリーを埋め込みたい固定ページ又は投稿ページにショートコードをコピペするだけです。

ショートコードは設定の下の方、もしくは上のタブ「3. Display your Feed」にあります。

Smash Balloon Social Photo Feed ショートコード

Instagramフィード ショートコード

まずは編集中の投稿か固定ページに、一番シンプルなショートコード[instagram-feed]をテキストモードで貼り付けてみて下さい。

[instagram-feed]

Smash Balloon Social Photo Feed ショートコード貼り付け

これだけでインスタグラムギャラリーが埋め込まれて写真が表示されるようになります。

Instagram 写真ギャラリー

ギャラリー下の「Load More..」をクリックすると、さらに写真が表示され、「Follow on Instagram」からは、そのユーザーのインスタグラムページに移動することができます。

もしくは、テーマに直接ショートコードを貼り付けます。「外観」→「テーマエディター」に進んで、写真ギャラリーを表示したい場所に以下のPHPコードを追加します。

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

以上、プラグインをインストールしてから、WordPressと連携してインスタグラム写真ギャラリーを埋め込むまで、たったの数分程度で作業が完了しました。

Instagram Feed カスタマイズ

Smash Balloon Social Photo Feedは、一列あたりの表示枚数や写真の表示順序などのカスタマイズが可能で、「2. Customize」タブに各種設定項目があります。

Instagram Feed カスタマイズ

General
フィードの横幅、縦幅、背景色を変更します。幅はピクセルか%のどちらでも設定可能です。

Width of Feed: フィードの横幅
Height of Feed: フィードの縦幅
Background Color: フィードの背景色

Instagram Feed General

Layout
フィードのレイアウトを設定します。

Layout Type: 有料版のInstagram Feed Proにすると変更可
Number of Photos: 写真の総表示枚数
Number of Columns: 横一列あたりの写真数
Padding around Images: 写真の間隔
Disable mobile layout: モバイルレイアウトに変更

Instagram Feed Layout

Disable mobile layoutにチェックを入れると、スマホとPCが同じスタイルになるので、フィードの写真を一覧できるようになります。左はチェックあり、右はチェックなしです。

Instagram Feed モバイルレイアウト

カスタマイズの一例として、Number of Photosは30、Number of Columnsは6、Padding around Imagesは2px、Background Colorは青に設定してみました。

Instagram Feed カスタマイズ例

Photos
写真の並び順と大きさを変更します。

Sort Photos By: 最新版から順に表示かランダムかを選択
Image Resolution: 写真サイズを選択

Instagram Feed Photos

Header
フィード上部のヘッダー表示に関する設定です。

Show Feed Header: ヘッダーの表示か非表示を選択
Header Size: ヘッダーサイズを選択
Show Bio Text: アカウント紹介文の表示か非表示
Header Text Color: ヘッダーの色を変更

Instagram Feed Header

あとは「’Load More’ Button」と「’Follow’ Button」でボタンの各種設定、「Misc」でカスタムCSSやJavaScriptを記載したり、キャッシュの設定ができます。

ショートコード

Smash Balloon Social Photo Feedは、ショートコード内に別途コードを追記することで、様々なカスタマイズが可能です。

Instagram Feed ショートコード

「3. Display Your Feed」内にオプション一覧が掲載されています。ピンクの欄は有料版の「Instagram Feed Pro」のみ設定可能な項目です。

Instagram Feed ショートコード

あとはギャラリーを埋め込みたい固定ページ又は投稿ページに、ショートコードを貼り付けてください。テーマ内のPHPファイルからショートコードを呼び出すときは、以下のようにコードを記述すればOKです。

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

ショートコードのカスタマイズは、複数表示のフィードをそれぞれカスタマイズするような場合に使うと便利ですよ。

有料版 Instagram Feed Pro

Smash Balloon Social Photo Feedには、49ドルから使える有料版「Instagram Feed Pro」もあります。

Instagram Feed WordPress Plugin

こちらを購入すると、レイアウトの変更やハッシュタグを使った写真表示、フィード内写真の情報やキャプション追加、カルーセル表示機能などが使えるようになります。

Instagram Feed Pro

さらなるカスタマイズをお望みの方は、Instagram Feed Proも検討してみてください。

インスタグラム写真埋め込みはプラグインで

以上、Smash Balloon Social Photo Feedの使い方をご紹介しました。

以前にInstagram API と instafeed.jsを使って、インスタグラム写真を埋め込む方法を紹介しましたが、WordPressの場合はプラグインを使うと簡単に設置できます。

手軽に使えてフィードの各種設定も可能です。WordPressにインスタグラム写真ギャラリーを埋め込むなら、ぜひ「Smash Balloon Social Photo Feed」を使ってみてください。

タイトルとURLをコピーしました