ビデオ、ソーシャル メディア、iframe の埋め込み

Facebook、Vimeo、またはソーシャル メディアから YouTube ビデオを共有し、iframe をサイトやページに埋め込みます。

ビデオの表示

ビデオ カードを追加して、YouTube、Vimeo、または Facebook ビデオを埋め込みます。

ビデオを表示するには、次の手順を実行します:

1. サイトまたはページを編集モードで開きます。
2. [カスタマイズ] パネルで [レイアウト] を選択します。
3. [ビデオ] カードをレイアウトの行にドラッグします。
4. [ビデオ リンク] フィールドに、Facebook、Vimeo、または YouTube のビデオの URL を貼り付けます。
5. ビデオ ソースに応じて、ビデオ ディスプレイを構成できる追加のオプションが表示されます。
   • Facebook ビデオの場合、[タイトル] を入力してアクセシビリティーを有効化し、[ポスト テキストの表示] を選択すると、いいね！、コメント、シェアの数、およびその他の関連テキストが表示されます。 ビデオ キャプションを表示するには、[キャプションを常に表示] を選択します。
   • Vimeo ビデオの場合、[タイトル] を入力してアクセシビリティーを有効化し、[ビデオ タイトルの表示]、[ビデオ所有者の表示]、[ビデオ所有者のサムネイルの表示]、[ビデオのループ再生] を選択します。
   • YouTube ビデオの場合、[タイトル] を入力してアクセシビリティーを有効化し、[YouTube ブランド表示] YouTube および [ビデオのループ再生] の実施可否を選択します。
6. [保存] を選択します。

1 つの Facebook または X の投稿の表示

1 つの投稿を表示して、特定の投稿をハイライト表示できます。

単一の投稿を表示するには、次の手順を実行します。

1. サイトまたはページを編集モードで開きます。
2. [カスタマイズ] パネルで [レイアウト] を選択します。
3. [ソーシャル メディア] カードをレイアウトの行にドラッグします。
4. [投稿またはタイムラインのリンク] フィールドに、パブリックに共有されている投稿の URL を貼り付けます。 正しい URL をコピーするには、投稿のタイム スタンプ (投稿の左上隅の日付または時刻) を選択してから、サイトの編集に戻る前にブラウザーで新しい URL をコピーします。
5. [保存] を選択します。

Facebook または X アイテムの表示

Facebook または X のタイムラインまたはイベントを、メッセージを送信するオプション、ヘッダー サイズを拡大するオプション、カバー写真を追加するオプションとともに表示します。

タイムラインまたはイベントを表示するには、次の手順を実行します:

1. サイトまたはページを編集モードで開きます。
2. [カスタマイズ] メニューで、[レイアウト] を選択します。
3. [ソーシャル メディア] カードを既存の行にドラッグします。
4. [ソーシャル メディア投稿の URL] フィールドに、パブリックに共有されている Facebook ページの URL を貼り付けます。
5. 必要に応じて、切り替えボタンを選択し、次のオプションの組み合わせをオンにすることができます。
   • [タイムライン] を使用すると、ビジターは過去の投稿を下にスクロールできます。
   • [イベント] には、ページのイベント ビューのリスト ビューが表示されます。

   [ソーシャル メディア] カードを使用すると、Facebook イベント フィードで予期しない結果が生じる可能性があります。 詳細については、「ソーシャル メディア カードと Facebook イベントの問題」をご参照ください。

   • [メッセージ] では、Facebook Messenger を使用して Facebook ページの管理者にメッセージを送信できます。
   • [大きいヘッダーを使用] をクリックすると、ページのヘッダーのサイズが大きくなります。
   • [カバー写真の表示] をクリックすると、ページのカバー写真が表示されます。
6. [保存] を選択します。

iframe カードを使用したコンテンツの埋め込み

[iframe] カードを使用すると、アプリ、Web マップ、ダッシュボードなどの外部リソースをその URL を使用して埋め込むことができます。

ヒント:

Iframes は、ダッシュボードとインフォグラフィックスを表示する場合に最適です。 Experience Builder Web アプリ、Insights ページ、Web マップ、調査、ストーリーなどの他のアイテムについては、ギャラリー カード、マップ カード、アプリケーション カード、調査カードの使用を検討してください。

2 個以下の iframe インスタンスを使用することを検討します。 1 つのサイトまたはページに使用する iframes が多すぎると、モバイル ビューでのパフォーマンスが低下する可能性があります。 iframe と別のカードのどちらを使用していても、表示する主要なアイテムを 2 個以下にすると、より明確でアクセスしやすいデザインになります。 残りのアイテムにはギャラリー カードを使用してみてください。

iframe カードを使用してコンテンツを埋め込むには、次の手順を実行します。

1. サイトまたはページを編集モードで開きます:
2. [カスタマイズ] パネルで [レイアウト] を選択します。
3. [Iframe] カードをレイアウトの行にドラッグします。
4. [Iframe の URL] を入力し、[適用] を選択します。

   ヒント:

   埋め込む URL のみを貼り付け、別の Web サイトの iframe コードを埋め込まないでください (esri.com ドメインはサポートされていません)。 HTTP を使った URL は、HTTPS を使っている編集モードでは表示されません。 サイトを保存し表示して、iframe を観察します。

5. 埋め込んだアプリが小型のデバイスで正しく機能しない場合、[モバイル URL のオーバーライド] に代替 URL を入力してください。
6. アプリケーションのモバイル バージョンが存在しない場合は、[モバイルで非表示] 切り替えを使用します。
7. [自動] をオンにしてスクロールを有効にします。

   ヒント:

   モバイル デバイスでは、スクロールが常に適切であるとは限りません。これは、アプリケーションを通過できない可能性があるためです。 変更を適用する前に、モバイル デバイスでのスクロール可能な iframe の動作を確認してください。

8. 必要に応じて、[共有の有効化]、[ボタンを常に表示] の切り替えボタンを選択します。
9. iframe の高さを指定します。
10. [タイトル] を入力してアクセシビリティーを有効化します。
11. [保存] を選択します。