SeedProd ドキュメンテーション

SeedProdのドキュメント、参考資料、チュートリアル

フェイスブック埋め込みブロック

Facebook埋め込みブロックを使用すると、Facebookの投稿、動画、コメントをSeedProdの任意のページに直接埋め込むことができます。訪問者をFacebookに誘導する代わりに、公開されているFacebookコンテンツを、ユーザーが既にエンゲージしている場所で直接表示できます。

製品発表の投稿を強調したい場合、動画によるお客様の声を紹介したい場合、特定の顧客コメントを特集したい場合でも、このブロックは各コンテンツタイプに合わせた制御機能を備えた柔軟な埋め込みオプションを提供します。

Facebook埋め込みブロックの例

要件: Facebook埋め込みブロックは、すべてのライセンスプランで利用可能です。このブロックが正しくコンテンツを表示するには、ページ設定 またはSeedProd > 設定で FacebookアプリIDを設定する必要があります。


Facebook埋め込みブロックをページに追加する

SeedProdページにFacebook埋め込みブロックを追加するには、以下の手順に従ってください:

ステップ1: ブロックを追加する

デザイン > ブロック の下にあるFacebook 埋め込みブロックを、ページの希望するセクションにドラッグ&ドロップします。

Facebook埋め込みブロックをSeedProdページにドラッグする

ステップ2: コンテンツ設定の構成

追加後、Facebook埋め込みブロックをクリックして設定を開きます。「コンテンツ」タブで、表示するFacebookコンテンツと動作方法を設定します。

Facebook設定:

  • FacebookアプリID:接続済みのFacebookアプリを表示しますアプリIDがまだ設定されていない場合、ページ設定で設定するようプロンプトが表示されます。接続後、「アプリを変更」オプションが表示され、別のFacebookアプリに切り替えることができます。
  • 埋め込みタイプ:埋め込むFacebookコンテンツの種類を選択します —投稿動画またはコメント。この設定の下にあるフィールドは、選択したタイプに応じて変化します。
  • 投稿リンク(埋め込みタイプが「投稿」に設定されている場合に表示):埋め込みたい公開Facebook投稿の完全なURLを入力してください。
  • 動画リンク(埋め込みタイプが動画に設定されている場合に表示):埋め込みたいFacebook動画の完全なURLを入力してください。
  • コメントリンク(埋め込みタイプが「コメント」に設定されている場合に表示):埋め込みたいFacebookコメントの完全なURLを入力してください。
  • 投稿全文を含める(埋め込みタイプが「投稿」または「動画」に設定されている場合に表示):オンにすると埋め込みと共に投稿全文を表示し、オフにすると要約版を表示します。
  • 全画面表示を許可(埋め込みタイプが「動画」に設定されている場合に表示):オンにすると、訪問者が埋め込まれた動画を全画面表示に拡大できるようになります。
  • 自動再生(埋め込みタイプが「動画」に設定されている場合に表示):ページ読み込み時に動画を自動再生するにはオンにします。
  • 字幕(埋め込みタイプが「動画」に設定されている場合に表示):利用可能な場合に埋め込み動画に字幕を表示するにはオンにします。
  • 親コメント(埋め込みタイプが「コメント」に設定されている場合に表示):親投稿を埋め込みコメントと共に表示して文脈を追加するには、このオプションをオンにしてください。
  • 配置:埋め込みコンテンツの水平方向の配置を設定します — 左、中央、または右。
Facebook埋め込みブロックのコンテンツ設定

ステップ3:デザインのカスタマイズ

[詳細設定]タブでは、Facebook埋め込みブロックの間隔と表示設定を調整できます。

スペース:

  • マージン:Facebook埋め込みブロックの周囲の外側の間隔(上、右、下、左)を制御します。
  • パディング:Facebook埋め込みブロック内の内側の余白(上、右、下、左)を調整します。デスクトップ、タブレット、モバイルごとに個別の値を設定できます。

属性:

  • CSS ID:Facebook埋め込みブロックの自動生成された一意の識別子を表示します。SeedProdによってカスタムスタイリングやJavaScriptターゲティング用に自動的に作成されます。
  • カスタムクラス:テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
  • カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値。

デバイスの可視性:

  • デスクトップで非表示:デスクトップ画面でFacebook埋め込みブロックを非表示にします。
  • タブレットで非表示:タブレット端末でFacebook埋め込みブロックを非表示にします。
  • モバイルで非表示:モバイル端末でFacebook埋め込みブロックを非表示にします。

アニメーション効果:

  • 表示アニメーション:Facebook埋め込みブロックが画面にスクロールインする際に再生されるアニメーション効果を選択します。バウンス、フェードイン、ズームイン、回転インなど、多数の効果が用意されています。
Facebook埋め込みブロックの詳細設定

ステップ4: 変更を保存する

Facebook埋め込みブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。


Facebook埋め込みブロックをページに追加できました!このブロックを使えば、公開されているFacebookコンテンツをSeedProdページに簡単に取り込め、訪問者をサイト外に飛ばすことなく関心を維持できます。埋め込みコンテンツが正しく読み込まれ表示されるよう、FacebookアプリIDが正しく設定されていることを確認してください。

関連記事