NOTE: This version
3.0.0supports Angular 2 & 4 only.
Available share buttons:
Facebook, Twitter, Pinterest, Whatsapp, Google, Tumbler, Reddit, StumbleUpOn, LinkedIn
Install it with npm
npm install --save ngx-sharebuttons@3.0.0
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ngx-sharebuttons:
map: {
'ngx-sharebuttons': 'node_modules/ngx-sharebuttons/bundles/ngx-sharebuttons.umd.js',
}Here is a plunker, based on angular-quickstart.
Import ShareButtonsModule in the root module
import {ShareButtonsModule} from 'ngx-sharebuttons';
@NgModule({
imports: [
//...
HttpModule,
ShareButtonsModule.forRoot(),
// ...
]
})- For all/some share buttons use:
<share-buttons></share-buttons>
- For a single share button use:
<share-button button="facebook"></share-button>
Add share buttons for your favorite share services
Basic usage:
<share-buttons [url]="linkToShare"></share-buttons>The default usage comes with icons from fontawesome, make sure you import it in your app.
It's recommended to use the meta tags to set the title, description and image for all share buttons.
Alternatively you can set them directly using the inputs as URL parameters, Check inputs compatibility with each social network.
<share-buttons [url]="linkToShare" [title]="title" [description]="description" [image]="image"></share-buttons>Options:
[url]If URL is invalid or not presented, it will use the current url
Meta tags alternates:
[title]Set title text[description]Set description text[image]Set Image[tags]Set hashtags
Buttons templates: Pass a custom button template to replace the default icons, Switch off a button by passing false
[facebook][twitter][linkedIn][tumblr][google][pinterest][stumbleUpOn][reddit]
Options:
[showCount]Enable counts on share buttons, default: false[defaultStyle]Use default style is applied to the buttons, default: true[buttonClass]Add custom classes to all buttons(count)Output all buttons' counts(popUpClosed)Output when pop up window is closed
Disable the default style with [defaultStyle]="false" then use the following classes to override share buttons style
Share counters in share component
To display share counters on buttons, enable the input [count]="true"
<share-buttons [url]="'https://twitter.com'" [showCount]="true"></share-buttons>Share counters in share directive
<button [shareButton]="'facebook'" [sbShowCount]="true" (sbCount)="fbCount = $event">
<i class="fa fa-facebook"></i> {{ fbCount | nFormatter }}
</button>Twitter, WhatsApp and StumbleUpOn do NOT provide share counts
By default all social networks use the meta tags to get your app info. luckily the following inputs can set/override these info through the share URL as URL parameters
Inputs compatibility with the social networks:
| URL | Title | Description | Image | Tags | |
|---|---|---|---|---|---|
| ✔ | ✔ | ✔ | ✔ | ✖ | |
| ✔ | ✔ | ✖ | ✖ | ✔ | |
| google+ | ✔ | ✖ | ✖ | ✖ | ✖ |
| ✔ | ✔ | ✔ | ✖ | ✖ | |
| ✔ | ✖ | ✔ | ✔ | ✖ | |
| tumblr | ✔ | ✖ | ✔ | ✖ | ✔ |
| ✔ | ✔ | ✔ | ✖ | ✖ | |
| ✔ | ✔ | ✖ | ✖ | ✖ | |
| stumbleupon | ✔ | ✖ | ✖ | ✖ | ✖ |
The incompatible inputs means either the social network do not have such input or it does not support URL parameters
In any case you should make your app SEO friendly and this is done by setting the meta tags in document head.
Note: the social networks reads only the static html of your URL (no javascript execution). it means that changing the meta tags using javascript or an angular module like ngx-meta, ng2-meta, Angular Meta Service ...etc will not effect without using a server side rendering such as Universal
An example of how would the meta tags look like in your app head
<meta name="title" content="Angular Share Buttons">
<meta name="description" content="Simple, lightweight, customizable share buttons">
<meta property="og:title" content="Angular Share Buttons">
<meta property="og:description" content="Simple, lightweight, customizable share buttons">
<meta property="og:url" content="https://murhafsousli.github.io/ngx-sharebuttons/">
<meta property="og:image" content="https://murhafsousli.github.io/ngx-sharebuttons/assets/img/cover.png">share-buttons {
/** ShareButtons Element */
.sb-buttons {
/** share buttons' container */
.sb-button {
/** button's container */
button {
.sb-template {
/** icon's container */
}
.sb-count {
/** share count */
}
}
}
}
}Here is a modified plunkr
Override order in the global style
.sb-buttons {
.facebook {
order: 6;
}
.twitter {
order: 1;
}
.whatsapp {
order: 2;
}
}Add your custom css in the global style not in the component stylesheet*
To add a custom button template, Use the input of the social media service you want, e.g. give facebook a custom template [facebook]="fbTemp".
To exclude a button, set it to false. e.g. [reddit]="false"
<share-buttons
[defaultStyle]="false"
[facebook]="fbTemp"
[twitter]="twitterTemp"
[pinterest]="pintTemp"
[linkedIn]="inTemp"
[google]="googleTemp"
[tumblr]="tumblrTemp"
[reddit]="false"
[stumbleUpOn]="false"
></share-buttons>export class SomeComponent {
fbTemp = "<img src='../assets/img/custom/facebook.svg'>";
twitterTemp = "<img src='../assets/img/custom/twitter.svg'>";
pintTemp = "<img src='../assets/img/custom/pinterest.svg'>";
inTemp = "<img src='../assets/img/custom/linkedin.svg'>";
googleTemp = "<img src='../assets/img/custom/google-plus.svg'>";
tumblrTemp = "<img src='../assets/img/custom/tumblr.svg'>";
}If you don't like to have such variables in your code, I recommend you to use the share directive instead where you can define the buttons/images in the template and convert them to sharing buttons
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]Set title text[sbDescription]: Set description text[sbImage]Set Image[sbTags]: Set hashtags
Check input compatibility with each social network.
Button template:
[shareButton]: Pass sharebutton name as string e.g.facebook
Button options
Twitter, WhatsApp and StumbleUpOn do NOT provide share counts
-
[sbShowCount]: Enable share count on the button, default: false -
(sbCount): Output share count of the button -
(sbPopUpClosed): Output when pop up window is closed -
or you can convert any element to share button (useful if you are using a css framework like bootstrap or material)
<button md-raised-button shareButton="twitter"><i class="fa fa-twitter"></i></button>
Check share button directive doc
- You can add
Via @yourTwitterAccountto any tweet button you have on your application. - Set popup share window's dimension.
Usage:
import {ShareButtonsService} from 'ngx-sharebuttons';
.
.
constructor(shareButton: ShareButtonsService){
//Add `Via @yourTwitterAccount` to tweet button.
shareButton.twitterAccount = "yourTwitterAccount";
//Set the height and width of the popup share window.
shareButton.windowHeight = 600; //default: 400
shareButton.windowWidth = 800; //default: 500
}Some social networks resizes the popup window automatically like
fband
Murhaf Sousli