モバイルデバイスを持っていない私には不要なプラグインなので紹介していませんでしたが、パソコンからインスタグラムが使えるGoogle Chrome拡張機能があったので、早速インスタに登録してWordPressへ写真の一覧を挿入してみるのに使ったプラグインです。
※以前は「Instagram Feed」という名前で配布されていて、この名前でググるとたくさんの紹介記事が出てきますが、現在のプラグイン名は「Smash Balloon Social Photo Feed」となっているようです。
【Instagram Feed(Smash Balloon Social Photo Feed)】プラグインの用途や機能
プラグイン名の通りインスタグラムの埋め込みに特化したプラグインで
- ショートコードで簡単にインスタの写真を投稿本文などへ表示することができる
- インスタグラムとの連携が簡単ですぐに設定できる
のが特徴です。動画の表示やカルーセル(スライダー)表示、デザインの細かな変更などは有料版でしか実現できませんが、とりあえずインスタグラムの画像を並べて表示したい場合には有効なプラグインです。何より設定が簡単なのが最大の魅力です。
この紹介記事を最後に編集したときの環境・バージョンなど
プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までにこの記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。
プラグインを使用(試用)したテスト環境
- テストサーバー:カラフルボックス
- WordPressのバージョン:5.2.3
- PHPのバージョン:7.3.11
- テーマ:HABONE(オリジナルテーマ)
- プラグインのバージョン:本記事で紹介しているバージョン1.12.2/最新バージョン 6.5.1
- 公式サイト(wordpress.org上):https://wordpress.org/plugins/instagram-feed/
- 公式サイト(作者サイト):
本記事を参考に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のプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。
WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。
基本的な設定方法や使い方
Instagramアカウントと連携させて、表示したいところに[instagram-feed]というショートコードを挿入するだけで画像の一覧が表示されるようになります。
パラメーターを設定することで表示件数や画像の表示列数などを指定して表示することもできます
Instagramアカウントとの連携方法
え?これでいいの?という位簡単にできます。スクリーンショットを交えて設定方法を紹介しておきます。
プラグインを有効化すると管理画面の左メニューに「Instagram Feed」というリンクが追加されますのでクリックして設定画面に移動します。
上図のような画面で赤枠のボタンをクリックします
インスタグラムにログインする画面が表示されますのでログインすると以下の画面が表示されます
赤枠のボタンをクリックすると、前の画面に戻ります
上図の赤枠のように自身のインスタグラムの情報が表示されれば連携完了です。
【Instagram Feed(Smash Balloon Social Photo Feed)】の表示例
無料版でできるのはこのレイアウトのみです(有料版ではさらに違った表示方法が選択できるようです)