Angular Share Buttons v5.3.1

NOTE: This version 5.3.1 supports Angular 5 only.

Available buttons

Facebook, Twitter, Google+, LinkedIn, Pinterest, WhatsApp, Messenger, Reddit, Tumblr, Telegram, Email, SMS, VK, StumbleUpOn, Xing, Copy link and Print

Packages

The plugin is divided into 3 modules to make it possible to include only the stuff you use.

@ngx-share/core - Share button directive to convert any element to a share button.
@ngx-share/button - Share button component to add buttons individually.
@ngx-share/buttons - Share buttons component to add a collection of share buttons.

Share button directive

Convert any element to a share button using [shareButton] directive.

Installation

NPM

$ npm i -S @ngx-share/core@5.3.1
$ npm i -S @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

YARN

$ yarn add @ngx-share/core@5.3.1
$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Usage

Import ShareModule in your module

import { ShareModule } from '@ngx-share/core';

@NgModule({
  imports: [
    HttpClientModule,      // (Required) for share counts
    HttpClientJsonpModule, // (Optional) for Tumblr counts
    ShareModule.forRoot()
  ]
})

The most basic usage to create a share button is shareButton={{buttonName}} on a button

<button shareButton="facebook">Share</button>
<button shareButton="twitter">Tweet</button>
<button shareButton="pinterest">Pin</button>

To use the default icons and colors, Inject ShareButtons service in your component then access the properties from the template

Component:

import { ShareButtons } from '@ngx-share/core';

@Component({
  // ...
})
export class MyComponent {
  constructor(public share: ShareButtons) {
  }
}

Template:

<!--Set color and icon-->
<button shareButton="twitter" [style.backgroundColor]="share.prop.twitter.color">
  <fa-icon [icon]="share.prop.twitter.icon" size="lg"></fa-icon>
</button>

<!--Material example-->
<button md-icon-button shareButton="telegram" [style.color]="share.prop.telegram.color">
  <fa-icon [icon]="share.prop.telegram.icon" size="lg"></fa-icon>
</button>

Check ShareButton Directive Demo.

Available Inputs / Outputs

Name	Default value	Description
[shareButton]	null	Button name, e.g. 'facebook', 'twitter' ...etc.
[url]	current URL	Sharing link.
[title]	null	Override title meta tag for LinkedIn, Reddit and Email.
[description]	null	Override description meta tag for LinkedIn, WhatsApp, Messenger, Telegram, Pinterest and Email
[image]	null	Override image meta tag for Pinterest only.
[tags]	null	Override tags for Tumblr and Twitter.
[autoSetMeta]	true	Auto set meta tags inputs from the SEO meta tags.
[getCount]	false	Gets and emits share counts.
(opened)	button name	Stream that emits when share window has opened.
(closed)	button name	Stream that emits when share dialog has closed.
(count)	share count	Stream that emits share count of the share URL.

Share button component

Use <share-button> component to add share buttons individually.

Installation

NPM

$ npm i -S @ngx-share/core@5.3.1 @ngx-share/button@5.3.1
$ npm i -S @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

YARN

$ yarn add @ngx-share/core@5.3.1 @ngx-share/button@5.3.1
$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Usage

Import ShareButtonModule in your module

import { ShareButtonModule } from '@ngx-share/button';

@NgModule({
  imports: [
    HttpClientModule,      // (Required) for share counts
    HttpClientJsonpModule, // (Optional) For Tumblr counts
    ShareButtonModule.forRoot()
  ]
})

Import core styles and theme from the global style src/styles.scss

@import '~@ngx-share/button/styles/share-buttons';
@import '~@ngx-share/button/styles/themes/default/default-theme';

Check all themes here

Now you can use the component in your template

<share-button button="facebook"></share-button>
<share-button button="twitter"></share-button>

Check ShareButton Component Demo.

Available Inputs / Outputs

