2025.04.25 未分類

OLTANAでInstagramフィードを掲載する方法

この記事では、WordPressテーマ「OLTANA」を使用する皆さんが、Instagram Graph APIを利用して店舗のInstagramフィードを取得し、WordPressプラグインを活用してホームページのトップページに掲載する方法を解説します。美容サロンやクリニックなど、OLTANAのユーザー層に合わせ、初心者でも簡単に進められるよう、スクリーンショット付きで説明します。この記事を終える頃には、日々の更新情報を顧客に案内する、OLTANAの美しいデザインに統合されたInstagramフィードが完成します。

Contents

この記事の目的
対象読者
必要なもの
手順1：Instagram Graph APIの設定
手順2：WordPressプラグインのインストールと設定
手順3：OLTANAトップページにフィードを掲載
手順4：モバイル表示の最適化
手順5：運用と動作テスト
よくある質問（FAQ)
次のステップ

この記事の目的

Instagram Graph APIを設定し、フィードデータを取得。
WordPressプラグインをインストールしてフィードを構築。
OLTANAの「カスタマイズ」セクションにフィードをトップページに掲載。
デザインをOLTANAのテーマカラーにカスタマイズ。
モバイル表示を最適化し、日々の更新を自動反映。
動作テストでフィードの正確性を確認。

対象読者

OLTANAを購入し、Instagramビジネスアカウント（公開設定）とFacebookページを保有しているユーザー。
OLTANAの「カスタマイズ」セクション（カスタムHTML/CSS）の基本操作に慣れている方。
美容サロン、クリニックなどの店舗運営者で、Instagramの更新情報をホームページで共有したい方。

必要なもの

PC（Instagram、Meta Developerポータル、WordPress管理画面を使用）。
Instagramビジネスアカウント（公開設定）とリンク済みのFacebookページ。
Meta Developerアカウント（無料）。
OLTANAのホームページ（公開済みまたは編集中）。
Googleアカウント（任意、Google Analyticsでトラフィック解析）。

手順1：Instagram Graph APIの設定

Instagram Graph APIを利用してフィードデータを取得します。初心者向けに詳細な手順を解説します。

Meta Developerアカウントを作成
- Meta Developerポータルにアクセスし、Instagramビジネスアカウントにリンク済みのFacebookアカウントでログイン。
- 初回の場合、「開発者アカウントを作成」を選択し、メール認証を完了（無料）。
- ダッシュボードが表示されることを確認。
新しいアプリを作成
- ダッシュボードの「マイアプリ」→「アプリを作成」をクリック。
- アプリタイプで「ビジネス」を選択。
- アプリ情報を入力:
  - アプリ名: 例「OLTANA_Instagram_Feed」。
  - 連絡先メールアドレス: 店舗のメールアドレス。
  - ビジネスアカウント: リンク済みのFacebookページ。
- 「作成」をクリックし、アプリIDを確認。
Instagram Graph APIを有効化
- アプリダッシュボードの「製品を追加」→「Instagram Graph API」を選択し、「セットアップ」をクリック。
- 「基本設定」→「Instagramアカウントを追加」で、リンク済みのInstagramビジネスアカウントを接続。
- 接続後、ダッシュボードにInstagramアカウントが表示されることを確認。
アクセストークンを取得
- ダッシュボードの「ツール」→「Graph APIエクスプローラ」を開く。
- 「アプリケーション」で作成したアプリ（例: OLTANA_Instagram_Feed）を選択。
- 「アクセストークンを生成」をクリックし、権限を選択:
  - instagram_basic（必須）。
  - instagram_content_publish（任意、投稿データ取得用）。
- 「トークンを生成」をクリックし、表示されたアクセストークンをコピー（例: EAAB...）。
  - ヒント: 有効期限は通常60日。長期利用には「長期アクセストークン」を生成（「設定」→「基本設定」→「トークンの拡張」）。
APIデータをテスト
- Graph APIエクスプローラのクエリ入力欄に以下を入力: me/media?fields=id,caption,media_url,permalink
- 「送信」をクリックし、最新投稿データ（例: 画像URL、キャプション）が返されることを確認: { "data": [ { "id": "123456", "caption": "新スタイル公開！", "media_url": "https://scontent.cdninstagram.com/...", "permalink": "https://www.instagram.com/p/..." }, ... ] }
- エラー（例: 「Invalid scope」）が出る場合、権限やトークンを再確認。

