【インスタ連携】OLTANAでInstagramフィードをトップページに表示する方法
この記事では、WordPressテーマ「OLTANA」を使用して、Instagramの投稿をWebサイトに表示する方法を解説します。
「ブログや店舗サイトにInstagramのフィードをおしゃれに載せたい」と考えている方にぴったりの内容です。
無料プラグイン「Smash Balloon Social Photo Feed」を使えば、コードを書かずに初心者でも簡単にInstagramの写真一覧を表示できます。
美容サロンやカフェなど、OLTANAを利用するユーザー層を想定したデザイン面の工夫や、スマートフォン・PCどちらでも見やすいレイアウト調整のコツも紹介。
記事を読み終える頃には、サイトにInstagram投稿が自然に馴染むデザインで埋め込まれ、訪問者の視認性やブランドイメージ向上に繋がります。
Instagramフィードとは
Instagramフィードとは、Instagramに投稿した写真や動画をWebサイト上に一覧表示できる機能です。
WordPressに埋め込むことで、最新の投稿を自動で反映させることができ、サイトを訪れたお客様にリアルタイムな情報や雰囲気を伝えることができます。
美容サロンや飲食店など、ビジュアルでの印象が重要な業種では、Instagramフィードの活用が集客や信頼感の向上にもつながります。
準備するもの
- PC（プラグインダウンロードのため）
- Instagramアカウントのログイン情報（ユーザー名・パスワードが必要です）
手順1：プラグインをインストールする
必要なプラグインをインストールしましょう。手順は以下の通りです。
①WordPressにログインする
管理画面を表示します。
②プラグインを検索する
左サイドバーの「プラグイン」をクリックし、「プラグインを追加」ボタンをクリックします。
③「Smash Balloon Social Photo Feed」をインストールする
「プラグインの検索」で「smash」と入力すると今回インストールするプラグインが検索画面に出てきます。
「Smash Balloon Social Photo Feed」であることを確認し「今すぐインストール」をクリックします。
④プラグインを有効化する
インストールが終了するとボタンの色が青になり「有効化」という文字に変わります。ここをクリックします。
手順2：Instagramと連携する
プラグインがインストールできたら、次はInstagramと連携をします。手順を確認しましょう。
①セットアップウィザードを起動する
先ほどのプラグインをインストールし、有効化ボタンを押すと自動的にこの画面に遷移します。「セットアップウィザードを起動」をクリックします。
②Instagramアカウントと連携する
「Instagramアカウントに接続」画面が表示されるので、「＋新規追加」をクリックします。
「Business Basic」をクリックします。
アクセスを許可する内容が表示されます。画面の内容を確認し、「Connect with Instagram」をクリックします。
Instagramログイン画面に遷移するので、ユーザー名とパスワードを入力します。
（既にログインされている場合は、この手順はスキップされます）
場合によっては本人確認があるので画面の指示に従って操作します。
※Instagramがプロアカウントになっていない場合は、この画面で設定が可能です。
画面の指示に従ってプロアカウントの設定をしてください。
この画面が出たら「許可」を押します。
プラグイン設定画面に戻ります。「Yes、It is my domain」を押します。
接続したいユーザー名が出ていれば、インスタグラム連携は完了です。
③プラグインの細かい設定をする
先ほどの画面で「Next」をクリックします。
この画面では他SNS用のプラグインを同時にダウンロードすることができます。
- TikTok
- YouTube
必要に応じてチェックを入れて先に進みます。
「Install Selecting Plugins」をクリックします。
これで、Instagramアカウント連携が完了しました！
手順3：Instagramフィードをサイトに表示する
最後に実際のページにフィードを表示する設定をしましょう。
①カスタマイズ画面からフィードレイアウトを編集する
左サイドバーから「Instagram Feed」をクリックすると、フィード作成画面に変わります。「＋新規追加」をクリックします。
※プラグインの編集は今後もここから操作ができますので、覚えておきましょう。
「ユーザータイムライン」にチェックが入っているので、「次へ」をクリックします。
先ほど連携したInstagramアカウント名にチェックが入っているか確認し、「追加」をクリックします。
フィードの編集画面に遷移します。
- フィードレイアウト
- カラースキーム
これらの項目から表示の調整が可能なので、お好みのレイアウトに設定します。
- ヘッダー
- 投稿
- もっと読み込むボタン
- フォローボタン
この項目は必要に応じて設定を変更できますが、最初は特に操作しなくてもかまいません。
お好みのレイアウトが決まったら、右上の「埋め込む」をクリックします。
ショートコードが発行されました。「コピー」をクリックします。
②「カスタムHTML」にショートコードを貼り付ける
左サイドバーの「外観」→「カスタマイズ」から、テーマのカスタマイズ画面へ遷移します。
Instagramフィードを挿入したい見出しを選び、クリックします。
（今回のマニュアルではCONCEPTを選択します）
スクロールしていくと「カスタムHTML」を入力する箇所が出てきます。
こちらに先ほどコピーしたショートコードを貼り付けます。
右側にプレビューが表示されます。
PC・タブレット・モバイル端末での表示を確認し、問題が無ければ「公開」ボタンをクリックします。
モバイルでの表示は3カラム設定だと綺麗に表示されます。
※投稿の表示数を変更したい場合は、プラグイン管理画面の「フィードレイアウト」から変更が可能です。
これで、ホームページ内にInstagramのフィードを埋め込むことができました！
InstagramのQRコードを作成する（任意）
Instagramに直接アクセスすることができるQRコードの作成方法をご紹介します。
画像としてダウンロードができるので、店内POPやチラシなどの紙媒体で使うことができます。
①PCブラウザからQRコードを取得する手順
管理画面の歯車マークをクリックします。
QRコードをクリックします。
カラー変更・ダウンロードができます。
②InstagramアプリからQRコードを取得する手順
自分のプロフィール画面から「プロフィールをシェア」をタップします。
QRコードの画面に遷移します。
「ダウンロード」ボタンをタップすると画像として保存することができます。
よくある質問(FAQ)
Q1. Instagramアカウントは「プロアカウント」でないと使えませんか？
はい、プラグインの仕様上「プロアカウント（ビジネスまたはクリエイター）」が推奨されています。
Q2. Instagramの投稿がうまく表示されません。
以下の点をご確認ください：
- Instagramアカウントとの連携が完了しているか
- プロフィールが非公開設定になっていないか
- ショートコードを正しい位置に貼り付けているか
- キャッシュの影響で表示が遅れている場合もあるため、数分待ってから再読み込みしてみてください
Q3. Instagramのフィードを複数ページに表示することはできますか？
はい、できます。作成したフィードごとに異なるショートコードが発行されるため、それぞれのショートコードを貼り付けることで、複数ページでの表示が可能です。
Q4. スマートフォンでもレイアウトが崩れず表示されますか？
はい、スマートフォンとPCで表示カラム数を個別に設定できるため、どちらでも見やすい表示が可能です。
Q5. Instagramアカウントの投稿を自動で更新するにはどうすればいいですか？
プラグイン側が自動でInstagramの投稿を定期的に取得・表示してくれるため、基本的に手動で更新する必要はありません。最新の投稿が反映されない場合は、キャッシュクリアやアカウント再連携をお試しください。
まとめ
本記事では、プラグイン「Smash Balloon Social Photo Feed」を使用して、Instagramのフィードをサイトに表示する方法をご紹介しました。
手順に沿って設定を進めていただければ、Instagramアカウントとの連携から、フィードのレイアウト調整、ショートコードの貼り付けまで、初心者の方でもスムーズに導入いただけます。
スマートフォン・PCの両方で見やすいデザインに整えることができるため、Webサイトに動きやブランド感を加えたい方にもおすすめです。
必要に応じて、QRコードの設置などもあわせてご活用ください。
