多くのウェブサイト運営者は、訪問者の注意を即座に引くために、ページにInstagram埋め込み動画の自動再生機能を追加したいと考えています。
残念ながら、ネイティブコードをサイトに貼り付けて動画が自動再生されることを期待しても、期待外れに終わるでしょう。
HTMLをいじり回すのに時間を費やした挙句、標準のInstagram iframeが自動再生を完全にブロックしていることに気づくという、その苛立ちを私はよく理解しています。
動的なソーシャルコンテンツを際立たせ、ユーザーの関心を維持したいだけなのに、大きな障害に直面しているように感じます。
良い知らせは、壊れた手動方式の欠点なしに、動画の注目を引く効果を依然として得られるということです。
このガイドでは、ネイティブの自動再生が失敗する理由を説明し、動画を完璧に表示するためのより優れた解決策をご紹介します。
- 埋め込みInstagram動画で自動再生を実際に有効にできますか？
- ウェブサイトにInstagram動画を埋め込む最適な方法
- ウェブサイトにInstagram動画を埋め込む方法 [おすすめの手法]
- Instagram動画を正しく埋め込む準備はできていますか？
埋め込みInstagram動画で自動再生を実際に有効にできますか？
いいえ、標準のInstagram埋め込み動画では自動再生を有効にすることはできません。
Instagramの埋め込みコードに自動再生を追加しようとしても何も起きなかったなら、あなただけではありません。
Instagramの公式埋め込みコードは、動画を実際に埋め込むのではなく、動画がどのように見えるかを表示するiframeを生成します。
訪問者が動画をクリックすると、単にInstagramにリダイレクトされます。これはウェブサイト訪問者を失うことを意味し、大きな問題です。
以下に、知っておくべきことを簡単にまとめます：
- The native Instagram embed uses an <iframe>, and browsers block autoplay on <iframe> content from third-party sources by default.
- Instagramの埋め込みシステムは自動再生属性をサポートしていません。コードに追加しても効果はありません。
- 壊れた自動再生に頼らずとも、同じ注目を集める効果を得られる回避策があります。このガイドでその方法をご紹介します。
Instagramの埋め込み投稿における自動再生機能は、そもそも良いアイデアなのか？
自動再生は瞬時に注目を集めるが、導入前に検討すべき重大な欠点も伴う。
正直な答えは：どちらにも真のトレードオフがあるため、あなたの目標次第です。
以下に、長所と短所を公平に考察した内容を示します：
| 自動再生を支持する理由 | 自動再生に反対する理由 |
|---|---|
| 瞬時に訪問者の注意を引く | ページの読み込み速度を低下させる — 動画は容量の大きいアセットである |
| ユーザーをページに留まらせる | ネイティブのInstagram埋め込みではサポートされていません |
| クリックを必要とせずに動的なコンテンツを表示する | ブラウザは自動再生と音声をますますブロックする |
| 訪問者にとって邪魔に感じられることがある |
良い知らせは、ページ速度の低下を招くことなく、自動再生の注目を集める効果を得る方法があるということです。
ウェブサイトにInstagram動画を埋め込む最適な方法
手動でのInstagram埋め込み方法は、自動再生が機能しません。Instagramのプレイヤーの動作を制御できないためです。
When you copy the official embed code from Instagram, it generates an <iframe> tag that loads Instagram’s external player directly onto your page.
たとえInstagramが自動再生をサポートしていたとしても、現代のブラウザはおそらくそれをブロックするだろう。
ご存知かもしれませんが、ウェブブラウザはユーザー体験の向上、広告ブロッカー導入の誘因の最小化、そして高価なネットワークや帯域幅に制約のある環境でのデータ消費削減を目的として、自動再生ポリシーの厳格化を進めています。
– Chrome for Developers
要するに、サードパーティの埋め込み動画の自動再生は、Instagramとブラウザ自体の両方から同時にブロックされる。
より良い方法：Instagram Feed Proで自動再生のような動作を実現
Instagram Feed Proは、自動再生の注目を引くメリットを享受しつつ、そのデメリットを回避できるWordPressプラグインです。
ページが開いた瞬間に重い動画ファイルを読み込む代わりに、Instagram Feed Proは軽量なサムネイルを表示します。
訪問者がクリックすると、Instagramに遷移することなく、ライトボックス内で動画が直接サイト上で再生されます。
これにより、ページの読み込み速度が低下したり、訪問者がInstagramに流れてしまうリスクなしに、ダイナミックで目を引く動画体験を提供できます。
プラグインの主な機能をご紹介します：
- 最新のInstagram投稿を自動更新 — 手動での更新は不要
- Instagram動画のフィード表示を制御する組み込みビジュアルカスタマイザー
- 事前作成済みテーマとテンプレートで、目を引くデザインを素早く選択
- ハッシュタグ付きInstagramフィード、@メンション、フォトアルバム、ストーリーズに対応
- 動画はサイト上で（ライトボックス形式で）再生されるため、訪問者はページを離れる必要がありません
動画は訪問者が再生ボタンをクリックした時のみ読み込まれるため、大量の動画を表示している場合でもページの表示速度は高速なままです。
訪問者により良い体験を提供するだけでなく、これはサイトのSEO対策にも非常に効果的です。
Instagram動画の埋め込みを追加して、自動再生のメリットを享受する準備はできていますか？
Instagram Feed Proはこちらから登録できます！
ウェブサイトにInstagram動画を埋め込む方法 [おすすめの手法]
以下に、WordPressサイトにInstagram Feed Proを設定する手順を説明します。全体の所要時間は約5分です。
ステップ1：Instagram Feed Proプラグインをインストールして有効化する
始めるには、こちらからInstagram Feed Proを購入してダウンロードする必要があります。
プラグインファイルを入手したら、WordPressサイトでインストールして有効化してください（この手順については、こちらの初心者向けガイドを参照してください）。
ステップ2：Instagram動画フィードを作成する
さあ、初めてのInstagram動画フィードを作成しましょう。WordPressダッシュボードから「Instagramフィード」→「すべてのフィード」へ移動してください。
「新規追加」ボタンをクリックして設定プロセスを開始してください。
次にフィードの種類を選択するよう求められます。ユーザータイムライン、公開ハッシュタグ、 タグ付けされた投稿から選択できます。
選択したら、「Next」をクリックして先に進みます。
ステップ3：インスタグラムのアカウントに接続する
次の画面では、プラグインがコンテンツを取得できるよう、Instagramアカウントを連携する必要があります。「ソースを追加」ボタンをクリックして開始してください。
接続タイプを選択するよう求められます：基本または詳細のいずれかです。
シンプルなInstagramフィードの基本機能で、自身の投稿を表示できます。
一方、高度な接続では、ハッシュタグフィード、Instagramストーリー、メンションを表示できます。
ご自身のニーズに合ったものを選択し、「接続」をクリックしてください。
基本フィードを使用しているため、「Instagramと連携」ボタンをクリックできます。
高度な接続方法ではFacebook経由での接続が必要になりますが、それ以外の手順は同じです。
次に、プラグインにInstagramアカウントへの読み取り専用アクセス権を付与することを選択できます。
注：読み取り専用アクセスであるため、プラグインはあなたの情報を閲覧するのみで、変更を加えることはできません。Smash Balloonが安全である理由について詳しくはこちら
「許可」をクリックするだけで、プラグインがアカウントにアクセスする権限を付与できます。
最後に、Instagramアカウントをソースとして選択し、「次へ」をクリックします。
ステップ4: Instagram動画の埋め込みをカスタマイズする
ここで、Instagram動画の表示方法や表示されるコンテンツを細かく制御できます。
次の画面で、オプションからフィードテーマを選択してください。各テーマは色、アイコン、投稿スタイルなどを変更します。
オプションを選択し、「次へ」をクリックした後。
次に、デザインに合ったテンプレートを選択します。各テンプレートは投稿を異なるレイアウトで表示します。
以前と同様に、「次へ」をクリックして選択を確認できます。
フィードを動画のみ表示するようにフィルタリングする
ご希望であれば、このフィードを使用してInstagramの動画と写真を同時に埋め込み表示できます。
動画のみを表示するには、まず上部の「設定 」をクリックし、「フィルターとモデレーション」を選択してください。
「特定の種類の投稿を表示」セクションまでスクロールダウンしてください。
「写真」オプションの選択を解除すると、フィードには動画コンテンツのみが表示されます。
その後、フィード動画、リール、または両方を表示するかを選択できます。
選択内容に問題がなければ、「変更を保存」をクリックしてください。
次に、設定ボタンをクリックしてビジュアルカスタマイザーを再度開きます。
今回は、上部の「カスタマイズ」タブをクリックしてください。
フィードレイアウトの選択
右側には、Instagram埋め込みのライブプレビューが表示されます。左側には、カスタマイズオプションのパネルがあります。
まず、フィードレイアウトをクリックして利用可能なレイアウトを確認してください。
その後、パネルには選択可能な4つのレイアウトが表示されます：グリッド、カルーセル、メイソンリー、 ハイライト。
グリッド表示は、大量のInstagram投稿を一度に表示するのに最適です。一方、Instagram動画のオリジナル比率を維持したい場合は、マソンリーレイアウトを使用できます。
カルーセルレイアウトを使用してサイトをインタラクティブにしたり、ハイライトレイアウトで特定の動画に焦点を当てたりすることもできます。
レイアウトを選択したら、[保存]をクリックしてください。
投稿スタイルの調整
まず、主なカスタマイズオプションに戻りましょう。左上の「カスタマイズ」ボタンをクリックするだけです。
カスタマイザー内で「投稿」をクリックすると、個々の投稿の表示方法を調整できます。
ここから、各Instagram投稿の外観をカスタマイズできます。以下のオプションが利用可能です：
- ポストスタイル
- 画像と動画
- キャプション
- いいね！とコメントのまとめ
- ホバー状態
現時点では、こちらの「投稿スタイル」オプションをクリックしてください。
投稿スタイルでは、お好みの見た目に応じてボックス付きまたは通常から選択できます。
以前と同様に、変更を保存してから次に進むには「保存」をクリックしてください。
ボックス化された動画は背景とは別に表示され、背景色、枠線のサイズ、影を選択できます。
同様に、通常のInstagram動画埋め込みは、分離なしにページまたはサイドバーの背景に配置されます。
ステップ5: サイトにInstagram動画の埋め込みを追加する
Instagram動画の設定とカスタマイズが完了したら、次はサイトに追加する段階です。
Instagram Feed Proでは、これを実現する2つの簡単な方法を提供します：ページ上での表示、またはサイドバーやフッターのウィジェットエリアでの表示です。
ページにInstagram動画を埋め込む方法
上部にある「埋め込み」ボタンをクリックすると、Instagramコンテンツをサイトに追加する方法が表示されます。
ご覧の通り、Instagram Feed Proではショートコードを提供したり、ページやウィジェット上で動画を表示したりできます。
ポップアップ上で「ページに追加」をクリックできます。
これは、あなたのウェブサイトで公開したページの一覧を示しています。
フィードを表示したいWordPressページを選択し、「追加」をクリックしてください。
ページエディタを開いたら、プラスアイコン（+）をクリックして新しいブロックを追加します。
これは他のWordPressブロックと同じように動作します。埋め込みコードを扱う必要はありません。
「Instagram」を検索し、検索結果からInstagramフィードブロックを選択します。
すべてが満足のいく状態になったら、「公開」をクリックしてフィードをページに表示させます。
Instagram動画をサイドバーやフッターに埋め込む方法
お好みであれば、動画をウィジェット領域に追加することも可能です。ただし、この機能はWordPressテーマがサイドバーまたはフッターのウィジェットをサポートしている場合にのみ有効です。
まず、 Instagramフィード » すべてのフィードに移動し、作成したInstagram動画フィードをクリックします。
以前と同様に、[埋め込み]オプションをクリックしてポップアップを開きます。
以前と同じオプションが表示されます。
今回は、ポップアップで「ウィジェットに追加」オプションをクリックしてください。
しばらくお待ちいただくと、プラグインがウェブサイト上のウィジェットページへリダイレクトします。
ここから、サイドバーパネルを選択するか、フッターパネルを選択してください。
最終ステップはどちらの方法でも同じですので、動画の保存場所をお好きな方を選択してください。
ウィジェット領域内の プラスアイコン（+）をクリックし、 Instagramフィードウィジェットを選択して追加します。
選択したウィジェット領域に、動画フィードが表示されます。
Instagram動画を正しく埋め込む準備はできていますか？
Instagramの動画をサイト速度を低下させず、訪問者をInstagramに誘導せずにエンゲージさせたいなら、Instagram Feed Proが当社がテストした中で最もシンプルな解決策です。
自動再生による視覚的インパクト、超高速の読み込み時間、そしてInstagram動画のデザインを完全にコントロールできます。
Instagramの動画をサイトに埋め込む準備はできましたか？Instagram Feed Proはこちらから入手！
こちらのサイトにアクセスしている間に、WordPressサイトにInstagramチャットを追加する方法についてのガイドもご覧ください。
