InstagramフィードをWordPressに表示させるプラグイン

エミ

「Smash Balloon Social Photo Feed」を使うと簡単にインスタグラムのフィードをウィジットなどに表示できます！

WordPressプラグイン「Smash Balloon Social Photo Feed」でできること

Smash Balloon Social Photo Feedはインスタグラムの投稿を自動で表示してくれるプラグインです。

オプションで表示項目を調節できるので、サイトのデザインに合わせてフィードを表示させることができます。

※プラグイン設定時にインスタグラムのアカウント情報が必要です。

インスタグラムの表示手順〜Smash Balloon Social Photo Feedの設定〜

プラグインのインストール

管理画面のプラグイン＞新規追加から、Smash Balloon Social Photo Feedをインストールし、有効化します。

Instagramアカウントと連携

管理画面のサイドバーに「Instagram Feed」が追加されるので、設定を開きます。

設定画面の「Instagramアカウントを連携する」ボタンをクリックします。

ブラウザでSmash Ballonのサイトが開きますので、Connectボタンを押します。

Instagramのアカウントのメールアドレス／パスワードを入力しログインします。（すみません、画像はないです。）

許可するを押します。

WordPressの管理画面に戻りますので、アカウントを接続するボタンを押します。

インスタグラムアカウントと連携できました。

Instagramフィードを表示させる

投稿／固定ページに表示する場合には、ブロック＞Instagram Feedを選びます。

サイドバーやフッターに表示する場合には、ウィジットでInstagram Feedを選択します。

ウィジットが追加されたところ

instagram-feedがフィードを表示するショートコードなので、削除しちゃうとウィジットの表示がされません。

ページでの表示

オプションで、Instagramフィードの表示レイアウトを変更する

オプションを設定すると、フィードに表示する内容やレイアウトを変更できます。

Instagram Feed＞設定の「3.フィードの表示」のタブでオプションが確認できます。

投稿／固定ページの場合には右側のショートコード設定にオプションを入れて、「変更を適用」ボタンを押すとと表示のレイアウトを変更できます。

ウィジットの場合は、instagram-feedの後にオプションを追記していきます。

下記のように、フッターに一列横長で表示させても可愛いかもしれません。

[instagram-feed imageres=full num=8 cols=8 imagepadding=0 showheader=false showbutton=false showfollow=false]

※numとcolsの数を揃えることで1列表示にしています

Smash Balloon Social Photo FeedでInstagramフィードを簡単表示

以上、Instagramのフィードを簡単に表示できるWordPressプラグイン「Smash Balloon Social Photo Feed」の設定方法でした。

こまやかにレイアウトを変更できるので、WordPressサイトに合わせたInstagramフィードを表示できるのでオススメです。