SeedProd ドキュメンテーション

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

ソーシャル・シェアリング・ブロック

ソーシャル共有ブロックは、SeedProdページに共有ボタンを追加します。これにより、訪問者がページや投稿のURLを好みのソーシャルメディアプラットフォームに簡単に共有できるようになります。対応プラットフォームはFacebook、X(Twitter)、LinkedIn、Pinterestです。各プラットフォームはブランド化されたボタンとして表示され、ページURLが事前入力された状態で共有ダイアログを開きます。

ソーシャルプロフィールブロックが自身のアカウントへリンクするのとは異なり、ソーシャル共有ブロックは視聴者に共有を行わせることでコンテンツの拡散を促進する設計です。各ボタンのラベルをカスタマイズしたり、Pinterest画像やX(Twitter)の事前入力済みツイートテキストなどプラットフォーム固有のオプションを追加したり、ドラッグ&ドロップでボタンの順序を変更して視聴者にとって最も関連性の高いプラットフォームを優先表示できます。

SeedProdページにFacebook、Twitter、LinkedIn、Pinterestのシェアボタンを表示するソーシャル共有ブロック

要件: ソーシャル共有ブロックは、すべてのライセンスプランでご利用いただけます。


ソーシャル共有ブロックをページに追加する

SeedProdページにソーシャル共有ブロックを追加するには、以下の手順に従ってください:

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

デザイン > ブロック の下にあるソーシャル共有ブロックを、ページの希望するセクションにドラッグ&ドロップします。

ソーシャル共有ブロックをSeedProdページにドラッグする

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

追加後、ソーシャル共有ブロックをクリックして設定を開きます。コンテンツタブの ソーシャル共有セクションでは、共有ボタンのリスト管理と表示オプションの設定が可能です。

共有ボタンの管理:

  • プラットフォームの種類:各項目横のドロップダウンからソーシャルプラットフォームを選択してください。利用可能なオプションはFacebook、X(Twitter)、LinkedIn、Pinterestです。
  • ラベル:任意のエントリの歯車アイコン(設定)をクリックしてオプションを展開し、共有アイコンの横に表示するカスタムラベルを入力します(例:「共有」、「ツイート」、「ピン留め」)。
  • ツイートテキスト(X / Twitter専用):X(Twitter)設定パネルが開いている状態で、訪問者がボタンをクリックした際にTwitter共有ダイアログに表示される事前入力済みのツイートテキストを入力してください。
  • 画像(Pinterest専用):Pinterest設定パネルが開いている状態で、ピンと共有する画像URLを選択または入力します。メディアライブラリから画像を選択するか、画像ソース欄に直接画像URLを貼り付けることができます。
  • 再配置:ドラッグハンドル(矢印アイコン)を使用して項目を上下にドラッグし、共有ボタンの表示順序を変更します。
  • 複製 / 削除:任意の項目にカーソルを合わせると、複製と削除ボタンが表示され、素早く管理できます。
  • 新規共有を追加:リストの下部にある「+ 新規共有を追加」ボタンをクリックして、別のプラットフォームボタンを追加します。

表示オプション:

  • サイズ:ボタンの全体サイズを設定します — 小、中、または大。
  • 配置:ボタン列の水平方向の配置を設定します — 左、中央、または右。デスクトップ、タブレット、モバイルごとに異なる配置をサポートします。
ソーシャル共有ブロックのコンテンツタブに表示されるプラットフォーム一覧、ラベルフィールド、サイズと配置オプション

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

[詳細設定]タブでは、ソーシャル共有ブロックの外観を調整し、その表示状態を制御できます。

スタイル:

  • スペースの間隔:スライダー(1~100px)を使用して、行内の各共有ボタンの間の水平方向の間隔を設定します。
  • 影:共有ボタンに影効果を追加します。プリセットサイズから選択可能 — なし、ヘアライン、小、中、大、特大、超特大。

スペース:

  • マージン:ソーシャル共有ブロックの周囲の外側スペース(上、右、下、左)を制御します。デスクトップ、タブレット、モバイルごとにデバイス別の値をサポートします。
  • パディング:ソーシャル共有ブロック内の内側の間隔(上、右、下、左)を調整します。デスクトップ、タブレット、モバイルごとに異なる値を設定できます。

属性:

  • CSS ID:ソーシャル共有ブロックの自動生成された一意の識別子を表示します。このIDはSeedProdによって自動的に作成され、カスタムスタイリングやJavaScriptターゲティングに使用できます。
  • カスタムクラス:テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
  • カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-section|share)。

デバイスの可視性:

  • デスクトップで非表示:デスクトップ画面でソーシャル共有ブロックを非表示にします。
  • タブレットで非表示:タブレット端末でソーシャル共有ブロックを非表示にします。
  • モバイルで非表示:モバイル端末でソーシャル共有ブロックを非表示にします。

アニメーション効果:

  • エントランスアニメーション:ソーシャル共有ブロックが画面にスクロールインする際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど、多数のオプションが用意されています。
ソーシャル共有ブロックの詳細タブ(スタイル、間隔、属性、デバイス表示設定、アニメーション効果の設定を表示)

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

ソーシャル共有ブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。


ソーシャル共有ブロックをページに追加できました!訪問者がワンクリックでFacebook、X(Twitter)、LinkedIn、Pinterestにコンテンツを共有できるため、追加の手間なくコンテンツのリーチを拡大できます。ボタンラベル、サイズ、間隔をページデザインに合わせてカスタマイズし、デバイスごとの配置調整機能であらゆる画面で美しく表示されるように設定してください。

関連記事