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

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

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

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

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

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

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

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

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

設定する

基本の設定

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

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

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

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

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

『Minutes』＜分ごと＞、『Hours』＜時間ごと＞、『Days』＜日ごと＞の３つから選べます。

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

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

「２．Customize」をクリックします。

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

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

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

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

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

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

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

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

「２.Customize」を選択する。

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

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

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

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

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

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

サイト内に表示する

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

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

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

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

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

最後に

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