Instagramフィード埋め込み
Instagramの投稿を、ホームページに自動で表示します。接続して1タグ貼るだけ。以後はインスタを更新するだけでサイトの表示も変わります。表示回数は無制限・約1時間ごとに自動更新・無料です。
表示イメージ
↑ デモ表示(サンプル画像・通信なし)。実際はあなたのInstagramの最新投稿が並びます。
埋め込みコードを作る(無料)
無料・クレジットカード不要。発行したコードの管理に使います。
Metaの開発者ページで、自分専用のトークンを無料生成します(初回のみ・約10分)。くわしい取り方はこのページの下にあります →
接続すると、ここにあなた専用の埋め込みコードが表示されます。
列数は data-cols="3"(3・4・6)、表示件数は data-limit="12" で調整できます。
↑ あなたのフィードのプレビュー
アクセストークンの取り方(初回のみ・約10分・無料)
Metaのアプリ審査は不要です——自分で作ったアプリを自分のアカウントに繋ぐ組み合わせは、Metaの仕様上そのまま使えます。画面の文言は多少変わることがありますが、流れは変わりません。
準備: Instagramをビジネス/クリエイターアカウントに
Instagramアプリの「設定とアクティビティ → アカウントの種類とツール → プロアカウントに切り替える」。無料・1分。すでにお店や事業のアカウントなら済んでいることが多いです。
1. Metaの開発者ページでアプリを作る
developers.facebook.com を開き、Facebookアカウントでログイン →「マイアプリ」→「アプリを作成」。ユースケースは「Instagram」を選択(見当たらなければ「その他」→ アプリタイプ「ビジネス」で作成し、あとから製品「Instagram」を追加)。アプリ名は自由です(例: 自分のお店の名前)。
2. Instagramログインの設定画面を開く
作成したアプリの左メニューから「Instagram」→「Instagramビジネスログインを使ったAPIセットアップ(API setup with Instagram business login)」を開きます。
3. 自分のアカウントを追加して、トークンを生成
「アクセストークンを生成(Generate access tokens)」の欄で「アカウントを追加(Add account)」→ 自分のInstagram(ビジネス/クリエイター)でログインして許可 → アカウント名の横の「トークンを生成(Generate token)」→ 表示された長い文字列を全文コピーします。
4. このページに戻って、貼り付け →「接続する」
上のステップ2の入力欄に貼り付ければ完了。埋め込みコードが発行されます。
・トークンは合言葉と同じです。ハルオフィス以外には貼らないでください。
・有効期限は60日ですが、接続後はハルオフィスが自動で延長し続けます。
・Instagramのパスワードを変更すると失効します。その場合は同じ手順の3だけやり直して、新しいトークンを貼り直してください。
貼り付け先ごとの手順
HTMLサイト(Astro・Next.js・静的サイト)
表示したい場所に、コピーしたコードをそのまま貼り付けます。以上です。
WordPress
ブロックエディタで「カスタムHTML」ブロックを追加し、コードを貼り付けます。ウィジェットエリア(サイドバー・フッター)でも同じです。
STUDIO・ペライチ・Wix
各サービスの「コード埋め込み」機能に貼り付けます。正直な注意点として、コード埋め込みはSTUDIO・ペライチでは有料プランの機能です(各サービスの料金ページでご確認ください)。
よくある質問
本当に無料ですか?
無料です。表示回数の上限もありません。埋め込みの下に小さく「by ハルオフィス」のクレジットが入ります。これが無料で提供できる理由です。
Metaのアプリ審査は必要ないのですか?
不要です。Metaの仕様では、自分で作成したアプリを自分のアカウントに接続する場合、アプリ審査なしでそのまま使えます。このツールはその仕組みを使っているため、開発者ページでの初回設定(約10分)だけで、誰でも今日から利用できます。
どのInstagramアカウントで使えますか?
ビジネスアカウントまたはクリエイターアカウントが必要です(個人アカウントは、Instagramの仕様により接続できません)。切り替えは無料で、Instagramアプリの「設定とアクティビティ → アカウントの種類とツール」から1分でできます。
データはどこに送られますか?(このツールはサーバーを使います)
ハルオフィスの他のツールは端末内で完結しますが、このツールだけはInstagramとの接続のためサーバーを使用します。保存するのは「接続用のアクセストークン」と「公開投稿のキャッシュ(画像URL・キャプション・投稿リンク)」だけです。DM・非公開情報・フォロワー情報は、接続に使う権限(instagram_business_basic)自体が読み取れない仕組みです。接続はいつでもこのページから解除でき、解除するとトークンとキャッシュは即座に削除されます。
埋め込みが表示されないときは?
①コードが2行とも貼られているか ②Instagramがビジネス/クリエイターアカウントか ③Instagramのパスワード変更やアカウント種別変更をした場合は、トークンを再生成して貼り直し——の順にご確認ください。解決しないときはヘルプ・お問い合わせへ。表示は約1時間ごとの更新のため、新しい投稿の反映には最大1時間かかります。