ウェブサイトにインスタグラムストーリーズを表示する方法(ステップバイステップガイド)
ホーム ブログ ウェブサイトにインスタグラムストーリーズを表示する方法(ステップバイステップガイド)

ウェブサイトにインスタグラムストーリーズを表示する方法(ステップバイステップガイド)

インスタグラムのストーリーをウェブサイトに表示する方法

インスタグラムストーリーズは、タイムリーな最新情報を共有し、その瞬間にオーディエンスとエンゲージするための強力なツールです。通常のブログ記事では捉えにくい、ダイナミックでパーソナルな感覚をブランドに与えてくれる。

問題は、この魅力的なコンテンツがインスタグラムに閉じ込められていることだ。せっかくの素晴らしい素材も、ウェブサイトの訪問者からはまったく見えなくなってしまう。

これを解決するために、私はインスタグラムのストーリーズをワードプレスのウェブサイトに直接埋め込む簡単な方法を見つけた。

このシンプルな変更が大きなインパクトを与えたので、正確な手順を説明しよう。あなたのウェブサイトでインスタグラム・ストーリーズを表示し、訪問者に全体像を伝える方法を学びます。

この記事の中で

ウェブサイトにインスタグラム・ストーリーズを表示する理由

インスタグラムストーリーズをウェブサイトに追加することで、ウェブサイト訪問者とソーシャルメディアコンテンツの架け橋となります。多くの企業は、最も魅力的なコンテンツを最も多くのオーディエンスに届けることができるこの機会を逃しています。

インスタグラムストーリーズをウェブサイトに埋め込む主なメリットは以下の通りです:

  • ウェブサイトのエンゲージメントを高める:ストーリーは、自動的に更新される新鮮でダイナミックなコンテンツを表示することで、訪問者をサイトに長くとどめます。
  • 社会的証明と信頼を築く:リアルなカスタマーレビューや舞台裏のコンテンツは、潜在顧客があなたのブランドとつながりを持つのに役立ちます。
  • 訪問者をフォロワーに変える:ウェブサイト訪問者は、あなたのストーリーズをプレビューし、あなたのサイトを離れることなく、Instagramであなたをフォローするかどうかを決めることができます。
  • コンテンツ制作の時間を節約:既存のInstagramストーリーズが自動的にウェブサイトに表示されるため、余分な作業をすることなくコンテンツを増やすことができます。
  • ユーザー体験を向上させる:Instagram Storiesを追加することで、訪問者がウェブサイトと交流し、コンテンツをチェックする方法が増えます。

手動 vs プラグイン方式:どちらを選ぶべきか?

インスタグラムストーリーズをウェブサイトに埋め込む場合、主に2つの選択肢がある:

  • 手動の方法: コーディングとInstagram APIを自分で操作してストーリーズを取得し、ウェブサイトに表示する。
  • プラグイン(自動)の方法: インスタグラムストーリーズを自動的に取得し、埋め込んでくれるWordPressプラグインを使う。

なぜ手動埋め込みは初心者には不十分なのか

手動で埋め込むには、インスタグラムのAPIを直接操作する必要があり、開発者向けアプリケーションを作成し、アクセストークンを管理し、カスタムコードを記述する必要がある。

経験豊富な開発者でさえ、このプロセスには時間がかかり、インスタグラムがAPIを更新すると壊れやすい。初心者にとってはなおさらだ。

さらに、インスタグラムは定期的にAPI要件を変更します。これは、手動でコーディングしたソリューションが警告なしに機能しなくなる可能性があり、早急な技術的修正が必要になることを意味する。

インスタグラム・フィード・プロの利点

Instagram Feed Proは、API接続、更新、メンテナンスを自動的に処理することで、技術的な頭痛の種をすべて解消します。

インスタグラム・フィード・プロ ホームページ

