UI Kit Home IxDF UI Kit

“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.

123 shares

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

123 shares

Services

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

Usage

$shares = \App\Utility\SharingPanelData::create('See, this site is amazing!')
    ->setShareCountFacebook(42)
    ->setShareCountLinkedin(41)
    ->setShareCountTwitter(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