“Sharing Panel” Component

Design: zeplin.

The sharing panel is a set of social media sharing buttons used to encourage users to share a piece of content. It is used in UX Daily article pages, for instance.

Design

There are 2 versions of the sharing panel:

1. The full version contains the total share count and is used in places without space constraints, e.g. in the UX Daily article page.
   123 shares

   Share Share page on Facebook Tweet Share page on Twitter Share Share page on LinkedIn
2. The condensed version doesn’t display a share count and has smaller share buttons. It’s typically placed on the sidebar of pages.
   Share page on Facebook Share page on Twitter Share page on LinkedIn

Viewports

On small viewports, due to horizontal space constraint, the full version contains compact share buttons.

On medium+ viewports, the full version contains full-sized share buttons.

Services

By default, the panel displays buttons to share a message via facebook, twitter and linkenIn.

Optionally, we can add a button to share a message via email:

Usage

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

@include('components.sharingPanel', ['panelData' => $shares])
@include('components.sharingPanel', ['panelData' => $shares, 'condensed' => true])
@include('components.sharingPanel', ['panelData' => $shares, 'withEmail' => true, 'condensed' => true])

Props

• panelData (required)
  App\Utility\SharingPanelData

  Object that contains all required and some optional data for the component (doesn’t contain visual options).

• condensed
  bool

  The condensed version doesn’t display a share count and has smaller share buttons. It’s typically placed on the sidebar of pages.

  Default Value: false

• withEmail
  bool

  Whether to display an optional “Share via email” button.

  Default Value: false