【WordPress】Instagramの最新投稿を埋め込む方法

はじめに

株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はWordPressにInstagramの最新投稿を埋め込む方法を解説します。

Instagramは現代において重要なプロモーションツールとなっています。
自社のサービスやブランドのコンテンツをWebサイトに直接埋め込むことで、ユーザーにその魅力をより鮮明に伝えることができます。

本記事では、WordPressプラグイン「Smash Balloon Social Photo Feed」を使用して、簡単にInstagramの最新投稿をWebサイトに表示する方法を紹介します。
「Smash Balloon Social Photo Feed」というWordPressのプラグインを使用すれば簡単に実装できますので、ぜひ参考にしてください。

対象読者

• WebサイトにInstagramの最新投稿を表示させたい人
• プラグインで簡単に実装したい人

プラグインの導入

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

「Smash Balloon Social Photo Feed」のプラグインをインストールします。
WordPressの管理画面から「Smash Balloon Social Photo Feed」と検索しプラグインをインストールしてください。
インストールが完了したら、「有効化」をクリックしてプラグインを有効にします。

Smash Balloon Social Photo Feed – 簡単なソーシャルフィードのプラグイン

以前の "Instagram Feed"。複数のアカウントから安全でカスタマイズ性のあるレスポンシブな Instagram フィードを表示します。Instagram の oEmbed に対応しています。

ja.wordpress.org

プラグインのセットアップ

インストールと有効化が完了したら、WordPressの管理画面のサイドバーに「Instagram Feed」という項目が追加されるのでそちらをクリックしてプラグインの設定画面を開きます。

まずプラグインとInstagramアカウントを連携していきます。

セットアップウィザードの起動

新規追加

アカウントの種類の選択

Instagramが個人アカウントの場合は左側の「Basic」を、ビジネスアカウントの場合は「Business」を選択します。
今回は左側のBasicを選択して進めていきます。

プラグインとInstagramの連携

プラグインとInstagramの連携の認証

セキュリティについての確認

これでプラグインとInstagramのアカウント連携ができたので、プラグインの設定を少ししていきます。

アカウントの選択

機能の設定

おすすめオプション機能の設定

特に選択しなくても問題ないです。

これにてプラグインのセットアップは完了です。

プラグインの詳細設定

埋め込み表示の詳細設定をしていきます。

フィードの作成

まずはInstagramのフィードの作成をしていきます。

新規追加

フィード形式の選択

最新の投稿を表示したい場合は「ユーザータイムライン」を選択。
他のフィード形式を使いたい場合は有料プランになります。

フィードの作成

カスタムプロフィールの設定

「いいえ、あとにします」で問題ないです。

フィード作成完了

表示のカスタマイズ設定

フィードレイアウト設定

フィードの表示レイアウトを設定します。
ただレイアウトの種類で無料版で使えるのは「グリッド」のみです。

カラースキーム設定

テーマから継承で問題ないです。

ヘッダーの表示設定

スクリーンショットのオレンジ枠の部分がヘッダーです。

もっと読み込むボタンの表示設定

スクリーンショットのオレンジ枠の部分がもっと読み込むボタンです。

フォローボタンの表示設定

スクリーンショットのオレンジ枠の部分がフォローボタンです。

これにて設定が完了になります。

ページに埋め込み

固定ページにショートコードを用いて埋め込みます。
「Instagram Feed」の管理画面からショートコードをコピーします。
これを固定ページに貼り付けます。

さいごに

今回はWordPressにInstagramの最新投稿を埋め込む方法を解説しました。
ぜひこの記事を参考に、WordPressで作成したWebサイトにInstagramの最新投稿を表示させてみてください。