スクリーンショット例: Meta Developerポータルログイン、アプリ作成、アクセストークン生成、クエリ結果。

手順2：WordPressプラグインのインストールと設定

Instagramフィードを表示するため、初心者向けで信頼性の高いプラグイン「Smash Balloon Social Photo Feed」（無料版）を使用します。1,600,000以上のアクティブインストールと高い評価で、OLTANAとの相性が良好です。

プラグインをインストール
- WordPress管理画面（your-site.com/wp-admin）で「プラグイン」→「新規追加」を開く。
- 「Smash Balloon Social Photo Feed」を検索し、「今すぐインストール」→「有効化」をクリック。
  理由: 無料版で基本的なフィード表示が可能、Instagram APIとの統合が簡単
Instagramアカウントを接続
- 管理画面の「Instagram Feed」→「Settings」を開く。
- 「Add Source」をクリックし、「Business Account」を選択。
- 「Login with Instagram」をクリックし、Instagramビジネスアカウントのログイン情報を入力。
- 指示に従い、Metaが要求する権限（例: instagram_basic）を許可。
- 接続後、アカウントが「General」タブに表示されることを確認。
  ヒント: Smash BalloonはAPIアクセストークンを自動生成。手順1のトークンは不要だが、理解のために設定済み。
フィードをカスタマイズ
- 「Customize」タブでフィードの見た目を設定:
  - レイアウト: グリッド（推奨、例: 3列、6投稿）。
  - 投稿数: 例: 6投稿（トップページに適した数）。
  - 幅と高さ: 例: 幅600px、高さ400px（OLTANAのトップページに合わせる）。
  - フォローボタン: 「Follow on Instagram」を有効化し、フォローを促進。
  - ロードモアボタン: 必要に応じて有効。
- テーマカラー（例: No.001ピンク系#F06292）を「カスタムCSS」で後ほど調整。
- 「Save」をクリックして設定を保存。
ショートコードを取得
- 「Settings」→「General」でフィードのショートコードを確認（例: [instagram-feed feed=1]）。
- 複数のフィードを作成した場合、フィードIDを指定（例: feed=2）。

手順3：OLTANAトップページにフィードを掲載

OLTANAの「カスタマイズ」セクションを使用して、トップページにInstagramフィードを掲載します。

「カスタマイズ」セクションにアクセス
- WordPress管理画面の「外観」→「カスタマイズ」を開く。
- 「セクションの設定」でトップページのセクションを選択（例: ファーストビュー下部）。
カスタムHTMLにフィードを追加
- 「カスタムHTML」欄に以下のコードを入力:
- <div class="ol-content-frame ol-animation"> <h2>Instagramで最新情報をチェック！</h2> <p>新スタイルやキャンペーンを毎日更新♪</p>

[instagram-feed feed=1]

</div> [instagram-feed feed=1]は手順2で取得したショートコード。 ol-content-frameでコンテンツ幅を統一、ol-animationでアニメーション（例: フェードイン）を追加。キャッチコピーで日々の更新を強調。

カスタムCSSでデザインを調整

