“Sharing Panel” Component

Design: zeplin.

The sharing panel consists of a collection of social media sharing buttons, assembled within a modal, and includes an optional citation widget. This feature is designed to motivate users to share or cite a piece of content. This feature is utilized in various pages, including UX Daily article pages, book chapters, and topic definitions, among others.

Design

The default version contains the total share count and Share this page button.

Optionally you can display a citation button on the share panel. It's important to pass citationEntity attribute.

Services

By default, the panel displays buttons to share a message via LinkedIn, Facebook, X (Twitter) and Pinterest.

Usage

$shares = \App\Utility\SharingPanelData::create('See, this site is amazing!')
    ->setShareCountFacebook(42)
    ->setShareCountLinkedin(41)
    ->setShareCountX(40);

@include('components.sharingPanel', [
    'panelData' => $shares,
    'resourceType' => 'page',
])

@include('components.sharingPanel', [
    'panelData' => $shares,
    'resourceType' => 'article',
    'citationEntity' => $article,
    'pdfUrl' => $url,
])

@include('components.sharingPanel', [
    'panelData' => $shares,
    'resourceType' => 'page',
    'withoutShareCounts' => true,
    'citationEntity' => new \App\Modules\Publication\Services\DefaultCitationGenerator('UX meetups'),
])

Props

• panelData (required)
  App\Utility\SharingPanelData

  Object that contains all required and some optional data for the component (does not contain visual options).

• resourceType (required)
  string

  Specify the button label that follows "share this…" (for example, "share this page" or "share this article").

  Default Value: false

• citationEntity
  App\Modules\Publication\Models\CitationDataProvider

  Object that contains all required data for citation widget

  Default Value: false

• pdfUrl
  string

  The URL to PDF version of the page

  Default Value: false

• withoutShareCounts
  bool

  Whether to display share counts or not

  Default Value: false