Share Buttons Component

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 open graph meta tags to set the title, description and image for all share buttons.

Alternatively you can set them directly from the component, however some share services doesn't recognize them in share URL (like google+)

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

To add a custom button template, create it with as string variable then pass it to the desired input, e.g. give facebook a custom template [facebook]="facebookTemp".

To exclude a button, pass false to the button input. e.g. [reddit]="false"

<share-buttons
   [shareTitle]="shareTitle"
   [defaultStyle]="false"

   [facebook]="fbTemp"
   [twitter]="twitterTemp"
   [pinterest]="pintTemp"
   [linkedIn]="inTemp"
   [google]="googleTemp"
   [tumblr]="tumblrTemp"

   [reddit]="false"
   [stumbleUpOn]="false"
></share-buttons>

export class SomeComponent {
  fbTemp = "<img src='../assets/img/custom/facebook.svg'>";
  twitterTemp = "<img src='../assets/img/custom/twitter.svg'>";
  pintTemp = "<img src='../assets/img/custom/pinterest.svg'>";
  inTemp = "<img src='../assets/img/custom/linkedin.svg'>";
  googleTemp = "<img src='../assets/img/custom/google-plus.svg'>";
  tumblrTemp = "<img src='../assets/img/custom/tumblr.svg'>";
}

Options:

• [url] If URL is invalid or not presented, it will use your page title

Share links (by default it uses meta tags from head):

• [title] Add title text (NOT for pinterest)
• [description] Add description text (NOT for twitter/reddit)
• [image] Add Image (only for facebook/pinterest/linkedreddit)
• [tags] Add hashtags (only for twitter and tumblr)

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