SeedProd ドキュメント

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

Facebookページブロック

Facebookページブロックを使用すると、ライブのFacebookページフィードをSeedProdページに直接埋め込むことができます。訪問者はウェブサイトを離れることなく、タイムライン、イベント、またはメッセージの内容を確認できるため、オーディエンスをエンゲージさせ、最新の状態に保つのに役立ちます。

表示するタブを制御し、ヘッダーのスタイルを調整し、プロフィール写真を非表示または表示し、埋め込みの高さを設定するオプションにより、このブロックを使用すると、Facebookページがサイトに表示される方法を完全に制御できます。

Facebookページブロックの例

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


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

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

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

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

SeedProdページにFacebookページブロックをドラッグアンドドロップする

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

追加したら、Facebookページブロックをクリックして設定を開きます。コンテンツタブで、表示するFacebookページとその表示方法を構成します。

Facebook設定:

  • FacebookアプリID:接続されているFacebookアプリを表示します。まだアプリIDが設定されていない場合は、ページ設定で設定するように促されます。接続されると、別のアプリに切り替えるためのアプリを変更オプションが表示されます。
  • リンク:埋め込みたいFacebookページの完全なURLを入力します(例:https://www.facebook.com/yourpage/)。
  • タブ:埋め込みページフィードに表示するコンテンツタブを選択します。タイムラインイベントメッセージから1つ以上選択できます。タイムラインは最近の投稿を表示し、イベントは今後のイベントを表示し、メッセージはダイレクトメッセージオプションを開きます。
  • 小さなヘッダー:コンパクトなバージョンのFacebookページヘッダーを表示するにはオンに切り替えます。これにより、埋め込みの垂直スペースが節約されます。
  • カバー写真を非表示:埋め込みフィードからページのカバー写真を非表示にするにはオンに切り替えます。
  • プロフィール写真:ページを気に入っている友達のプロフィール写真を埋め込みの横に表示するにはオンに切り替えます。
  • CTAボタンを非表示:埋め込みページからコールトゥアクションボタン(いいね!やフォローなど)を非表示にするにはオンに切り替えます。
  • 高さ:埋め込みFacebookページフィードの高さをピクセル単位で設定します。70〜700pxです。
  • 配置:埋め込みページの水平方向の配置を設定します — 左、中央、右。
Facebookページブロックのコンテンツ設定

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

高度な設定タブでは、Facebookページブロックのスペーシングと表示を調整できます。

間隔:

  • マージン:Facebookページブロックの周囲の外側のスペーシングを制御します(上、右、下、左)。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
  • パディング:Facebookページブロックの内側のスペーシングを調整します(上、右、下、左)。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。

属性:

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

デバイス表示:

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

アニメーション効果:

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

ステップ4:変更を保存

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


Facebookページブロックをページに追加しました!このブロックを使用すると、ライブのFacebookページフィードを任意のSeedProdページに簡単に表示でき、訪問者をサイトからリダイレクトせずにソーシャルプレゼンスに接続したままにできます。埋め込みページがすべての訪問者に対して正しく読み込まれるように、FacebookアプリIDが設定されていることを確認してください。

関連記事