Skip to content

Share Button Directive

Murhaf Sousli edited this page Mar 20, 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:

Google+ and StumbleUpOn do NOT accept any parameters, use OG meta tags instead

  • [sbTitle] Add title text (NOT for pinterest)
  • [sbDescription]: Add description text (NOT for twitter/reddit)
  • [sbImage] Add Image (only for facebook/pinterest/linkedreddit)
  • [sbTags]: Add hashtags (only for twitter and tumblr)

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