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 to import it in your app.

Show share counts:

To display share counters on buttons, enable the input [count]="true"

You can also sum the total number of share counters by using the output (count)="sumCounts($event)"

<share-buttons [url]="'https://twitter.com'"
 [showCount]="true"
 (count)="sumCounts($event)"
 ></share-buttons>

export class SomeComponent {
  
   totalShare: number = 0;

   sumCounts(count){
     this.totalShare += count;
   }
 }

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