WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
Plug-in `` Instagram Feed (Smash Balloon Social Photo Feed) '' that allows you to display photos posted on Instagram with Wordpress in the post text etc.

インスタグラムへ投稿した写真などを投稿本文などへ表示できるようになるプラグイン「Instagram Feed(Smash Balloon Social Photo Feed)」

公開日: コンテンツ追加



モバイルデバイスを持っていない私には不要なプラグインなので紹介していませんでしたが、

で書いたようにパソコンからインスタグラムが使えるGoogle Chrome拡張機能があったので、早速インスタに登録してWordpressへ写真の一覧を挿入してみるのに使ったプラグインです。

※以前は「Instagram Feed」という名前で配布されていて、この名前でググるとたくさんの紹介記事が出てきますが、現在のプラグイン名は「Smash Balloon Social Photo Feed」となっているようです。

【Instagram Feed(Smash Balloon Social Photo Feed)】プラグインの用途や機能

プラグイン名の通りインスタグラムの埋め込みに特化したプラグインで

  • ショートコードで簡単にインスタの写真を投稿本文などへ表示することができる
  • インスタグラムとの連携が簡単ですぐに設定でき

のが特徴です。動画の表示やカルーセル(スライダー)表示、デザインの細かな変更などは有料版でしか実現できませんが、とりあえずインスタグラムの画像を並べて表示したい場合には有効なプラグインです。何より設定が簡単なのが最大の魅力です。

この紹介記事を最後に編集したときの環境・バージョンなど

プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までにこの記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。

プラグインを使用(試用)したテスト環境

  • テストサーバー:カラフルボックスインスタグラムへ投稿した写真などを投稿本文などへ表示できるようになるプラグイン「Instagram Feed(Smash Balloon Social Photo Feed)」の画像|Knowledge Base
  • WordPressのバージョン:5.2.3
  • PHPのバージョン:7.3.11
  • テーマ:ha-Basic(オリジナルテーマ)
  • プラグインのバージョン:記事更新時のバージョン 1.12.2/最新バージョン 2.5.3

本記事を参考にWordpressサイトへプラグインの導入を検討される方へ

Wordpressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。さらにWordpressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。そしてWordpress本体同様にプラグインについてもさまざまなバージョンが存在します。本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
  • テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
  • ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能などが異なる場合があります。※また、ページによってはテスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
  • プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
  • このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
  • プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)

【Instagram Feed(Smash Balloon Social Photo Feed)】プラグインの設定画面や表示の日本語化と翻訳

当サイトで私が翻訳した【Instagram Feed(Smash Balloon Social Photo Feed)】プラグインの日本語化ファイルを配布しています。翻訳ファイルについての詳しい説明は


をご覧ください。

※翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。

【Instagram Feed(Smash Balloon Social Photo Feed)】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

を参照ください

基本的な設定方法や使い方

Instagramアカウントと連携させて、表示したいところに[instagram-feed]というショートコードを挿入するだけで画像の一覧が表示されるようになります。
※パラメーターを設定することで表示件数や画像の表示列数などを指定して表示することもできます

Instagramアカウントとの連携方法

え?これでいいの?という位簡単にできます。スクリーンショットを交えて設定方法を紹介しておきます。

プラグインを有効化すると管理画面の左メニューにInstagram Feedというリンクが追加されますのでクリックして設定画面に移動します。


上図のような画面で赤枠のボタンをクリックします

インスタグラムにログインする画面が表示されますのでログインすると以下の画面が表示されます

赤枠のボタンをクリックすると、前の画面に戻ります


上図の赤枠のように自身のインスタグラムの情報が表示されれば連携完了です。

【Instagram Feed(Smash Balloon Social Photo Feed)】の表示例

無料版でできるのはこのレイアウトのみです(有料版ではさらに違った表示方法が選択できるようです)


いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)
インプレス
大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!ソーシャルメディアとの連携やSEO対策、バックアップなどの運用面も丁寧に解説。
※表示している価格は単行本のものです
参考価格:1,738
※参考価格です。サービスやショップ、掲載時期などにより価格は異なりますのでご注意ください

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】