星4.9/5の評価と100万人以上のユーザーを持ち、信頼性が高く初心者に優しいことが証明されています。以下は、Instagram Feed ProがInstagramストーリーズの表示に最適な主な機能です:

  • コーディング不要: 3ステップのシンプルなセットアップで、初心者でも簡単に操作できます。
  • 自動テーママッチング:あなたのウェブサイトの色をコピーするので、インスタグラムのコンテンツはあなたのデザインとシームレスに調和します。
  • 軽量で高速:ウェブサイトの読み込み速度を低下させない最適化されたコード
  • 豊富なカスタマイズオプション:ライブカスタマイザーでレイアウト、カラー、ボタンデザインなどをコントロールできます。
インスタグラムフィードプロプラグイン用ライブフィードエディタ
  • 簡単なテンプレートとテーマ: テンプレートやテーマを即座にコピーして、ユニークなデザインのInstagramコンテンツのフィードを作成できます。
  • モバイル対応:余分な設定をしなくても、ストーリーはすべてのデバイスで完璧に表示されます。
  • 自動アップデート:このプラグインは、InstagramのAPIの変更とセキュリティアップデートをすべて処理します。
  • ワンクリックでストーリーを閲覧:訪問者はウェブサイト上で直接ストーリーを開いて閲覧することができます。

Instagramのストーリーを表示するだけでなく、この素晴らしいツールを使ってInstagramの投稿、リール、ハッシュタグフィードなどを表示することができる。

Instagramとウェブサイトを統合する準備はできましたか?ここからInstagram Feed Proを始めることができます

ステップ・バイ・ステップ:ウェブサイトにインスタグラム・ストーリーズを表示する方法

それでは、インスタグラム・ストーリーズをワードプレスのウェブサイトに追加する完全なプロセスを説明しよう。

各ステップはわかりやすく、初心者向けにデザインされているので、技術的な経験がなくても安心してついていくことができる。

ステップ1:Instagram Feed Proをダウンロードしてインストールする

まず、Instagram Feed Proプラグインを入手し、コンピュータにダウンロードする必要があります。

WordPressウェブサイトにプラグインをインストールし、有効化します(初心者ガイドをご覧ください)。

有効化すると、WordPressのダッシュボードにInstagram Feedという新しいメニュー項目が表示されます。

ステップ2:最初のインスタグラムストーリーズフィードを作成する

インスタグラム・ストーリーズのフィードを作成するには、プラグインのシンプルなガイド付き設定プロセスに従うことができる。

まず、WordPressのダッシュボードからInstagram Feed " All Feedsに移動し、Add Newボタンをクリックします。

インスタグラムフィードプロ

プラグインは、あなたのサイトに表示したいInstagramフィードのタイプを選択するように尋ねます。ユーザーのタイムライン、公開ハッシュタグ、タグ付き投稿のオプションが表示されます。

このチュートリアルでは、User Timelineフィードタイプを選択し、Nextをクリックして続行します。

フィードタイプを選択 instagramフィードプロ

ステップ3:インスタグラムのアカウントに接続する

インスタグラムのプロフィールに接続することで、フィードが自動的に最新のストーリーズコンテンツをウェブサイトに取り込むことができる。

ウェブサイトにストーリーズを表示するには、Instagramのビジネスアカウントかクリエイターアカウントが必要です。

アカウントの接続を開始するには、[新規追加]ボタンをクリックしてください。

新しいインスタグラムフィードのソースを追加する

次に、プラグインはInstagramの接続タイプを選択するように尋ねます:Business BasicまたはBusiness Advancedです。

  • ベーシック接続は、通常のインスタグラム投稿を表示するのに最適です。
  • アドバンス接続では、ハッシュタグフィード、ストーリーズ、タグ付き投稿などの追加機能がアンロックされる。

このガイドでは、「高度な接続」を選択し、「接続」ボタンをクリックします。

インスタグラムの接続タイプを選択する

Facebookと接続」ボタンをクリックすると、ウェブブラウザでFacebookが開き、接続プロセスが完了します。

ハッシュタグフィードのためにフェイスブックアカウントを接続する

Facebookはあなたのアカウント情報への読み取り専用アクセスを要求します。プラグインはあなたのコンテンツを見ることができるだけで、アカウントに変更を加えることはできません。

FacebookのポップアップでContinueをクリックし、必要な許可を与える。

