こんにちは。ホームページ制作・WordPressサポートのTOMOCOです。
今回は、WordPress(ワードプレス)にInstagramのタイムラインを表示させる方法をお伝えします。
そんなのとっくに知っているし使っているわ!!
という方もいらっしゃるかと思いますが…
Instagramのフィードを埋め込んで表示させるプラグイン
Smash Balloon Social Photo Feed
がアップデートされて仕様が変わっているんですよね。
ですので、今からSmash Balloon Social Photo Feedを使ってWordPressにInstagramのフィードを表示させたい!
という方はぜひ参考にして下さい。
![](https://tomococoro.com/wp-content/uploads/2022/03/3-1-300x169.webp)
プラグイン『Smash Balloon Social Photo Feed』をインストールする
今回は予め、パソコンから自分のInstagramアカウントにログインした状態で作業を行いました。
まず始めに、プラグイン『Smash Balloon Social Photo Feed』をインストールします。
プラグインの新規追加で
『Smash Balloon Social Photo Feed』と入力して検索すると画像のように表示されますので
「今すぐインストール」を押します。
![](https://tomococoro.com/wp-content/uploads/2022/02/1-1024x576.webp)
今すぐインストールを押して「有効化」します
![](https://tomococoro.com/wp-content/uploads/2022/02/2-1024x576.webp)
Instagramと連携する
Smash Balloon Social Photo Feedをインストールしたら、次はInstagramと連携していきます。
ダッシュボードに戻り「Instagram Feed」をクリックします。
![](https://tomococoro.com/wp-content/uploads/2022/02/3-1024x576.webp)
こちらの画面になりますので「Add New」をクリックします
![](https://tomococoro.com/wp-content/uploads/2022/02/4-1024x576.webp)
次の画面で「Next」をクリック
![](https://tomococoro.com/wp-content/uploads/2022/02/5-1024x576.webp)
さらに次の画面で「Add Source」をクリック
![](https://tomococoro.com/wp-content/uploads/2022/02/6-1024x576.webp)
こちらの画面になりますので数秒待ちます
![](https://tomococoro.com/wp-content/uploads/2022/02/7-1024x576.webp)
「Personal」にチェックを入れて「Login with Instagram」をクリックします
※ここで「Business」にチェックを入れてログインをクリックするとFacebookに連携されてしまいます
![](https://tomococoro.com/wp-content/uploads/2022/02/8-1024x576.webp)
私はメディア(任意)にチェックを入れて「許可する」をクリックしました。
![](https://tomococoro.com/wp-content/uploads/2022/02/Smash-Balloon-Social-Photo-Feed-1024x576.webp)
画像のように、連携したInstagramのユーザーネームが表示されますので、チェックを入れてから「Next」をクリックします。
![](https://tomococoro.com/wp-content/uploads/2022/02/10-1024x576.webp)
こちらの画面に移動しますので、後は表示させるカラム数などを設定します。
※下記画像の赤枠の数はデフォルトの状態です。
![](https://tomococoro.com/wp-content/uploads/2022/02/11-1024x576.webp)
私は、下記画像のように
- デスクトップ(PC)…9投稿の表示
- モバイル(スマホ)…9投稿の表示
- デスクトップ…3カラム
- タブレット…3カラム
- モバイル…3カラム
という設定にしています。
![](https://tomococoro.com/wp-content/uploads/2022/02/12-1024x576.webp)
カラム数などを設定したら「Save」保存をクリックします。
![](https://tomococoro.com/wp-content/uploads/2022/02/13-1024x576.webp)
WordPressにInstagramのフィードを埋め込んで表示させる
ダッシュボードに戻り、「Instagram Feed」をクリックします。
![](https://tomococoro.com/wp-content/uploads/2022/02/14-1024x576.webp)
WordPressに表示させる方法は下記の2つの方法があります。
- ショートコードをコピーして表示させたい部分に貼り付ける
- ウィジェットでサイトバーやフッター等にそのままドラッグ&ドロップする
①ショートコードをコピーして表示させたい場所に貼り付ける
![](https://tomococoro.com/wp-content/uploads/2022/02/15-1024x576.webp)
ショートコードをコピーしたら、本文中の「カスタムHTML」にショートコードを貼り付けます。
②ウィジェットでサイドバーやフッターに表示させる
「外観」→「ウィジェット」→「利用できるウィジェット」の中の「Instagram Feed」をドラッグ&ドロップで表示させたい場所に移動します。
※私はフッターの右側に表示させています。
![](https://tomococoro.com/wp-content/uploads/2022/02/16-1024x576.webp)
PCではこのように表示されます。
![](https://tomococoro.com/wp-content/uploads/2022/02/17-1024x576.webp)
スマホでは、このように表示されます。
![](https://tomococoro.com/wp-content/uploads/2022/02/IMG_2112-536x1024.webp)
【2022最新】ワードプレスにInstagramのフィードを表示させる方法
以上、WordPress(ワードプレス)にInstagramのフィードを埋め込んで表示させるプラグイン
Smash Balloon Social Photo Feed
を使用して、ホームページやブログサイトにInstagramを表示させる方法をお伝えしました。
Smash Balloon Social Photo Feedがアップデートされて以前と仕様が変わっていますので、ググって調べても
「思ってたんと違う…」と迷子になっている方はぜひ参考にして頂きたいと思います。
![](https://tomococoro.com/wp-content/uploads/2021/11/コンテンツヘッダー画像-300x113.webp)
![](https://tomococoro.com/wp-content/uploads/2022/02/公式LINE-お友達登録-1.webp)
![](https://tomococoro.com/wp-content/uploads/2022/03/4-300x169.webp)