AngularJs and AddThis social plugin

Related searches

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.

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.

AngularJS Archives, Now Free! Tools. Share Buttons Follow Buttons Related Posts List Building Link Promotion. Plugins. 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

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>

AngularJs and AddThis social plugin, I have created the simple AngularJS directive to refresh AddThis toolbox defined inside the dynamically included partial CMS Plugins, Apps, & More. Whether you’re looking for quick, drag-and-drop share buttons or a module to more easily integrate AddThis with your development framework, we’ve got the tools you need on the platforms you use most.

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.

addthis/addthis-angularjs: AddThis: Official Library for , The AddThis AngularJS module includes a directive, service, and provider. It is smart about route/location changes and the AngularJS digest cycles and how� 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

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

AngularJs and AddThis social plugin, 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. How to Install AddThis on AngularJS. Learn how to install AddThis share buttons, follow buttons, related posts, and Tip Jar on your AngularJS apps. Social Plugins

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

keywords:addthis, Free and Pro AddThis tools to your AngularJS app. This AngularJS module includes a directive, service and provider. It is smart An AddThis plugin for Aurelia. Addthis toolbox directive, Re-renders addthis buttons as ngRoute changes views in our app since the addthis buttons only load by default on page load and not when the DOM is updated - thisissoon/angular-addthis

AddThis WordPress Social Plugins make it easy and quick to install AddThis Website Tools (i.e. share buttons, follow buttons, and more) on your WordPress site.

How to Install AddThis on AngularJS; Social Plugins WordPress Social Plugins Accelerated Mobile Pages (AMP) CMS Plugin Email Integration. Learn Why AddThis?

ngSocialShare is an angular plug and play Social Share Directive that supports configuring the various social networks on which you want to share data from your angular apps. January 2, 2016 Social Media Angular Directive To Share Link To Social Networks – Socializer

Comments
  • Your link isn't valid anymore, but this saved me, thanks!
  • I believe this is the updated link: addthis.com/academy/…
  • Thanks, I managed to make an Angular2 component based on this idea to get AddThis working with ng2
  • Please add some explanation. Your answer might get flagged "low quality" and might eventually be removed without.
  • 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.