フェイスブックの継続ボタン

接続後、FacebookはWordPressウェブサイトにリダイレクトし、Instagram Storiesフィードのソースとしてこのアカウントを確認できます。

接続したいアカウントを選択し、Addをクリックします。

インスタグラムフィードプロに接続アカウントを追加

最後に「Next(次へ)」をクリックして、接続プロセスを完了します。

接続するインスタグラムのアカウントを選択する

これで、Instagramアカウントとの接続が完了し、今後はウェブサイトを離れることなく、このソースをフィードに再利用することができる。

ステップ4:Instagramフィードのデザインを選ぶ

インスタグラム・ストーリーズのフィードは、あなたのウェブサイトのデザインを自動的にコピーするので、すぐに見栄えが良くなる。

ストーリーと一緒に通常のインスタグラム・コンテンツを投稿したい場合は、テーマをインポートすることもできる。

これらのテーマはそれぞれ、インスタグラムのストーリーフィードにユニークなデザインを与える:

  • デフォルト
  • モダン
  • ソーシャルウォール
  • 概要
  • オーバーラップ

お好みのテーマを選択し、「次へ」をクリックします。

インスタグラムのテーマを選ぶ

次に、テンプレートを使って通常のインスタグラム投稿のレイアウトを変えることができる。

前回同様、あなたのウェブサイトのスタイルに最も適したテンプレートを選び、「次へ」をクリックして次に進みます。

フィードテンプレート インスタグラム

テンプレートを選択した後、Instagram Feed Proはあなたのウェブサイト上でライブカスタマイザーを開きます。左側には、フィードのレイアウト、配色、ヘッダーなどをカスタマイズするオプションがあります。

右側にはストーリーズフィードのライブプレビューが表示され、リアルタイムで変更を確認しながら調整できます。

インスタグラム用ライブフィードエディター プロストーリーフィード

Instagramのストーリーには関係ないかもしれないが、ここには多くのカスタマイズオプションがある:

投稿のレイアウトを変更する

レイアウトをクリックすると、インスタグラムの写真や動画をウェブサイトに表示する方法を変更するオプションが表示されます。

ここでは4つの異なるレイアウトから選ぶことができる:グリッド、カルーセル、メイソンリー ハイライト。

インスタグラムのストーリーフィードのレイアウトオプション

Instagramのストーリーを埋め込むだけですか?

ここで下にスクロールして、表示される投稿の数を0に設定することができます。

インスタグラムのストーリーフィードの投稿数を変更する

変更後、「Save」をクリックしてから次に進みます。

また、左上の小さなカスタマイズボタンをクリックすると、メインのカスタマイズオプションに戻ることができます。

フィードのカスタマイズオプションに戻る

インスタグラムの投稿キャプションをカスタマイズする

左側のメニューから投稿 " キャプションを開くと、インスタグラムの投稿の下にあるキャプションを変更できる。

ここでは、表示されるキャプションの長さ、フォントのサイズと色も変更できます。

インスタグラム投稿のキャプションを編集する

前回と同様、変更後は忘れずに保存してください。

インスタグラムのストーリー・フィードのヘッダーを編集する

また、Instagramフィードの上のヘッダーをカスタマイズすることもできます。

ここでは、ヘッダーのレイアウトとサイズを変更できます。

インスタグラムのフィードヘッダーを編集する方法

さらに、インスタグラムのプロフィール写真の代わりにカスタムアバターを選ぶこともできる。

先ほどと同じように、変更を保存してメインのカスタマイズ・オプションに戻ります。

ご覧の通り、カスタマイズはいたってシンプル。配色、ボタンデザイン、アイコンなど、他の要素もカスタマイズできます。

Instagram Storiesフィードの見た目に満足したら、Saveをクリックしてデザインを確定する。

ステップ5:Instagramストーリーズのフィードを埋め込む

Instagram Feed Proはとてもユーザーフレンドリーなので、複雑な埋め込みコードや専門的な知識がなくても、簡単にストーリーズフィードを埋め込むことができます。

始めるには、エディター上部の埋め込みボタンをクリックしてください。

