SeedProd ドキュメンテーション

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

X(ツイッター)ツイートボタンブロック

X(Twitter)ツイートボタンブロックを使用すると、SeedProdの任意のページにネイティブのツイートボタンを追加でき、訪問者がワンクリックでコンテンツをX(Twitter)のフォロワーと共有できるようになります。ツイートにはURL、カスタムテキスト、ハッシュタグ、出典情報を事前に入力可能で、コンテンツの共有方法を完全に制御できます。

このブロックは、訪問者に情報を広めてもらいたいブログ記事、製品ページ、ランディングページに最適です。ボタンは小サイズから大サイズまで対応し、30以上の表示言語をサポートしているため、対象ユーザーに合わせて表示できます。

X(Twitter)のツイートボタンブロックがSeedProdページに表示されています

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


X(Twitter)ツイートボタンブロックをページに追加する

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

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

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

X(Twitter)のツイートボタンブロックをSeedProdページにドラッグする

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

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

  • URL:訪問者がツイートボタンをクリックした際に共有されるURLを入力してください。空白のままにすると現在のページのURLが共有されます。
  • ボタンをクリックした際に訪問者のツイート作成画面に表示されるあらかじめ作成済みのツイートテキストを入力してください。空白のままにすると、訪問者が独自のメッセージを入力できるようになります。
  • ハッシュタグ:事前作成されたツイートに含めるハッシュタグを1つ以上入力してください(カンマ区切り、#記号は不要)。
  • Via:ツイートを投稿したユーザーを明記するため、X(Twitter)のユーザー名を入力してください(@記号は不要)。ツイート内では「via @ユーザー名」と表示されます。
  • 関連項目:ユーザーがツイートを投稿した後に、X(Twitter)がユーザーに提案する可能性のあるX(Twitter)アカウントを、カンマ区切りでリストとして入力してください。
  • サイズ: 大のボタンサイズからお選びください。
  • 配置:ページ上のボタンの水平方向の配置を設定します — 左、中央、または右 — デスクトップ、タブレット、モバイルごとにデバイス別の制御が可能です。
  • 言語:ボタンインターフェースの表示言語を選択します。オプションには自動、英語、アラビア語、ベンガル語、チェコ語、デンマーク語、ドイツ語、ギリシャ語、スペイン語、ペルシャ語、フィンランド語、フィリピン語、フランス語、ヘブライ語、ヒンディー語、ハンガリー語、インドネシア語、イタリア語、日本語、韓国語、マレー語、オランダ語、ノルウェー語、ポーランド語、ポルトガル語、ルーマニア語、ロシア語、スウェーデン語、タイ語、トルコ語などが含まれます。
X(Twitter)のツイートボタン「コンテンツ」タブには、URL、テキスト、ハッシュタグ、経由元、サイズ、言語設定が表示されます。

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

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

スペース:

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

属性:

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

デバイスの可視性:

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

アニメーション効果:

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

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

X(Twitter)ツイートボタンブロックの設定と外観のカスタマイズが完了したら、必ず変更を保存してください。


ページにX(Twitter)ツイートボタンブロックの追加に成功しました!ツイート本文、ハッシュタグ、出典情報を事前に作成しておくことで、訪問者の負担が軽減され、コンテンツが共有される可能性が大幅に高まります。このブロックを最も共有されやすいコンテンツと組み合わせることで、最高の結果を得られます。

関連記事