SeedProd ドキュメント

SeedProd のドキュメント、リファレンスマテリアル、チュートリアル

Facebookコメントブロック

Facebook Commentsブロックを使用すると、訪問者はFacebookアカウントを使用してページのコンテンツとやり取りできるため、使い慣れたコメントエクスペリエンスをSeedProdページに直接もたらします。

このブロックは、ブログ記事、ランディングページ、または個別のコメントシステムを管理することなく、議論を促進したいコンテンツに最適です。訪問者は既存のFacebook IDを使用してコメント、返信、および対話を行うことができます。

要件: Facebook Commentsブロックは、すべての ライセンスプランで利用可能です。このブロックが正しく表示される前に、Page SettingsまたはSeedProd > SettingsFacebook App IDを設定する必要があります。

Facebookコメントブロックの例

Facebook Commentsブロックをページに追加する

次の手順に従って、SeedProdページにFacebook Commentsブロックを追加します。

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

Design > Blocksの下で、Facebook Commentsブロックを目的のセクションにドラッグアンドドロップします。

FacebookコメントブロックをSeedProdページにドラッグする

ステップ2:コンテンツ設定を構成する

追加したら、Facebook Commentsブロックをクリックして設定を開きます。Contentタブで、コメントウィジェットの動作を構成します。

Facebook設定:

  • Facebook App ID:接続されているFacebook Appが表示されます。App IDが構成されていない場合は、Page Settingsで設定するように促されます。接続されると、別のFacebook Appに切り替えるためのChange Appオプションが表示されます。
  • Number of Comments:表示するコメントの最小数を5から20に設定します。
  • Order By:コメントの並べ替え方法を選択します—Social(エンゲージメントでランク付け)、Reverse Time(古い順)、またはTime(新しい順)。
  • Color Scheme:コメントウィジェットのLightまたはDarkの配色を選択します。
  • Lazy Loading:訪問者のビューにスクロールされるまでFacebook Commentsウィジェットの読み込みを遅延させるには、オンに切り替えます。これにより、ページの読み込みパフォーマンスが向上します。
  • Target URL:コメントが関連付けられているURLを設定します。ページのURLを使用するにはCurrent Pageを選択するか、別のURLを指定するにはCustomを選択します。Customに設定すると、カスタムURLを入力するための追加のLinkフィールドが表示されます。
  • URL Format(Target URLがCurrent Pageに設定されている場合に表示):ページのURLがFacebookに渡される方法について、Plain PermalinkまたはPretty Permalinkを選択します。
  • Alignment:コメントウィジェットの水平方向の配置を設定します— Left、Center、またはRight。
Facebookコメントブロックのコンテンツ設定

ステップ3:デザインをカスタマイズする

Advancedタブでは、Facebook Commentsブロックのスペーシングと表示を調整できます。

間隔:

  • Margin:Facebook Commentsブロックの周囲の外側のスペーシング(Top、Right、Bottom、Left)を制御します。
  • Padding:Facebook Commentsブロックの内側のスペーシング(Top、Right、Bottom、Left)を調整します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。

属性:

  • CSS ID: SeedProd がカスタムスタイリングまたはJavaScriptターゲティングのために自動生成したFacebookコメントブロックの一意の識別子を表示します。
  • カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
  • カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。

デバイス表示:

  • デスクトップで非表示: デスクトップ画面でFacebookコメントブロックを非表示にします。
  • タブレットで非表示: タブレットデバイスでFacebookコメントブロックを非表示にします。
  • モバイルで非表示: モバイルデバイスでFacebookコメントブロックを非表示にします。

アニメーション効果:

  • 表示アニメーション: Facebookコメントブロックが表示領域にスクロールインしたときに再生されるアニメーション効果(バウンス、フェードイン、ズームイン、ローテートインなど)を選択します。
Facebookコメントブロックの詳細設定

ステップ4:変更を保存

Facebookコメントブロックの設定が完了し、外観をカスタマイズしたら、作業内容を保存してください。


Facebookコメントブロックをページに追加しました!このブロックを使用すると、訪問者がすでに知っていて信頼しているコメントシステムを使用して、エンゲージメントを簡単に促進できます。ウィジェットが期待どおりにコメントを読み込み、保存できるように、FacebookアプリIDが正しく設定されていることを確認してください。

関連記事