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)を使用して、行内の各共有ボタン間の水平方向の間隔を設定します。
  • 影: 共有ボタンに影の効果を追加します。プリセットサイズ(なし、ヘアライン、小、中、大、特大、2倍特大)から選択します。

間隔:

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

属性:

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

デバイス表示:

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

アニメーション効果:

  • 表示アニメーション: ソーシャル共有ブロックが表示領域にスクロールインしたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、回転インなどがあります。
スタイル、スペーシング、属性、デバイスの可視性、アニメーション効果の設定が表示されたソーシャル共有ブロックの詳細設定タブ

ステップ4:変更を保存

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


ソーシャル共有ブロックをページに追加しました!訪問者がFacebook、X(Twitter)、LinkedIn、Pinterestでコンテンツを簡単にワンクリックで共有できるようにすることで、このブロックは追加の労力をかけずにコンテンツのリーチを拡大するのに役立ちます。ボタンのラベル、サイズ、間隔をページデザインに合わせてカスタマイズし、デバイスごとの配置コントロールを使用して、すべての画面でボタンがすばらしく見えるようにします。

関連記事