SeedProd ドキュメンテーション

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

Facebookコメントブロック

Facebookコメントブロックにより、訪問者はFacebookアカウントを使用してページコンテンツと交流でき、SeedProdページに直接、慣れ親しんだコメント体験をもたらします。

このブロックは、ブログ記事やランディングページ、あるいは別途コメントシステムを管理せずに議論を促したいあらゆるコンテンツに最適です。訪問者は既存のFacebookアカウントを使用して、コメントや返信、交流を行うことができます。

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

Facebookコメントブロックの例

Facebookコメントブロックをページに追加する

SeedProdページにFacebookコメントブロックを追加するには、以下の手順に従ってください:

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

デザイン > ブロックで、Facebookコメントブロックをページの目的のセクションにドラッグ&ドロップします。

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

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

追加後、Facebookコメントブロックをクリックして設定を開きます。「コンテンツ」タブで、コメントウィジェットの動作を設定します。

Facebook設定:

  • FacebookアプリID:接続済みのFacebookアプリを表示しますアプリIDが設定されていない場合、ページ設定で設定するようプロンプトが表示されます。接続後、「アプリを変更」オプションが表示され、別のFacebookアプリに切り替えることができます。
  • コメント数:表示するコメントの最小数を5から20の間で設定します。
  • 並べ替え順:コメントの表示順を選択 —ソーシャル(エンゲージメント順)、時間順(古い順)、または時間順(新しい順)。
  • カラースキーム:コメントウィジェットのカラースキームをライトまたはダークから選択してください。
  • 遅延読み込み:オンにすると、Facebookコメントウィジェットの読み込みを訪問者の画面にスクロールされるまで遅延させ、ページの読み込みパフォーマンスを向上させます。
  • ターゲットURL:コメントが関連付けられるURLを設定します。現在のページを選択するとページ自身のURLが使用され、カスタムを選択すると別のURLを指定できます。カスタムに設定すると、カスタムURLを入力するための追加のリンクフィールドが表示されます。
  • URL形式(ターゲット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アプリIDが正しく設定されていることを確認してください。

関連記事