Name	Default value	Description
[button]	null	Button name, e.g. 'facebook', 'twitter' ...etc.
[theme]	null	Set button theme.
[text]	null	Custom button text.
[icon]	null	Custom button icon.
[size]	0	Button size, e.g. -4, 2.5, 1...etc.
[url]	current URL	Sharing link.
[title]	null	Override title meta tag for LinkedIn, Reddit and Email.
[description]	null	Override description meta tag for LinkedIn, WhatsApp, Messenger, Telegram, Pinterest and Email
[image]	null	Override image meta tag for Pinterest only.
[tags]	null	Override tags for Tumblr and Twitter.
[autoSetMeta]	true	Initializes meta tags inputs from the SEO meta tags.
[showIcon]	true	Show button icon.
[showText]	false	Show button text.
[showCount]	false	Show share count.
(opened)	button name	Stream that emits when share dialog has opened.
(closed)	button name	Stream that emits when share dialog has closed.
(count)	share count	Stream that emits share count of the share URL.

Share buttons component

Use <share-buttons> to add a collection of share buttons.

Installation

NPM

$ npm i -S @ngx-share/core@5.3.1 @ngx-share/button@5.3.1 @ngx-share/buttons@5.3.1
$ npm i -S @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

YARN

$ yarn add @ngx-share/core@5.3.1 @ngx-share/button@5.3.1 @ngx-share/buttons@5.3.1
$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Usage

Import ShareButtonsModule in your module

import { ShareButtonsModule } from '@ngx-share/buttons';

@NgModule({
  imports: [
    HttpClientModule,      // (Required) for share counts
    HttpClientJsonpModule, // (Optional) for Tumblr counts
    ShareButtonsModule.forRoot()
  ]
})

Import icons, core styles and theme from the global style src/styles.scss

@import '~@ngx-share/button/styles/share-buttons';
@import '~@ngx-share/button/styles/themes/default/default-theme';

Check all themes

Now you can use the component in your template

<share-buttons></share-buttons>

Check ShareButtons Component Demo

Available Inputs / Outputs

Name	Default value	Description
[include]	[ ]	Include certain buttons. Button's order will be as you type it.
[exclude]	[ ]	Exclude certain buttons.
[show]	null	Number of buttons to show, if defined 'more' button will appear.
[theme]	null	Set button theme.
[size]	0	Button size, e.g. -4, 2.5, 1...etc.
[url]	current URL	Sharing link.
[title]	null	Override title meta tag for LinkedIn, Reddit and Email.
[description]	null	Override description meta tag for LinkedIn, WhatsApp, Messenger, Telegram, Pinterest and Email
[image]	null	Override image meta tag for Pinterest only.
[tags]	null	Override tags for Tumblr and Twitter.
[autoSetMeta]	true	Initializes meta tags inputs from the SEO meta tags.
[showIcon]	true	Show button icon.
[showText]	false	Show button text.
[showCount]	false	Show share count.
(opened)	button name	Stream that emits when share dialog has opened.
(closed)	button name	Stream that emits when share dialog has closed.
(count)	share count	Stream that emits the share count of the URL.

Global options

If you want set custom global options, pass your config in the library is imported

import { ShareButtonsOptions } from '@ngx-share/core';
import { ShareButtonsModule } from '@ngx-share/buttons';

const customOptions: ShareButtonsOptions = {
  include: ['facebook', 'twitter', 'google'],
  exclude: ['tumblr', 'stumble', 'vk'],
  theme: 'modern-light',
  gaTracking: true,
  twitterAccount: 'twitterUsername'
}

@NgModule({
  imports: [
    // the module you choice 'ShareModule', 'ShareButtonModule' or 'ShareButtonsModule'
    ShareButtonsModule.forRoot({ options: customOptions })
  ]
})

Option	Default value	Description
include	[ ]	Include certain buttons. Button's order will be as you type it.
exclude	[ ]	Exclude certain buttons.
size	0	Buttons default size.
theme	null	Button theme name.
dialogWidth	500	Share popup window width.
dialogHeight	400	Share popup window height.
url	null	Override url meta tag.
title	null	Override title meta tag.
description	null	Override description meta tag.
image	null	Override image meta tag.
tags	null	Override tags meta tag for Tumblr and Twitter.
autoSetMeta	true	Initializes meta tags inputs from the SEO meta tags.
gaTracking	false	Roll sharing stats automatically into your Google Analytics.
twitterAccount	null	Add via @accountName at the end of the tweets.

When autoSetMeta is true, the meta tags inputs url, title, description and image will be initialized from the SEO meta tags.

