How to Install AddThis on AngularJS

We’re excited to announce that AddThis has built its own module for AngularJS! Read on to learn how you can install inline and floating AddThis share buttons, follow buttons, related post tools, and our new Website Tip Jar on your AngularJS apps/sites.

Overview

The official-addthis-angularjs AngularJS module helps you use AddThis tools on your dynamic AngularJS 1.* websites. It has AngularJS-specific functionality to:

• Automatically update the share URL and title on route changes
• Render AddThis inline tools that are added onto the page any time after the initial load
• Do the work to change inline share tool URL, title, description and media attributes at any time

This module includes a provider for pre-bootstrapping configuration, a service for changing configuration at any time after your Angular app bootstraps, and a directive for inline sharing, follow, related post, and Tip Jar tools.

How to Install the AddThis Module into Your AngularJS App

This module is available as a ZIP file or a Git repository, whichever you prefer. Visit addthis.com to sign in or sign up before proceeding to the next steps.

Step 1: Add the AngularJS Module to Your Project

You can install AddThis for AngularJS from addthis.com, NPM, Bower, or Yarn, among other places. Follow the instructions below for your preferred method.

From AddThis.com:

If pulling from AddThis.com, include the following script in your index.html _below_ where the AngularJS framework is included, but _above_ the script that defines your AngularJS app.

<script type="text/javascript" src=”//s7.addthis.com/icons/official-addthis-angularjs/current/dist/official-addthis-angularjs.min.js"></script>

From NPM:

npm install @oracle/addthis-angularjs

Then add a <script> to your index.html, _below_ where the AngularJS framework is included, but _above_ where you define your AngularJS App.

<script type="text/javascript" src="node_modules/@oracle/addthis-angularjs/dist/official-addthis-angularjs.min.js"></script>

From Bower:

bower install addthis-angularjs

From Yarn:

yarn add @oracle/addthis-angularjs

Then add a <script> to your index.html, _below_ where the Angular framework is included, but _above_ where you define your AngularJS App.

<script type="text/javascript" src="/bower_components/official-addthis-angularjs/dist/official-addthis-angularjs.min.js"></script>

Step 2: Add the Module as a Dependency to Your App

When you’re done adding the JavaScript for this module to your site, you’ll need to tell your AngularJS app to include it as a dependency.

angular.module('myApp', ['addthis']);

Step 3: Set Up Your Profile ID

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 on 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.

Option 1:

Include AddThis’ JavaScript anywhere on your page with your profile ID:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=YOUR_PROFILE_ID"></script>

Option 2:

Configure your profile ID using the service provider in the plugin, and it’ll automatically add AddThis’ JavaScript to your site when your AngularJS app bootstraps.

angular.module('myApp', ['addthis']).config(function($addthisProvider) {
   var cfg = {
       'pubid': 'YOUR_PROFILE_ID'
   };
   $addthisProvider.config(cfg);
});

Step 4: Use the Directive

<div addthis-tool tool-class="'addthis_inline_share_toolbox'"></div>

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.

—

For more details on installing AddThis to your AngularJS apps, check out our full documentation here.

Have any questions? Reach out to us at help@addthis.com or @addthissupport on Twitter.