エディターからインスタグラムのフィードを埋め込む

このプラグインは、インスタグラムストーリーズのフィードを表示する2つの方法を含む、すべての埋め込みオプションをポップアップで表示します:

  • ページに追加:ソーシャルメディア専用ページや会社概要ページに最適
  • ウィジェットに追加:ウェブサイト全体にストーリーを表示させるのに最適です。

この例では、インスタグラム・ストーリーズ用にワードプレスのページを使うことにする。

そこで、「ページに追加」オプションをクリックして先に進むことができる。

インスタグラムのストーリーフィードをサイトのページに追加する

このプラグインは、あなたのウェブサイト上のすべてのWordPressページを表示します。

ストーリーを表示させたいページを選択し、「追加」をクリックします。

インスタグラムを表示したいページを選ぶ

WordPressのブロックエディターでそのページを開きます。これで、便利なInstagram Feedブロックを使ってストーリーズを埋め込むことができます。

エディターのプラス(+)アイコンをクリックして、新しいコンテンツブロックを追加します。

新しいワードプレスブロックを追加する

検索バーで「instagram」と検索し、その結果からInstagram Feedブロックを選択する。

ブロックには、新しく作成されたインスタグラムストーリーズのフィードが自動的に表示されます。

インスタグラムのフィードページを埋め込む

Publishをクリックすると、インスタグラムのコンテンツがウェブサイト上で公開されます。

その後、ページを開いて、あなたのインスタグラム・コンテンツが訪問者にどのように見えるかを確認することができる。

インスタグラムのストーリーフィードをウェブサイトに表示

インスタグラム・ストーリーを今アクティブにしているなら、プロフィール写真をクリックするだけで、ウェブサイト上でそれをチェックできる。

インスタグラムのフィードをチェックする

インスタグラム・ストーリーズのベストプラクティス

ストーリーを正しく表示させることは、始まりに過ぎません。エンゲージメントを最大化し、埋め込みストーリーズから最高の結果を得るためには、他よりも効果的な特定の戦略があります。

私は実際のウェブサイトでさまざまなアプローチをテストし、これらの実践が一貫して、より良いユーザーエンゲージメントとソーシャルメディアの成長をもたらすことを発見した。

  • ホームページのトップページや会社概要のページの近くにストーリーを配置することで、訪問者があなたのブランドについてより明確に理解できるようになります。
  • サイドバーへの配置は、複数のページにわたってストーリーを表示し続けるので、ブログやコンテンツの多いウェブサイトに最適です。
  • サービスベースのビジネスの場合、コンバージョンを高めるために、問い合わせやサービスのページに顧客の声とともにストーリーを埋め込むことをお勧めする。
  • Eコマースサイトでは、商品ページにストーリーを設置することで、使用中の商品や顧客の声を見せることができる。
  • ストーリーズのフィードを魅力的に保つには、少なくとも週に2~3回は新しいストーリーズを投稿することを目指しましょう。コンスタントに投稿することで、ウェブサイトに常に新鮮なコンテンツを提供することができます。
  • ウェブサイト訪問者を意識したストーリーの作成を検討しましょう。舞台裏のコンテンツ、簡単なヒント、顧客特集などは特に効果的です。

今日からインスタグラムのストーリーを紹介しよう

WordPressウェブサイトにInstagram Storiesを追加することは、エンゲージメントを高め、訪問者とのより強いつながりを構築する最も簡単な方法の1つです。

あなたのウェブサイトの訪問者は、あなたの最新のコンテンツを見ることができ、Instagramで簡単にあなたとつながることができます。

インスタグラム・フィード・プロを使えば、わずか10~15分でストーリーズをサイトに美しく表示させることができる。

そして、エンベデッド・ストーリーズの成功の鍵は、一貫性と戦略的な配置であることを覚えておいてほしい。

始める準備はできましたか?今すぐInstagram Feed Proを入手してください!

インスタグラムを活用する方法をもっと知りたいですか?インスタグラムをビジネスに活用する方法については、こちらのガイドをご覧ください。

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。