@oracle/addthis-angularjs
v1.0.4
Published
Free and Pro AddThis tools to your AngularJS app. This AngularJS module includes a directive, service and provider. It is smart about route changes and the AngularJS digest cycles and how they affect AddThis tools. Requires a free AddThis account.
Downloads
96
Maintainers
Readme
Grow your website with tools trusted by over 15 million sites. The AddThis AngularJS module includes a directive, service, and provider. It is smart about route/location changes and the AngularJS digest cycles and how they affect AddThis tools. This module requires a free AddThis account and is compatible with free and paid plans. If you're struggling with instructions, we keep the AngularJS install instructions on the AddThis Academy up to date.
Installation
Visit addthis.com to sign in or sign up before proceeding to the next steps.
You can install AddThis for AngularJS from addthis.com, NPM, Bower, or Yarn, among other places. Follow the instructions below for your preferred method.
NPM
Add it to the project
npm install --save @oracle/addthis-angularjs
Yarn
Add it to the project
yarn add @oracle/addthis-angularjs
Bower
Add it to the project
bower install --save addthis-angularjs
Setup
Include the file in HTML
<script src="path/to/@oracle/addthis-angularjs/dist/official-addthis-angularjs.js"></script>
Add addthis
to the module's dependencies
var app = angular.module('MyApp', ['addthis']);
When you create an account on addthis.com, we assign you a profile ID to provide analytics, configure settings, etc. To find your profile ID, log in to your addthis.com account, select the three dots in the top navigation, select "More," and identify your profile ID in the "General" section. Select an option below to set up your profile ID for the module.
Set a Profile ID: Option 1: HTML
Include addthis_widget.js
in HTML with an AddThis profile ID. Replace YOUR_PROFILE_ID
below with a profile ID.
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=YOUR_PROFILE_ID"></script>
Get a profile ID with a free AddThis account.
Set a Profile ID: Option 2: $addthisProvider.profile_id
Set the profile ID and just the profile ID.
app.config(function($addthisProvider) {
$addthisProvider.profileId('YOUR_PROFILE_ID');
});
Get a profile ID with a free AddThis account.
Set a Profile ID: Option 3: $addthisProvider.config
Set other addthis_config
settings with the profile ID. See addthis_config documentation for additional options.
app.config(function($addthisProvider) {
var cfg = {
'pubid': 'YOUR_PROFILE_ID'
};
$addthisProvider.config(cfg);
});
Get a profile ID with a free AddThis account.
Usage
Basic
<div addthis-tool tool-class="'addthis_sharing_toolbox'">
Replace addthis_sharing_toolbox
with the name for the AddThis inline tool desired.
Specify a URL or title other than the current page's
Individually Per Tool
<div
addthis-tool
tool-class="'addthis_sharing_toolbox'"
share-url="'http://example.com'"
share-title="'Check this out:'"
>
Replace addthis_sharing_toolbox
with the name for the AddThis inline share tool desired. If you’re adding inline buttons or Tip Jar buttons, replace addthis_inline_share_toolbox
with the class for the desired tool. To get the class name, visit your addthis.com dashboard, add a tool, navigate to the Get The Code page, and identify the class name in Step 3 on the Get The Code page.
Replace http://example.com
with the URL to share when a visitor clicks on one of the sharing buttons, or, alternately, leave the share-url
attribute out completely. You can use a variable here, ex: share-url="shareUrlFromMyScope"
.
Replace Check this out:
with the title to share when a visitor clicks on one of the sharing buttons, or, alternately, leave the share-title
attribute out completely. You can use a variable here, ex: share-title="shareTitleFromMyScope"
.
Note: Some services (such as Facebook) do not allow you to define the share title for a URL. Facebook will always use the Open Graph tags it finds on the page when it crawls it. You can use the Facebook Sharing Debugger to test your Open Graph tags.
For Every Tool
app.controller('MyCtrl', ['$scope', '$addthis', function($scope, $addthis) {
$addthis.share_url('http://example.com');
$addthis.share_title('Check this out:');
}]);
Replace http://example.com
with the URL to share when a visitor clicks on one of the sharing buttons.
Replace Check this out:
with the title to share when a visitor clicks on one of the sharing buttons.
This will not override the share URL or title for tools using the share-url
and share-title
directive attributes.
More Resources
- More documention
- Example site code. Example 1 is plaing AngularJS, example 2 uses ngRoute and example 3 uses AngularUI Router
- register for an AddThis account
- addthis_config documentation
- addthis_share documentation