AngularJs and AddThis social plugin

Asked 23/3, 2013 at 22:54 Answered 16/3, 2016 at 0:24

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.

Lura answered 23/3, 2013 at 22:54 Comment(0)

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.

Teakettle answered 20/5, 2013 at 16:32 Comment(0)

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>

Wylen answered 24/2, 2015 at 11:53 Comment(3)

Your link isn't valid anymore, but this saved me, thanks! – Aluminium 4/5, 2016 at 9:44

I believe this is the updated link: addthis.com/academy/… – Genesa 16/5, 2016 at 5:54

Thanks, I managed to make an Angular2 component based on this idea to get AddThis working with ng2 – Imbalance 30/11, 2016 at 0:10

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.

Lyon answered 14/10, 2013 at 19:48 Comment(0)

@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());

Monkish answered 9/9, 2014 at 11:45 Comment(0)

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();

Landgrave answered 16/3, 2016 at 0:24 Comment(1)

Please add some explanation. Your answer might get flagged "low quality" and might eventually be removed without. – Ictinus 16/3, 2016 at 9:54

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.

Cheeks answered 24/3, 2013 at 0:21 Comment(1)

Hi blesh, i have tried to reference the script tags for addThis in the partial and does not work :-(. I have read more people having this issue and until now they have not founded a solution. – Lura 25/3, 2013 at 15:48

Recommended topics

Hot tags