Skip to content

Share Button Directive

Murhaf Sousli edited this page May 16, 2017 · 21 revisions

Convert any button to a share button using this directive, it is very useful for integration with Material/Bootstrap or your existing button style.

Usage:

<button shareButton="facebook"><i class="fa fa-facebook"></i></button>
<button shareButton="twitter" [sbUrl]="'https://example.com'" [sbTags]="'angular awesomeness'">
  Tweet
</button>
<button shareButton="pinterest" [sbImage]="image" [sbDescription]="description">
    Pin it!
</button>

Options:

  • [sbUrl]: If URL is not valid or not presented, it will use your page title (window.location.href)

Meta tags alternates:

  • [sbTitle] Add title text
  • [sbDescription]: Add description text
  • [sbImage] Add Image
  • [sbTags]: Add hashtags

Check input compatibility with each social network.

Button template:

  • [shareButton]: Pass sharebutton name as string e.g. facebook

Button options

Share counters do NOT work for Twitter, WhatsApp and StumbleUpOn

  • [sbShowCount]: Enable share count on the button, default: false
  • (sbCount): Output share count of the button
  • (sbPopUpClosed): Output when pop up window is closed