【WordPress】ワードプレスブログで超簡単にInstagramのフィードを表示するプラグイン「Smash Balloon Social Photo Feed」の設定方法を解説

【WordPress】ワードプレスブログで超簡単にInstagramのフィードを表示するプラグイン「Smash Balloon Social Photo Feed」の設定方法を解説

こんな感じでWordPressサイトの本文やサイドバーやフッターにInstagramのフィードを表示させる方法をお探しの方におススメの記事です。

この記事で解決できること
  • Instagramに投稿した写真のフィードをWordPressサイトに埋め込みたい。
  • サイトに訪問したユーザーにInstagramの写真を見てもらいたい。

WordPressサイトやブログを運営していて、Instagram(インスタグラム)に写真を投稿している方は、このように考えたことはありませんか?この記事では、Instagramのフィード(タイムライン)をWebページやウィジェット(サイドバー・フッター)に表示させる事ができるプラグイン「 Smash Balloon Social Photo Feed 」を紹介します。

Instagramのフィード表示プラグイン「Smash Balloon Social Photo Feed」

Instagramのフィード表示プラグイン「 Smash Balloon Social Photo Feed 」を使うと、ショートコードを貼るだけで、Instagramのフィードを簡単に表示させる事ができます。

■Smash Balloon Social Photo Feedの特徴

Smash Balloon Social Photo Feedの特徴は下記のとおりです。
  • ショートコードを貼るだけで表示可能
  • 表示させる写真の枚数を指定可能
  • 写真表示の「列」の指定可能
  • 写真のサイズの指定可能

シンプル操作で誰でも簡単に設定できます。

プラグイン『Smash Balloon Social Photo Feed』の設定手順

Instagramのフィード表示プラグインSmash Balloon Social Photo Feedの設定手順を解説します。

ステップ①~④で簡単に登録できます
  • ステップ①:プラグインのインストール
  • ステップ②:プラグインとInstagramアカウントを接続
  • ステップ③:フィードを表示させるショートコードを取得
  • ステップ④:表示させたい場所にショートコードを貼り付ける

ステップ①:プラグインのインストール

まずはプラグインをインストールします。

ダッシュボード>プラグイン>新規追加 を選択します。

プラグイン検索窓に「Smash Balloon Social Photo Feed」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。

インストール終了後「有効化」をクリックして、プラグインを有効化します。

左側メニューに、「Instagram Feed」という項目が追加されたことが確認できればOKです。

ステップ②:プラグインとInstagramアカウントを接続

プラグインとInstagramのアカウントを接続します。
ダッシュボード>Instagram Feed を選択します。

「Configure」の[Instagramアカウントを接続する]というボタンをクリックします。

Instagramのアカウントにログインするよう求められますので、①メールアドレスと、②パスワードを入力し、③ログインをクリックします。

接続が成功すると、Instagram Feedの設定画面にInstagramアカウントが表示されます。

ステップ③:フィードを表示させるショートコードを取得

Instagramのアカウントを接続したら、Instagramのフィードを表示させることができるショートコードを取得します。

ショートコードは設定画面の下の方にあります。

ちなみに、Instagram Feedの①~④は特に設定しなくてもそのまま使う事ができますが、いくつか設定項目がありますので一応解説しておきます。

各項目の詳細は下記のとおりです。

①どのインスタグラムアカウントのフェードを表示するか選べる。有料版は#やタグなども選択できるらしい。
 
②チェックを入れるとプラグイン削除時の設定が保存され、再インストール時に削除前と同じ設定を引き継ぐことができます。
 
③キャッシュの時間を設定できます。初期設定では1時間です(1時間毎にキャッシュをクリアして更新情報を取得します)。
 
④変更を保存ボタン

ステップ④:表示させたい場所にショートコードを貼り付ける

Instagramフィードを表示させたい場所にショートコードを貼り付けます。

 
  • Webページにフィードを表示する方法(投稿・固定ページ共通)
 

では貼り付け方を解説します。 とても簡単だから安心するんじゃぞ

インスタグラムのフィードを、表示させたいページの編集画面で、取得したショートコードを貼り付け、公開・更新ボタンをクリックします。以上!!簡単でしょう。

◆まずはブログ編集画面でショートコードボタンを選択してください。

◆本文上にショートコードの入力欄が出てきたら プラグイン『Smash Balloon Social Photo Feed』の設定画面で出てきたショートコードをコピー&ペーストしてください。

編集画面ではショートコードだけ表示されるけど安心してください!!

プレビューで確認すると、下図のようにWebページにInstagramのフィードが表示されていることが確認できます。

本文だけでなくウィジェット(サイドバー・フッター)にフィードを表示することもできるよ!!

さいごにまとめ

以上、WordPressサイトにInstagramのフィードを表示するプラグイン Smash Balloon Social Photo Feed(旧称:Instagram Feed)の設定方法を解説しました。

プラグインを使うことで、Instagramに投稿した写真をWordPressサイトに公開することができるようになります。

難しい設定は必要ありませんし、表示のカスタマイズもできますので、Instagramを活用したい方は、是非お試し下さい。

 

投稿者プロフィール

グラフル
はじめましてグラフルと言います。
■会社員/2児パパ■タイプ/コツコツ■好きな言葉/人生は自分のために■料理/学ぶこと/DIY/自己投資■夢/自由なマインドで起業家になる■失敗をバネに現在不自由ない生活を驀進中。
Twitter  https://twitter.com/home
LINE https://lin.ee/qUzKVl6