【2022最新】ワードプレスにインスタをプラグインを使って簡単埋め込み!

みなさんはInstagramやってますか?

私もいくつかアカウントを持っていますが、ブログにインスタを埋め込むと見栄えがかなり良くなりますよ!

インスタ・プログの相互の集客も見込めるので、ブログにインスタを埋め込んで、SNS活用をしていきましょう。

目次

インスタ埋め込みプラグイン「Smash Balloon Social Photo Feed」

インスタを埋め込むプラグインはこの「Smash Balloon Social Photo Feed」がオススメです。

クマ

ちなみに、このプラグインは何度か名前が変わっていてGoogle検索で出てくる「Instagram Feed」や「Smash Balloon Instagram Feed」は同じプラグインのことです。
設定やインストール済みのプラグインの表示なんかが、結構混在していてわかりにくいです笑。
とにかく2022年10月現在のプラグイン名は「Smash Balloon Social Photo Feed」です。

プラグインのインストールと有効化

いつものようにプラグインの「新規追加」から「Smash Balloon Social Photo Feed」と検索して、インストールして有効化しておきます。

インストール

インスタと連携

インスタとの連携も簡単です。以下の手順で進めていけばすぐに連携できます。

STEP
「すべてのフィード」から「新規追加」
手順1
STEP
「フィード形式を選択」して「次へ」
手順2

「ユーザータイムライン」を選びます。

STEP
「ソースの追加」をする
手順3
STEP
「Login with Instagram」でインスタグラムにログイン
手順4
STEP
インスタグラムにログイン、情報のリクエストを許可する

インスタグラムにログインを求める画面が出ますが、すでにブラウザでログインしている場合は自動的にログインしているアカウントと連携します。

すると次のように情報のリクエストを許可するかどうかの画面に移りますので、「許可」してください。

手順5
クマ

ログインしているアカウントではないアカウントと連携したい場合は、一度ブラウザからインスタのページを開いて、ログアウトしてください。

STEP
セキュリティの確認をして完了!

BearFruitのマスコットキャラ「クマ」がLINEスタンプになりました!

プログラマーの心に刺さる、「プログラミングあるある」。毎日使いたくなること間違いなし!

設定

連携が上手くいったら、次のような画面になります。

カスタマイズ

「カスタマイズ」タブを選んで設定していきます。

基本的に「フィードレイアウト」を設定すれば大丈夫だと思います。

クマ

その他の項目も一覧にしておきます。

  • 「配色」:テーマから継承、ライトカラー、ダークカラー、カスタムから選べます。
  • 「ヘッダー」:アイコンと名前が表示されている部分の設定になります。
  • 「投稿」:ほとんどの設定はPro版でないといじれない項目になっています。
  • 「もっと見るボタン」:フィードの下部にある「もっと見るボタン」の設定です。
  • 「フォローボタン」:フィードの下部にある「フォローボタン」の設定です。
  • 「ライトボックス」:Pro版のみの設定項目になります。

フィードレイアウトの設定

とはいえ、フィードレイアウトの設定も難しくありません。

フィードレイアウト

Lite版は、レイアウトは「グリッド」しか選べません。

ですので、基本的に「投稿数」と「列」をデスクトップ、タブレット、モバイルごとに設定すれば完了です。

「投稿数」はフィードに表示する投稿数になります。

「列」はその投稿を何列(横方向に)表示にするか?です。この投稿数と列で行(縦方向)のサイズが決まります。

クマ

実際に触ってみた方がわかりやすいと思います。全然難しい設定ではないです笑。

ショートコードの確認

設定が終わったら、右上の「埋め込み」からショートコードを取得します。

埋め込みコード取得

表示されたら「コピー」します。

あとは好きな場所に貼り付ければインスタグラムのフィードが埋め込まれます!超簡単!

今回はフッターに「カスタムHTML」でショートコードを貼り付けてみました。

クマ

以上です!インスタとの連携でつまずかなければ、かなり簡単にインスタを埋め込むことができます!

おまけ.複数のアカウントのフィードを埋め込む

あまりないケースかな、と思いますが、複数のアカウントのフィードを埋め込む方法も載せておきます。

「新規追加」すると、先ほどの『インスタと連携のSTEP2』に進むので、同様に設定してくれればOKです。

追加

ただ、そこでも説明していますが、ブラウザでインスタのページを開いてログアウトをしておかないと、他のアカウントに入れない可能性もある(自動的にログインしているアカウントとの連携を作ってしまう)ので、あらかじめログアウトしておきましょう。

まとめ

今や、ブログでもSNSとの連携は必須です。

相互に連携をとって、ブログとSNSの流入数を増やしていきましょう!

あなたへオススメ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次