Skip to content

Share Buttons Component

Murhaf Sousli edited this page Jun 7, 2017 · 30 revisions

Add share buttons for your favorite share services

Basic usage:

<share-buttons [url]="linkToShare"></share-buttons>

The default usage comes with icons from fontawesome, make sure you import it in your app.

It's recommended to use the meta tags to set the title, description and image for all share buttons.

Alternatively you can set them directly using the inputs as URL parameters, Check inputs compatibility with each social network.

<share-buttons [url]="linkToShare" [title]="title" [description]="description" [image]="image"></share-buttons>

Options:

  • [url] If URL is invalid or not presented, it will use the current url

Meta tags alternates:

  • [title] Set title text
  • [description] Set description text
  • [image] Set Image
  • [tags] Set hashtags

Buttons templates: Pass a custom button template to replace the default icons, Switch off a button by passing false

  • [facebook]
  • [twitter]
  • [linkedIn]
  • [tumblr]
  • [google]
  • [pinterest]
  • [stumbleUpOn]
  • [reddit]

Options:

  • [showCount] Enable counts on share buttons, default: false
  • [defaultStyle] Use default style is applied to the buttons, default: true
  • [buttonClass] Add custom classes to all buttons
  • (count) Output all buttons' counts
  • (popUpClosed) Output when pop up window is closed