X

Step Up to Modern Cloud Development

Announcing AddThis for AngularJS

Emily Schwartz
Product Manager, AddThis Website Tools

We’re excited to announce that AddThis, the global leader in website marketing tools, has built a module for AngularJS! Grow your website with tools by trusted by over 15 million sites. 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 and websites.

Overview

The official addthis-angularjs module helps you use AddThis tools on your dynamic AngularJS 1.* websites. It has specific functionalities 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 and related post 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.

 

Step 1: Add the AngularJS Module to Your Project

 

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 you 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 --save addthis-angularjs

 

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

 

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

 

From Yarn

 

yarn add @oracle/addthis-angularjs

 

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

 

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

 

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

 

Replace addthis_inline_share_toolbox with the class for the desired tool.

 

For more details on how to add AddThis to your AngularJS apps, check out our full documentation here or our Academy article here.

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

 
Related content

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha
Oracle

Integrated Cloud Applications & Platform Services