<head>
  <meta property="og:title" content="The Rock" />
  <meta property="og:description" content="Directed by Michael Bay.  With Sean Connery, Nicolas Cage, Ed Harris, John Spencer."/>
  <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
  <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
</head>

Set autoSetMeta to false, if the share buttons url does not point to the current url, e.g. displaying a list of articles each one with share buttons.

Button Configuration

You can change the buttons meta data such as button icon and text

import { ShareButtonsModule } from '@ngx-share/buttons';
import { faFacebookSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons';

const customProp = {
  facebook: {
    icon: 'fab fa-facebook-official',
    text: faFacebookSquare
  },
  twitter: {
    icon: faTwitterSquare,
    text: 'Tweet'
  },
  // and so on...
};

@NgModule({
  imports: [
    ShareButtonsModule.forRoot({ prop: customProp })
  ]
})

Styling guide

There are several classes that help you to create your custom styles

.sb-moon-theme {
  &.sb-group {
    /** ... share buttons container */
  }
  .sb-wrapper { /** ... share button wrapper */
    background-color: var(--button-color);

    .sb-inner { /** ... inner wrapper */
      .sb-content { /** ... content wrapper */
        .sb-icon { /** ... icon wrapper */ }
        .sb-text { /** ... text wrapper */ }
       }
      .sb-count { /** ... count wrapper */ }
    }

    // For conditional styles
    &.sb-show-icon.sb-show-text.sb-show-count {
      /** ... Apply when icon, text and count are shown */
      .sb-icon { /** ... icon wrapper */ }
      .sb-text { /** ... text wrapper */ }
    }
  }
}

If you use .sb-moon-theme then the theme name will become moon:

<share-buttons theme="colorful"></share-buttons>

Styling guide

Sharing on native apps

❌ No Support: Means it is tested but the share dialog opens in the mobile browser

Button	💻 Desktop	📱 iPhone	📱 Android
Facebook	✔️ Support	❌ No Support	❌ No Support
Twitter	✔️ Support	✔️ Support	✔️ Support
Pinterest	✔️ Support	✔️ Support	✔️ Support
Google	✔️ Support	✔️ Support	✔️ Support
LinkedIn	✔️ Support	✔️ Support	✔️ Support
Whatsapp	✔️ Support	✔️ Support	✔️ Support
Telegram	✔️ Support	✔️ Support	✔️ Support
Messenger	❌ No Support	✔️ Support	✔️ Support
VK	✔️ Support	❔ Not tested	❔ Not tested
Reddit	✔️ Support	❌ No Support	❔ Not tested
Tumblr	✔️ Support	❌ No Support	❔ Not tested
StumbleUpOn	✔️ Support	❌ No Support	❔ Not tested
Xing	✔️ Support	❔ Not tested	❔ Not tested
SMS	✔️ Support	✔️ Support	✔️ Support
Copy	✔️ Support	✔️ Support	✔️ Support
Print	✔️ Support	✔️ Support	✔️ Support
Email	✔️ Support	✔️ Support	✔️ Support

Notes:

Facebook: Does not support sharing on native apps. Tumbler: Opens in native app but then the app opens the browser again!

Issues

If you identify any errors in this component, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!

Support

Author

Murhaf Sousli

github/murhafsousli
twitter/murhafsousli

More plugins by the author

ngx-gallery
ngx-progressbar
ngx-bar-rating
ngx-disqus
ngx-wordpress
ngx-highlightjs
ngx-scrollbar
ng-teximate

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README_V5.md

README_V5.md

Angular Share Buttons v5.3.1

Table of contents

Available buttons

Packages

Share button directive

Installation

Usage

Available Inputs / Outputs

Share button component

Installation

Usage

Available Inputs / Outputs

Share buttons component

Installation

Usage

Available Inputs / Outputs

Global options

Button Configuration

Styling guide

Sharing on native apps

Issues

Support

Author

More plugins by the author

Files

README_V5.md

Latest commit

History

README_V5.md

File metadata and controls

Angular Share Buttons v5.3.1

Table of contents

Available buttons

Packages

Share button directive

Installation

Usage

Available Inputs / Outputs

Share button component

Installation

Usage

Available Inputs / Outputs

Share buttons component

Installation

Usage

Available Inputs / Outputs

Global options

Button Configuration

Styling guide

Sharing on native apps

Issues

Support

Author

More plugins by the author