Instagramの投稿をWordPressに自動投稿するのは、プラグイン「Smash Balloon Social Photo Feed」で割と簡単にできた

このサイト・および記事にはアフィリエイト広告を利用しています。

【出来上がりイメージ】HP運営をしているikumadoのHP上でInstagram投稿をWordPressに自動投稿

HP運営をしている育休&共働きコミュニティ「ikumado」のHP上で、Instagramの投稿をWordPressに自動投稿しています。(プラグイン「Smash Balloon Social Photo Feed」を使用)

プラグイン「Smash Balloon Social Photo Feed」を使用したInstagramとWordPressの自動連携

トップのサイドバーに2列で表示させています。

リリースしました!!
シンプル♪ カンタン♪ 店ごとにメモできる買い物リストアプリ

↑ぜひダウンロードしてね!(> <)

InstagramとWordPressの連携はプラグイン「Smash Balloon Social Photo Feed」を使用

Instagramに投稿したらWordPressのHPに自動投稿するには、プラグイン「Smash Balloon Social Photo Feed」を使用しました。

「Smash Balloon Social Photo Feed」で検索するといくつか出てきますが、「Instagramのフィードを表示します」の記載があるものをインストールします。

プラグイン「Smash Balloon Social Photo Feed」を選んだ判断ポイント

なぜ「Smash Balloon Social Photo Feed」を選んだか、というと、

  • プラグインの最終更新が3ヶ月前と、しっかりアップデートを続けているらしいこと
  • 使用しているWPのバージョンと互換性があること
  • 有効インストール数が100万以上であり、わからないことはWebにいっぱい記事がありそう

と思ったことです。

プラグイン「Smash Balloon Social Photo Feed」をインストールしたらInstagramのアカウント連携を進める

1.プラグイン「Smash Balloon Social Photo Feed」のインストールが完了するとメニューに追加されるので、Instagramのアカウント連携を進めていきます。

プラグイン「Smash Balloon Social Photo Feed」をインストールしたらメニューに追加された
Instagramのアカウント連携を進める

2.「新規追加」からInstagramのアカウント連携を進めていきます。

3.使っているInstagramのアカウントがBasicならBasicを、AdvancedならAdvancedを選択します。
Instagramのアカウントがビジネスアカウントである必要がありますikumadoはBasicなのでBasicを選択)

4.自分に連絡用のメールが飛ぶように、自分のメールアドレスを設定します。(変更なしならそのまま)

Instagramアカウント連携
連絡用のメールアドレスを確認・設定

5.アクセスを許可します。

6.Security Confirmationも「Yes, it is my domain」をクリック

プラグイン「Smash Balloon Social Photo Feed」とInstagramのアクセス許可
Security Confirmation

7.WordPressの画面に戻ってきたので、「Next」をクリックします。

8.機能設定画面は初期設定のまま「Next」をクリックします。

プラグイン「Smash Balloon Social Photo Feed」 WordPressの画面に戻る
機能設定は初期値のまま「Next」

9.追加の機能は全てチェックを外して「Install Selected Plugins」をクリックします。

このチェックは全て外す
チェックを外した状態になったら「Install Selected Plugins」をクリック

10.準備完了の画面が表示されますので、画面下の方にある「Complete without Ugrading」をクリックします。

タイムラインのフィードを作成していく

1.プラグイン「Smash Balloon Social Photo Feed」の設定画面から「新規作成」をクリックします。

2.今回はユーザータイムラインを選択して「次へ」をクリックします。

プラグイン「Smash Balloon Social Photo Feed」の設定画面
「ユーザータイムライン」を選択して「次へ」

3.先程連携したアカウントが表示されるので選択して「次へ」をクリックします。

4.既に投稿してあるInstagramの投稿が読み込まれるので少し時間がかかります。

5.「カスタマイズ」のタブからフィードのレイアウトや背景色・ボタンの色などの設定が行えます。

連携したアカウントが表示されるので選択して「次へ」
プラグイン「Smash Balloon Social Photo Feed」カスタマイズ画面

6.「フィードレイアウト」から表示方法やパディング(余白)の設定・カラム数の設定などが行えます。

7.「フォローボタン」からはフォローボタンの色やボタンに表示するテキストの設定などが行えます。

プラグイン「Smash Balloon Social Photo Feed」 フィードレイアウトの設定
プラグイン「Smash Balloon Social Photo Feed」 フォローボタンの設定

8.設定ができたら画面上の「保存」をクリックして、「埋め込む」をクリックします。

9.埋め込み用のショートコードが表示されるので「コピー」をクリックします。

プラグイン「Smash Balloon Social Photo Feed」の設定ができたら「保存」→「埋め込む」をクリック
ショートコードの表示

10.表示させたい場所でブロックメニューのショートコードを選択します。(英語表記の場合と日本語表記の場合があると思います。

11.先程コピーしたショートコードをペーストします。

表示させたい場所でブロックメニューのショートコードを選択
先程コピーしたショートコードをペースト

12.完成!

プラグイン「Smash Balloon Social Photo Feed」を使用したInstagramとWordPressの自動連携

ちゃんと新規投稿も取り込まれているようです!

今回はikumadoのInstagramビジネスアカウントで

このブログサイトは普段はサーバーが落ちていてタイムリーにInstagramの投稿をキャッチすることができない静的サービスであるShifterを使っていて、Instagramとの連携はできないな~と思っていたので、ikumadoのHPで連携させてみました。

なお、プラグイン「Smash Balloon Social Photo Feed」を使ってWordPressと自動連携させるためには、Instagramのアカウントがビジネスアカウントである必要があります。
ビジネスアカウントでない場合は切り替えてから上記の設定を行ってください。

今回はInstagramのアカウントがビジネスアカウントであること、という点が落とし穴かなと思いますが、それ以外は特に問題なく設定できました。

参考にさせていただいたブログ記事

以下のブログ記事を参考にさせていただきました。
ありがとうございました!

その他、HP運営・ワークに関する記事

◆Simple GA4 Rankingでサイトにアクセスランキングを表示させる方法まとめ

リリースしました!!
シンプル♪ カンタン♪ 店ごとにメモできる買い物リストアプリ

↑ぜひダウンロードしてね!(> <)

◆Simple GA4 Rankingでサイトにアクセスランキングをアイキャッチ・順位数も表示させる方法まとめ

◆保育園の先生へのビデオメッセージを全部無料ソフトで編集!Canva・Microsoft Designer&CapCut&DOVA-SYNDROME使用(サンプルをYouTubeで公開中!

◆SSL証明書の期限切れはWordPressのホスティングサービスから新たに払い出されたドメイン検証レコードをAWSのRoute53に追記して解決した

◆普段から使いまくっているnotionがフリープランでも総容量無制限だと知って驚愕したので、これからもたくさん使っていこうと思った記事