AngularJs and AddThis social plugin

I have created the simple AngularJS directive to refresh AddThis toolbox defined inside the dynamically included partial

angular.module('Directive.AddThis', [])

/**
 * AddThis widget directive
 *
 * Usage:
 *   1. include `addthis_widget.js` in header with async=1 parameter
 *   <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<pubid>&async=1"></script>
 *   http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-url
 *   2. add "addthis-toolbox" directive to a widget's toolbox div
 *   <div addthis-toolbox class="addthis_toolbox addthis_default_style addthis_32x32_style">
 *     ...       ^
 *   </div>
 */
.directive('addthisToolbox', function() {
    return {
        restrict: 'A',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>',
        link: function ($scope, element, attrs) {
            // Dynamically init for performance reason
            // Safe for multiple calls, only first call will be processed (loaded css/images, popup injected)
            // http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-url
            // http://support.addthis.com/customer/portal/articles/381221-optimizing-addthis-performance
            addthis.init();
            // Ajax load (bind events)
            // http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#rendering-js-toolbox
            // http://support.addthis.com/customer/portal/questions/548551-help-on-call-back-using-ajax-i-lose-share-buttons
            addthis.toolbox($(element).get());
        }
    }
});

Usage example:

<html>
<head>
    <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<my-pubid>&async=1"></script>
</head>
<body>

  <!-- AddThis Button BEGIN -->
  <div addthis-toolbox class="addthis_toolbox addthis_default_style addthis_32x32_style">
      <a class="addthis_button_facebook"></a>
      <a class="addthis_button_twitter"></a>
      <a class="addthis_button_google_plusone_share"></a>
      <a class="addthis_button_compact"></a>
      <a class="addthis_counter addthis_bubble_style"></a>
      <script type="text/javascript">var addthis_config = { "data_track_clickback": false, "data_track_addressbar":false };</script>
  </div>
  <!-- AddThis Button END -->

</body>
</html>

Default widget code from addthis site should also work, just remove &async=1 and addthis.init().

You can use a similar approach to control other addThis functions, such as addthis.button(), addthis.counter() etc.


If you are using the new AddThis dashboard configuration then you can just wrap addthis.layers.refresh() (see: http://www.addthis.com/academy/using-dashboard-configuration-tools-dynamically/) in a directive and add to your div.

.directive('addthisToolbox', function() {
    return {
        restrict: 'A',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>',
        link: function ($scope, element, attrs) {
            // Checks if addthis is loaded yet (initial page load)
            if (addthis.layers.refresh) {
               addthis.layers.refresh();
            }
        }
    };
});

HTML: <div addthis-toolbox class="addthis_sharing_toolbox"></div>


Wanted to add an additional point to the answer by atonpinchuk. An issue we had in our app was that we had the addthis buttons on various pages and wanted the url and title to vary depending on the page. We have a service that updates the meta tags but because addthis is initiated with the script in our main template, addthis did not pick up on our changed meta tags.

Our solution was to use the sharing configuration in our directive as noted here: http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-sharing

This way addthis picks up the right url and titles. Of course if you want to fully mimick the social sharing features of a non-client side webiste, this is only half the battle. You would need to also write your own service to update tags in the head. Then you need to use phantomJS to create static versions of your site and redirect google, facebook, and other crawlers to it.

An issue we are having is that the buttons don't render in IE8 for some reason. Haven't figured out a solution yet. The weird thing is that it works if you call it addthis.init() in a script tag via the HTML but this won't work for an SPA. Also addthis.init() is available (ie !!addthis.init() == true in the directive so I am not sure what is wrong with it.

Tags:

Jquery

Addthis

Angularjs

Recent Posts