はじめに
株式会社TOKOSのタクヤです。
今回はWordPressにIstagramの最新投稿を埋め込み方法を解説します。
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」と検索しプラグインをインストールしてください。
インストールが完了したら、「有効化」をクリックしてプラグインを有効にします。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-22-1024x717.jpg)
プラグインのセットアップ
インストールと有効化が完了したら、WordPressの管理画面のサイドバーに「Instagram Feed」という項目が追加されるのでそちらをクリックしてプラグインの設定画面を開きます。
まずプラグインとInstagramのアカウントと連携していきます。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-23-1024x717.jpg)
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-24-1024x717.jpg)
Instagramが個人アカウントの場合は左側の「Basic」を、ビジネスアカウントの場合は「Business」を選択します。
今回は左側のBasicを選択して進めていきます。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-26-1024x717.jpg)
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-25-1024x717.jpg)
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-27-1024x717.jpg)
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-28-1024x717.jpg)
これでプラグインとInstagramのアカウント連携ができたので、プラグインの設定を少ししていきます。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-30-1024x717.jpg)
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-29-893x1024.jpg)
特に選択肢なくて問題ないです。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-31-1024x717.jpg)
これにてプラグインのセットアップは完了です。
プラグインの詳細設定
埋め込み表示の詳細設定をしていきます。
フィードの作成
まずはInstagramのフィードの作成をしていきます。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-33-1024x717.jpg)
最新の投稿を表示したい場合は「ユーザータイムライン」を選択。
他のフィード形式を使いたい場合は有料プランになります。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-32-1024x717.jpg)
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-35-1024x717.jpg)
「いいえ、あとにします」で問題ないです。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-34-1024x717.jpg)
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-49-1024x717.jpg)
表示のカスタマイズ設定
フィードの表示レイアウトを設定します。
ただレイアウトの種類で無料版で使えるのは「グリッド」のみです。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-38-1024x719.jpg)
テーマから継承で問題ないです。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-40-1024x719.jpg)
スクリーンショットのオレンジ枠の部分がヘッダーです。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/header-1024x719.jpg)
スクリーンショットのオレンジ枠の部分がもっと読み込むボタンです。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/read-more-button-1024x719.jpg)
スクリーンショットのオレンジ枠の部分がもっとフォローボタンです。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/follow-button-1024x719.jpg)
これにて設定が完了になります。
ページに埋め込み
固定ページにショートコードを用いて埋め込みます。
「Instagram Feed」の管理画面からショートコードをコピーします。
これを固定ページに貼り付けます。
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-52-1024x870.jpg)
![](https://blog.to-ko-s.com/wp-content/uploads/2024/07/Group-51-1024x870.jpg)
終わりに
今回はWordPressにInstagramの最新投稿を埋め込み方法を解説しました。
ぜひこの記事を参考に、WordPressで作成したWebサイトにInstagramの最新投稿を表示させてみて下さい。