aurelia-plugins-addthis
An AddThis plugin for Aurelia.
Installation
Webpack/Aurelia CLI
npm install aurelia-plugins-addthis --save
When using Aurelia CLI add the following dependency to aurelia.json
:
Add node_modules/babel-polyfill/dist/polyfill.min.js
to the prepend list in aurelia.json
. Do not forgot to add babel-polyfill
to the dependencies in package.json
.
For projects using Webpack, please add babel-polyfill
to your webpack.config.js
as documented by babeljs.io.
JSPM
jspm install aurelia-plugins-addthis
Bower
bower install aurelia-plugins-addthis
Configuration
Inside of your main.js
or main.ts
file simply load the plugin inside of the configure method using .plugin()
.
{ aureliause ; aureliause ; await aureliastart; aurelia;}
Usage
Once the Addthis plugin is configured, to use it simply add the custom element <aup-addthis></aup-addthis>
in your view.
There are 6 (optional) attributes defined for this custom element, class
, description
, language
, pubid
, title
and url
.
- Use
description
,title
andurl
to define the description, title and url that AddThis uses to generate the sharing popup of Facebook, Twitter,… - The
class
attribute adds an extra CSS class to the AddThis custom element. - The
language
attribute overrides the globally set language to the language defined in this property. Useful if a user can change the interface language of your application and you want AddThis to change accordingly. - The
pubid
attribute can be used to override thepubid
value set in the config and use a differentpubid
for each AddThis instance.
{} description = 'Please share the AddThis plugin from Aurelia Plugins!'; pubid = 'ra-xxxxxxxxxxxxxxxx'; title = 'Aurelia Plugins - AddThis'; url = 'https://github.com/aurelia-plugins/aurelia-plugins-addthis';
Template
By default the following buttons are shown:
- Share on
Facebook
button - Share on
Twitter
button - Share on
LinkedIn
button - Share on
Google Plus
button - The AddThis Compact button
You can easily change the default template with your own buttons by placing the AddThis button tags in the content block of the <aup-addthis>
element.