SeedProd ドキュメンテーション

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

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

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

このブロックは、ソーシャルプルーフの構築、ページコンテンツの更新、訪問者へのX(Twitter)アカウントフォロー促進に有効です。タイムラインのサイズ、配色、言語、およびヘッダー、フッター、境界線、スクロールバーなどのインターフェース要素の表示/非表示を制御できます。

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

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

廃止のお知らせ:X(Twitter)はタイムライン機能を静かに廃止しました。このブロックは今後のSeedProdアップデートで廃止されます。


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

SeedProdページにX(Twitter)埋め込みタイムラインブロックを追加するには、以下の手順に従ってください:

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

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

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

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

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

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

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

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

スペース:

  • 余白:ブロックの周囲の四辺の外側の間隔を設定します。デスクトップ、タブレット、モバイルそれぞれで独立して制御できます。
  • パディング:ブロックラッパー内の四辺すべてに内側の間隔を設定し、デバイスごとの制御を行います。

属性:

  • カスタムクラス:ブロックラッパーに1つ以上のカスタムCSSクラスを追加し、対象を絞ったスタイル設定を行います。
  • CSS ID:SeedProdはこのブロックに対して一意のCSS IDを自動生成します。カスタムCSSやJavaScriptでブロックを参照する際に使用できます。
  • カスタム属性:ブロックラッパー要素にカスタムHTML属性を追加します。各属性をキー|値形式で改行して入力してください。

デバイスの可視性:

  • デスクトップで非表示:デスクトップ画面で表示した際にブロックを非表示にするか切り替えます。
  • タブレットで非表示:タブレット画面で表示時にブロックを非表示にするか切り替えます。
  • モバイルで非表示:モバイル画面で表示される際にこのブロックを非表示にするか切り替えます。

アニメーション効果:

  • スクロール効果:ブロックにスクロール連動アニメーションを適用します。垂直スクロールと水平スクロールのオプションを含み、方向、速度、ビューポートオフセットを制御できます。
  • マウス効果:ブロックにマウスの動きに基づく視差効果を適用します。
X(Twitter)埋め込みタイムラインの詳細設定タブ(間隔、属性、デバイス表示設定、アニメーション効果を表示)

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

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


ページにX(Twitter)埋め込みタイムラインブロックの追加に成功しました!ライブツイートフィードを埋め込むことで、ページを常に活発に保ち、ソーシャルメディアとのつながりを強化できます。カラースキーム、表示設定、サイズ調整を活用し、ウィジェットをページデザインに自然に溶け込ませてください。

関連記事