- 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
For Angular 2 & 4, use ngx-sharebuttons version 3.
For ngx-sharebuttons v4, the README has moved to here.
I divided the plugin into 3 modules to make it possible to include only the module 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.
Install with npm
$ npm install --save @ngx-share/core
Import ShareModule
in your module
import { ShareModule } from '@ngx-share/core';
@NgModule({
imports: [
HttpClientModule, // (Required) for share counts
HttpClientJsonpModule, // (Optional) For linkedIn & Tumblr counts
ShareModule.forRoot()
]
})
In your template
<button shareButton="facebook">Share</button>
<button shareButton="twitter">Tweet</button>
<button shareButton="pinterest">Pin</button>
To use the default icons or colors, use ShareButtons service so you can access buttons properties
import { ShareButtons } from '@ngx-share/core';
@Component({
// ...
})
export class MyComponent {
constructor(public share: ShareButtons) {
}
}
Now you can set them
<!--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 and Reddit. |
[sbDescription] | null | Override description meta tag for LinkedIn, WhatsApp, Telegram and Pinterest |
[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 buttons individually.
Share button component is built on top of ShareModule
so you need to install both @ngx-share/core
and @ngx-share/button
.
To use the default icons, install font-awesome
package.
$ npm install --save @ngx-share/core @ngx-share/button font-awesome
Import ShareButtonModule
in your module
import { ShareButtonModule } from '@ngx-share/button';
@NgModule({
imports: [
HttpClientModule, // (Required) for share counts
HttpClientJsonpModule, // (Optional) For linkedIn & Tumblr counts
ShareButtonModule.forRoot()
]
})
Import core styles and theme from the global style src/styles.scss
@import '~font-awesome/css/font-awesome.min.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>
// Use custom text
<share-button button="pinterest" text="Pin" showText="true"></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 and Reddit. |
[description] | null | Override description meta tag for LinkedIn, WhatsApp, Telegram and Pinterest |
[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 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. |
Use <share-buttons>
component to a collection of share buttons.
Share buttons component is built on top of ShareModule
and ShareButtonModule
so you need to install both @ngx-share/core
, @ngx-share/button
and @ngx-share/buttons
.
To use the default icons, install font-awesome
package.
$ npm install --save @ngx-share/core @ngx-share/button @ngx-share/buttons font-awesome
Import ShareButtonModule
in your module
import { ShareButtonModule } from '@ngx-share/button';
@NgModule({
imports: [
HttpClientModule, // (Required) for share counts
HttpClientJsonpModule, // (Optional) For linkedIn & Tumblr counts
ShareButtonModule.forRoot()
]
})
Import core styles and theme from the global style src/styles.scss
@import '~font-awesome/css/font-awesome.min.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] | [all buttons] | 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 and Reddit. |
[description] | null | Override description meta tag for LinkedIn, WhatsApp, Telegram and Pinterest |
[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 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. |
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 options: 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)
]
})
Option | Default value | Description |
---|---|---|
include | [all buttons] | 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. |
title | null | Override title meta tag (if button supports it). |
description | null | Override description meta tag (if button supports it). |
image | null | Override image meta tag. (if button supports it). |
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. |
You can change the buttons meta data such as button icon and text
import { ShareButtonsModule } from '@ngx-share/buttons';
const buttonsConfig = {
facebook: {
icon: 'fa fa-facebook-official',
text: 'Share on Facebook'
},
twitter: {
icon: 'fa fa-twitter-square',
text: 'Tweet'
},
// and so on...
};
@NgModule({
imports: [
ShareButtonsModule.forRoot(options, buttonsConfig)
]
})
This is useful to customize the style for <share-button>
and <share-buttons>
components
@import '~@ngx-share/button/styles/variables';
// change buttons colors
$sb-buttons: (
facebook: #488aff,
twitter: #32db64,
google: #f53d3d,
stumble: #f4f4f4,
linkedin: $sb-linkedin,
pinterest: $sb-pinterest,
reddit: $sb-reddit,
tumblr: $sb-tumblr,
whatsapp: $sb-whatsapp,
telegram: $sb-telegram,
email: $sb-email,
vk: $sb-vk,
more: $sb-more,
copy: $sb-copy,
print: $sb-print
);
// change other variables
$sb-border-radius: 10px;
@import '~@ngx-share/button/styles/share-buttons';
Use the following classes
.sb-custom-theme {
&.sb-group {
/** ... share buttons container */
}
.sb-wrapper { /** ... share button wrapper */
.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 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