「カスタムCSS」欄に以下のCSSを入力: .sbi-container { max-width: 100%; margin: 0 auto; padding: 20px; background-color: #FCE4EC; /* No.001ピンク系 */ border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .sbi_item { border-radius: 8px; overflow: hidden; } .sbi_follow_btn a { background-color: #F06292; /* No.001ピンク系 */ color: #FFFFFF; border-radius: 8px; } .sbi_follow_btn a:hover { background-color: #D81B60; /* ホバー時の濃いピンク */ } h2 { color: #F06292; text-align: center; margin-bottom: 10px; } p { text-align: center; margin-bottom: 15px; } @media (max-width: 768px) { .sbi-container { padding: 10px; } .sbi_item { margin-bottom: 10px; } }
CSSはフィードの背景（#FCE4EC）、フォローボタン（#F06292）をテーマカラーに統一、モバイル表示を最適化。No.003（ブルー系）の場合、背景を#E3F2FD、ボタンを#1976D2に変更。

動作確認

ホームページをプレビューし、フィードがトップページに正しく表示されるか確認。
最新投稿（例: 画像、キャプション）が反映されているかテスト。
フォローボタンがクリック可能で、Instagramプロフィールに遷移するか確認。

スクリーンショット例: 「カスタマイズ」セクションのHTML/CSS入力、フィード表示、モバイル表示。

手順4：モバイル表示の最適化

モバイル表示の確認
- WordPress管理画面の「カスタマイズ」→「プレビュー」でモバイル表示を選択。
- フィードの投稿が小さすぎないか（例: 画像幅150px以上）、キャッチコピーがはみ出ないか確認。
- 上記CSSの@mediaルールでモバイル向け調整済み。必要に応じて投稿数を減らす（例: 4投稿）。
OLTANAテーマ別のデザイン例
- No.001（ピンク系）: ピンクのフォローボタン（#F06292）と薄ピンクの背景（#FCE4EC）で温かみのあるデザイン。
- No.003（ブルー系）: ブルーのフォローボタン（#1976D2）と白背景（#E3F2FD）で清潔感を強調。
- ol-content-frameで幅を統一、ol-animationでスムーズな表示効果を追加。
ユーザビリティの確認
- 投稿画像がタップでInstagramに遷移するかテスト。
- フォローボタンがモバイルで目立つか（例: 大きさ、色）を確認。
  ヒント: Smash Balloonはレスポンシブデザイン対応で、モバイル表示に最適（Web:2,8）。

手順5：運用と動作テスト

フィードの動作テスト
- Instagramに新しい投稿を追加し、フィードに即時反映されるか確認（Smash Balloonはキャッシュを利用、更新間隔は設定で調整可能。
- フィードのロード時間が速いか（キャッシュ機能で最適化済み）を確認。
- フォローボタンや投稿リンクが正しく機能するかテスト。
運用準備
- キャンペーンとの連動: フィードを活用し、キャンペーンを告知（例: 「フォローで10%OFF！」）。OLTANAのブログでキャンペーン記事を投稿。
- LINE予約との統合: トップページにLINE予約のQRコードやボタンをカレンダー近くに配置。
- 定期投稿: Instagramに週1～2回投稿（例: 新スタイル、健康Tips）。フィードは自動更新（Web:5,8）。
- 解析: Google Analyticsでフィードのトラフィックを測定（例: your-site.com/?utm_source=instagram、手順3で設定）。
改善のポイント
- フィードの投稿数を調整（例: 6→4投稿でシンプルに）。
- フォローボタンのデザインを目立たせる（例: ボタンサイズ拡大、色変更）。
- Instagramのキャプションを短く、キャッチーに（例: 「新カラー公開！予約はLINEで♪」）。

スクリーンショット例: 新投稿のフィード反映、LINE予約との統合、Google Analyticsトラフィック。

よくある質問（FAQ)

Q1: Instagram Graph APIの設定は必須ですか？
A: Smash Balloonはアクセストークンを自動生成するため、手順1は省略可能。ただし、APIの仕組みを理解するために設定を推奨。

Q2: フィードが表示されない場合、どうすればいいですか？
A: Instagramアカウントの公開設定、プラグインの接続状態、ショートコードの正確性を確認。キャッシュをクリアし、ブラウザを更新してください。

Q3: OLTANAのどのセクションにフィードを設置すべきですか？
A: トップページのファーストビュー下部が効果的。コンタクトページや追尾サイドバーも顧客の利便性を高めます。

Q4: フィードのデザインをさらにカスタマイズするには？
A: 「カスタムCSS」で背景やボタンを調整。Smash Balloonの「Customize」タブでレイアウトを変更。

Q5: 無料版のSmash Balloonで十分ですか？
A: 無料版で基本的なフィード表示は可能。ハッシュタグフィードやストーリーズが必要な場合、Pro版（$49/年）を検討してください。

次のステップ

InstagramフィードをOLTANAのトップページに掲載し、日々の更新情報を案内する準備が整いました！定期的にInstagramに投稿し、キャンペーンやLINE予約と連動して顧客エンゲージメントを高めましょう。Google Analyticsでトラフィックを監視し、フィードの効果を最大化してください。

マニュアルトップに戻る