ワードプレスサイトにインスタグラムのフィードをプラグインを使って表示させる方法

T美

インスタを始めたんですけど、ワードプレスにもフィードを表示させたいんですよね・・・何か簡単にできる良い方法があればな~なんて。

にゃんT

それなら『Smash Balloon Social Photo Feed』を使うのが簡単で便利にゃよ!

T美

簡単な方法があるんですね!ヨカッタデス。

今回は、下の画像の様にワードプレスのサイトに自分のインスタグラムのフィードをプラグインを使って表示させる方法を開設します。

このサイトではフッターに表示させています
もくじ

プラグインをインストールする

新規追加からSmash Balloon Social Photo Feedをインストールして有効化する。

インスタグラムアカウントと連携する

①ワードプレスにログインしている同じブラウザ上で、インスタグラムのアカウントにログインしておいて、Connect an Instagram Accountをクリックする。

②個人アカウントで連携する場合は「Personal」を選択。ビジネスアカウントの人は「Business」を選択する。

③インスタアカウントのユーザー名が上部に出てくるので、合っているか一応確認してから許可するをクリックする。

④Instagram Accountsの箇所が下の画像の様になれば連携出来ています。ちゃんと自分のアカウント名が出ているか確認しておきましょう。

設定する

基本の設定

「1.Configure」を選択した状態で少し下へスクロールします。

Preserve settings when plugin is removed』は、何等かの理由でプラグインが削除されて再インストールした場合に、チェックが入っていれば以前の設定をそのまま引き継ぐことが出来ますよ、という機能です。

私はチェックを外してますが、不具合などで消えてしまった事を想定して設定を必ず引き継ぎたい場合はチェックを入れて下さい。

Check for new posts』は、インスタグラムの新しいポストをチェックしてそれをページに反映させる間隔を、設定する項目です。

私は1日ごとにチェックを入れるという事で、1Dayにしました。

Minutes』<分ごと>、『Hours』<時間ごと>、『Days』<日ごと>の3つから選べます。

数字と組み合わせて、好みの間隔を設定しましょう。

フィードを好みの表示にする設定

「2.Customize」をクリックします。

ページの少し下へいくと、Layoutという項目があるので、下記項目を自分好みに設定していきます。

Number of Photos ・・・ 表示される写真(投稿)の数を入力する。

Number of Columns ・・・ 横のカラム数(写真を縦何列にするか)を入力する。

Padding around Images ・・・ 写真と写真の間(隙間)の大きさを何ピクセルにするか入力する。

Disable mobile layout ・・・ スマホでの表示をスマホ専用表示にせずPCの表示と同じにしたければチェックを入れます。私は同じにしたいのでチェックを入れましたが、スマホ専用表示にすると、1つのポストごとに大きく表示されます。そちらが良ければチェックを外せばOKです。

最後に変更を保存で表示設定は完了!

上記の囲み内の数字は私が設定している数値です。
自分の好みに応じて変更して下さい。

ヘッダーのプロフィール部分の設定

N子

更に、ヘッダー部を自分好みにカスタマイズしていきますよ!

インスタグラムのビジネスアカウントと連携した場合は、インスタ側で設定しているプロフ画像やプロフィール部分に表示している文字がそのまま自動でヘッダー部分に反映されるのですが、パーソナルアカウント(個人アカウント)の方だと表示が下の画像の様にアカウント名だけで、あとは全く反映されていない状態になるので、カスタマイズしてみました。

「2.Customize」を選択する。

ページの下へスクロールしていくと、Herderという項目があるので、下記2つの箇所に必要事項を入力します。

①Add Custom Bio Textの枠内にインスタのプロフィールに表示している文字を入力する。

注意点として、改行はせずに文字を続けて入れることがポイントです。改行して書いてしまうと、入力した文字が表示されません。改行なしだと文字が詰まってしまうので、1スペース開けたりカギカッコ等を使うとうまく整うと思います。

プロフィール画像をワードプレスにアップロードして、そのURLを入力する。

注意点は、画像を丸く切り取ったものをアップロードする事です。四角い画像だと自動で丸く表示してくれず、何も表示されない(変更が反映されない)状態になるので、まず丸い形のプロフ画像を準備する事が必要です。

最後に変更を保存をクリックで終了です。

サイト内に表示する

連携と設定だけでは未だサイトのどこにも表示されていない状態ですので、ショートコードを入れてしっかり表示させましょう!

①「3.Display Your Feed」を選択する。

②ウィジェットでテキストパーツを使って先程コピーしたショートコードを入力する。(念のためテキストモードで入力しました。)

表示場所は、固定ページや投稿ページでもOKです。コードさえコピペすればその場所に表示できるという事です。

私が使っているテーマ「SWELL」だとブログパーツでも使えます。

最後に

私はヘッダーのプロフ画像やプロフィールの文言をそのまま入れたくて、ヘッダーをインスタと同じ様に表示するカスタマイズをしましたが、ヘッダーは全く出さず、フィードの画像をメインで並べて表示したい場合にも使えるので、調整して好みの表示にカスタマイズしてみて下さいね。

N子

いかがでしたか?自分の好みの表示にうまく出来ましたか?

T美

私でも簡単にできました!

にゃんT

簡単に設定できるおススメのプラグインなので、インスタグラムのフィードをワードプレスに表示させたい人はぜひ使ってみてにゃ!

Please Share
もくじ
閉じる