This is the documentation for ngx-sharebuttons version 5.x (Angular >= 5)
For ngx-sharebuttons version 4.x (Angular >= 5), See this documentation For ngx-sharebuttons version 3.x (Angular 2 & 4), See this documentation
- Live demo | stackblitz
- Packages
- Share button directive
- Single share button component
- Share buttons component
- Global options
- Styling guide
- FAQ
- Issues
- License
- Support
- Author
- More plugins
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.
Convert any element to a share button using [shareButton] directive.
NPM
$ npm install --save @ngx-share/core @fortawesome/fontawesome-free-webfontsYARN
$ yarn add @ngx-share/core @fortawesome/fontawesome-free-webfontsImport ShareModule in your module
import { ShareModule } from '@ngx-share/core';
@NgModule({
imports: [
HttpClientModule, // (Required) for share counts
HttpClientJsonpModule, // (Optional) for Tumblr counts
ShareModule.forRoot()
]
})Import FontAwesome if you want to use the icons
@import "~@fortawesome/fontawesome-free-webfonts/css/fa-brands.css";
@import "~@fortawesome/fontawesome-free-webfonts/css/fa-solid.css";
@import "~@fortawesome/fontawesome-free-webfonts/css/fontawesome.css";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">
<i [class]="share.prop.twitter.icon"></i>
</button>
<!--Material example-->
<button md-icon-button shareButton="telegram" [style.color]="share.prop.telegram.color">
<i [class]="share.prop.telegram.icon"></i>
</button>Check ShareButton Directive Demo.
| Name | Default value | Description |
|---|---|---|
| [shareButton] | null | Button name, e.g. 'facebook', 'twitter' ...etc. |
| [sbUrl] | current URL | Sharing link. |
| [sbTitle] | null | Override title meta tag for LinkedIn, Reddit and Email. |
| [sbDescription] | null | Override description meta tag for LinkedIn, WhatsApp, Messenger, Telegram, Pinterest and Email |
| [sbImage] | null | Override image meta tag for Pinterest only. |
| [sbTags] | null | Override tags for Tumblr and Twitter. |
| (sbOpened) | button name | Stream that emits when share window has opened. |
| (sbClosed) | button name | Stream that emits when share dialog has closed. |
| (sbCount) | share count | Stream that emits share count of the share URL. |
Use <share-button> component to add share buttons individually.
NPM
$ npm install --save @ngx-share/core @ngx-share/button @fortawesome/fontawesome-free-webfontsYARN
$ yarn add @ngx-share/core @ngx-share/button @fortawesome/fontawesome-free-webfontsImport 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 "~@fortawesome/fontawesome-free-webfonts/css/fa-brands.css";
@import "~@fortawesome/fontawesome-free-webfonts/css/fa-solid.css";
@import "~@fortawesome/fontawesome-free-webfonts/css/fontawesome.css";
@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.
| Name | Default value | Description |
|---|---|---|
| [button] | null | Button name, e.g. 'facebook', 'twitter' ...etc. |
| [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. |
| [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. |
Use <share-buttons> to add a collection of share buttons.
NPM
$ npm install --save @ngx-share/core @ngx-share/button @ngx-share/buttons @fortawesome/fontawesome-free-webfontsYARN
$ yarn add @ngx-share/core @ngx-share/button @ngx-share/buttons @fortawesome/fontawesome-free-webfontsImport 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 icons, core styles and theme from the global style src/styles.scss
@import "~@fortawesome/fontawesome-free-webfonts/css/fa-brands.css";
@import "~@fortawesome/fontawesome-free-webfonts/css/fa-solid.css";
@import "~@fortawesome/fontawesome-free-webfonts/css/fontawesome.css";
@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
| 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. |
| [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. |
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. |
| gaTracking | false | Roll sharing stats automatically into your Google Analytics. |
| twitterAccount | null | Add via @accountName at the end of the tweets. |
If the og meta tags are presented in the document head then it will be used as the default value for the meta tags, such as:
<head>
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />
</head>You can change the buttons meta data such as button icon and text
import { ShareButtonsModule } from '@ngx-share/buttons';
const customProp = {
facebook: {
icon: 'fab fa-facebook-official',
text: 'Share on Facebook'
},
twitter: {
icon: 'fab fa-twitter-square',
text: 'Tweet'
},
// and so on...
};
@NgModule({
imports: [
ShareButtonsModule.forRoot({ prop: customProp })
]
})There are several classes that help you to create your custom styles
.sb-colorful-theme {
/** You can get button color by using the css variable --{buttonName}-color */
&.sb-group {
/** ... share buttons container */
}
.sb-wrapper { /** ... share button wrapper */
background-color: var(--facebook-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 */ }
}
}
}Then the theme will become colorful
<share-buttons theme="colorful"></share-buttons>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!
Murhaf Sousli