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;
   }
 }

Customization:

Customization is very easy, disable the default style with [defaultStyle]="false" and override the following classes with your css.

share-buttons{
    //ShareButtons Element
    .sb-buttons {
      //ShareButtons Container
      share-button{
        //ShareButton Element
        button{
          .sb-template{
            //ShareButton Template
          }
          .sb-count{
            //ShareButton Count
          }
        }
      }
    }
 }

To change buttons orders, use the css rule order

.facebook{
  order: 6;
}
.twitter{
  order: 1;
}
.whatsapp{
  order: 2;
}

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'>";
}