SeedProd ドキュメント

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

X(Twitter)埋め込みタイムラインブロック

X(Twitter)埋め込みタイムラインブロックを使用すると、公開されている任意のX(Twitter)アカウントのツイートのライブフィードをSeedProdページに直接埋め込むことができます。訪問者は、サイトから離れることなく最近の投稿をスクロールでき、ページにダイナミックでリアルタイムなソーシャルコンテンツを追加できます。

このブロックは、ソーシャルプルーフを構築し、ページコンテンツを最新の状態に保ち、訪問者にX(Twitter)アカウントのフォローを促すのに役立ちます。タイムラインの寸法、配色、言語、および表示または非表示にするインターフェイス要素(ヘッダー、フッター、境界線、スクロールバーなど)を制御できます。

SeedProdページに埋め込まれたライブツイートフィードを表示するX(Twitter)埋め込みタイムラインブロック

要件: X(Twitter)埋め込みタイムラインブロックは、すべてのライセンスプランで利用可能です。

廃止のお知らせ: X(Twitter)はタイムライン機能をサイレントに廃止しました。このブロックは、将来のSeedProdアップデートで廃止される予定です。


X(Twitter)埋め込みタイムラインブロックをページに追加する

次の手順に従って、SeedProdページにX(Twitter)埋め込みタイムラインブロックを追加します。

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

デザイン > ブロックの下で、X(Twitter)埋め込みタイムラインブロックをページの目的のセクションにドラッグアンドドロップします。

SeedProdページにX(Twitter)埋め込みタイムラインブロックをドラッグアンドドロップする

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

追加したら、X(Twitter)埋め込みタイムラインブロックをクリックして設定を開きます。コンテンツタブのX(Twitter)設定セクションに、次のオプションがあります。

  • X(Twitter)ハンドル:表示したいタイムラインのX(Twitter)ユーザー名を入力します(例:seedprod)。@記号は含めないでください。
  • 配色:タイムラインウィジェットをページデザインに合わせるために、ライトダークから選択します。
  • ヘッダーを非表示:タイムラインウィジェットの上部にあるプロフィールヘッダーを表示または非表示にするには、トグルします(はい/いいえ)。
  • フッターを非表示:タイムラインウィジェットの下部にあるフッター領域を表示または非表示にするには、トグルします(はい/いいえ)。
  • 境界線を非表示:タイムラインウィジェットの周りの境界線を削除するには、トグルします(はい/いいえ)。
  • 透明:タイムラインウィジェットの背景を透明にするには、トグルします(はい/いいえ)。
  • スクロールバーを非表示:タイムラインウィジェット内のスクロールバーを非表示にするには、トグルします(はい/いいえ)。
  • 返信を表示:タイムラインフィードにツイートの返信を含めるには、トグルします(はい/いいえ)。
  • 幅:スライダーを使用して、タイムラインウィジェットの幅をピクセル単位で設定します。
  • 高さ:スライダーを使用して、タイムラインウィジェットの高さをピクセル単位で設定します。
  • 配置:デスクトップ、タブレット、モバイルのデバイスごとのコントロールを使用して、ウィジェットの水平方向の配置を左、中央、または右に設定します。
  • 言語:ウィジェットインターフェイスの表示言語を選択します。オプションには、自動、英語、アラビア語、ベンガル語、チェコ語、デンマーク語、ドイツ語、ギリシャ語、スペイン語、ペルシャ語、フィンランド語、フィリピン語、フランス語、ヘブライ語、ヒンディー語、ハンガリー語、インドネシア語、イタリア語、日本語、韓国語、マレー語、オランダ語、ノルウェー語、ポーランド語、ポルトガル語、ルーマニア語などがあります。
ハンドル、配色、トグルオプション、および寸法を表示するX(Twitter)埋め込みタイムラインコンテンツタブ

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

高度な設定タブでは、X(Twitter)埋め込みタイムラインブロックのレイアウトと動作をさらに制御できます。

間隔:

  • マージン: ブロックの外側のスペーシングを4つの側面すべてに設定します。デスクトップ、タブレット、モバイルで個別に制御できます。
  • パディング: ブロックラッパーの内側のスペーシングを4つの側面すべてに設定します。デバイスごとに制御できます。

属性:

  • カスタムクラス: ブロックラッパーに1つ以上のカスタムCSSクラスを追加して、ターゲットを絞ったスタイリングを行います。
  • CSS ID: SeedProdは、このブロックに一意のCSS IDを自動的に生成します。カスタムCSSまたはJavaScriptでブロックを参照するために使用できます。
  • カスタム属性: ブロックラッパー要素にカスタムHTML属性を追加します。キー|値の形式で、各属性を新しい行に入力します。

デバイス表示:

  • デスクトップで非表示: デスクトップ画面で表示されたときにブロックを非表示にするには、トグルします。
  • タブレットで非表示: タブレット画面で表示されたときにブロックを非表示にするには、トグルします。
  • モバイルで非表示: モバイル画面で表示されたときにブロックを非表示にするには、トグルします。

アニメーション効果:

  • スクロールエフェクト: ブロックにスクロールでトリガーされるアニメーションを適用します。方向、速度、ビューポートオフセット制御を備えた垂直スクロールおよび水平スクロールオプションが含まれます。
  • マウスエフェクト: マウスの動きによって駆動されるパララックス効果をブロックに適用します。
スペーシング、属性、デバイスの可視性、およびアニメーション効果を表示するX(Twitter)埋め込みタイムライン高度なタブ

ステップ4:変更を保存

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


X(Twitter)埋め込みタイムラインブロックをページに正常に追加しました!ライブツイートフィードを埋め込むことは、ページをアクティブに保ち、ソーシャルプレゼンスに接続するための優れた方法です。配色、表示切り替え、および寸法コントロールを使用して、ウィジェットをページデザインに自然に適合させます。

関連記事