AngularJs and AddThis social plugin

Question

I'm trying to use the AddThis javascript Social plugin in an AngularJS App, but It does not updates the addthis plugin icons when I load a partial with ng-view. If I refresh the page it does (ctrl+F5) . I think AngularJs loads the partial views via Ajax an in that case addthis does not show the social icons of the loaded page.

This is the index code:

<header>
       .....
</header>
<div>
     <section id="content" ng-view></section>
</div>
<footer id="footer" ng-controller="footerCtrl">
     ...
</footer>

This is the partial view that loads in the section tag ,where i have the addthis icons:

<div class="ad-col" >
        <p ng-bind-html-unsafe="homeContent.promo.entradilla"></p>
        <br />
        <br />
        <!-- AddThis Button BEGIN -->
        <div 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_linkedin"></a>
            <a class="addthis_button_google_plusone_badge"></a>
            <a class="addthis_button_pinterest_pinit"></a>
            <a class="addthis_button_compact"></a>
            <a class="addthis_counter addthis_bubble_style"></a>
        </div>
        <!-- AddThis Button END -->
    </div>

Of course, i have the script reference fot AddThis in the Home page:

<script type="text/javascript">var addthis_config = { "data_track_addressbar": true };</script>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5113c1e01aaacb3f"></script>

I have the jquery script reference before angularJs reference:

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

Thanks in advance.

Answer 1

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>

Answer 2

Try:

`<script type="text/javascript">
    //always refresh on URL change
    window.addEventListener("hashchange", function () {
      addthis.layers.refresh();
    });
</script>`

In your angular directive or controller inyect de $window object after call the next method: $window.addthis.layers.refresh();

Answer 3

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.

Answer 4

@antonpinchuk's solution worked well for me, it just doesn't update the counter... I added the following line at the end of the directive and now everything works like a charm :)

addthis.counter($(element).children('.addthis_counter').get());

Answer 5

You're probably going to need to put the script tag references for your add this script in your partial. That would be the easiest fix.

What's happening is at the time they're being run, the partial hasn't loaded yet, so they don't affect anything.

Answer 6

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.