SeedProd ドキュメンテーション

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

X(ツイッター)埋め込みツイートブロック

X(Twitter)埋め込みツイートブロックを使用すると、特定のツイートをSeedProdの任意のページに直接埋め込むことができます。これは、顧客の声、製品発表、注目すべき言及など、個別の投稿を強調表示し、訪問者にX(Twitter)にアクセスさせることなく共有する便利な方法です。

必要なのはツイートIDだけです。これはツイートのURLから確認できます。追加後は、明るい色か暗い色の配色を選択し、会話スレッドとメディアカードの表示有無を制御し、ウィジェットの幅を設定し、対象ユーザーに合わせて表示言語を選択できます。

X(Twitter)埋め込みツイートブロック(ダークテーマのSeedProdページに埋め込まれたツイートを表示)

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


X(Twitter)の埋め込みツイートブロックをページに追加する

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

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

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

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

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

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

  • ツイートID: 埋め込みたいツイートの数値IDを入力してください。ツイートIDはツイートのURLで確認できます。末尾にある長い数字(例:https://twitter.com/example/tweet123456789)がそれです。 /status/例えば、 https://twitter.com/seedprod/status/1385250840898850816、そのツイートIDは 1385250840898850816.
  • カラースキーム:ページデザインに合わせて、埋め込みツイートウィジェットを「ライト」または「ダーク」から選択してください。
  • 会話の非表示:ツイートの下に表示される会話スレッドを非表示にするかどうかの切り替え(はい/いいえ)。
  • 写真/動画/カードを非表示にする:ツイートに添付されたメディアカード、写真、動画を非表示にするか切り替えます(はい/いいえ)。
  • 幅:スライダーを使用して、埋め込みツイートウィジェットの幅をピクセル単位で設定します。
  • 配置:ページ上のウィジェットの水平方向の配置を設定します — 左、中央、または右 — デスクトップ、タブレット、モバイルごとに個別の制御が可能です。
  • 言語:ウィジェットインターフェースの表示言語を選択します。オプションには自動、英語、アラビア語、ベンガル語、チェコ語、デンマーク語、ドイツ語、ギリシャ語、スペイン語、ペルシャ語、フィンランド語、フィリピン語、フランス語、ヘブライ語、ヒンディー語、ハンガリー語、インドネシア語、イタリア語、日本語、韓国語、マレー語、オランダ語、ノルウェー語、ポーランド語、ポルトガル語、ルーマニア語などが含まれます。
X(Twitter)埋め込みツイートコンテンツタブ(ツイートID、カラースキーム、トグルオプション、幅、言語設定を表示)

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

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

スペース:

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

属性:

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

デバイスの可視性:

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

アニメーション効果:

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

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

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


ページにX(Twitter)の埋め込みツイートブロックを追加できました!個々のツイートを埋め込むことで、ソーシャルプルーフを強調したり、注目すべき言及を紹介したり、文脈に沿ったお知らせを共有したりするのに最適です。カラースキームと表示オプションを活用し、ウィジェットがページデザインにシームレスに統合されるようにしてください。

関連記事