AngularJs und AddThis Social Plugin

Ich versuche, das AddThis JavaScript Social Plugin in einer AngularJS App zu verwenden, aber es aktualisiert nicht die AddThis Plugin-Symbole, wenn ich eine teilweise mit ng-Ansicht laden. Wenn ich die Seite aktualisiere (Strg + F5). Ich denke, AngularJs lädt die partiellen Ansichten über Ajax und in diesem Fall werden die sozialen Symbole der geladenen Seite nicht angezeigt.AngularJs und AddThis Social Plugin

Dies ist der Index-Code:

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

Dies ist die Teilansicht ist, dass Belastungen im Abschnitt Tag, wo ich die addthis Symbole haben:

<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>

Natürlich, ich das Skript Referenz für AddThis auf der Startseite:

<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>

Ich habe die jquery Skript Referenz Befo Re WinkelJS Referenz:

 <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>

Vielen Dank im Voraus.

Quelle

2013-03-23 rtrujillor

ich die einfache AngularJS Richtlinie erstellt haben AddThis Toolbox in der dynamisch integrierten Teil

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

Anwendungsbeispiel definiert aufzufrischen:

<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>

Standard Widget-Code von addthis site auch funktionieren sollte, entfernen Sie einfach &async=1 und addthis.init().

Sie können einen ähnlichen Ansatz verwenden, um andere addthis Funktionen zu steuern, wie addthis.button(), addthis.counter() usw.

Quelle

2013-05-20 16:32:43 antonpinchuk

Sie werden wahrscheinlich die Skript-Tag-Referenzen für Ihre hinzufügen dieses Skript in Ihrem Teil müssen. Das wäre die einfachste Lösung.

Was passiert, ist zu dem Zeitpunkt, zu dem sie ausgeführt werden, das Partial ist noch nicht geladen, so dass sie nichts beeinflussen.

Quelle

2013-03-24 00:21:37

Hallo blesh, ich versucht haben, um die script tags für addThis im partiellen zu referenzieren und funktioniert nicht :-(. Ich habe mehr Leute gelesen, die dieses iss haben und bis jetzt haben sie keine Lösung gefunden. – rtrujillor

Wollte einen zusätzlichen Punkt auf die Antwort von atonpinchuk hinzuzufügen. Ein Problem, das wir in unserer App hatten, war, dass wir diese Schaltflächen auf verschiedenen Seiten hatten und wollten, dass die URL und der Titel abhängig von der Seite variieren. Wir haben einen Dienst, der die Meta-Tags aktualisiert, aber da addthis mit dem Skript in unserer Hauptvorlage initiiert wird, hat addthis unsere geänderten Meta-Tags nicht aufgegriffen.

Unsere Lösung war die gemeinsame Nutzung Konfiguration in unserer Richtlinie zu verwenden, wie hier angemerkt: http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-sharing

Auf diese Weise addthis nimmt die richtige URL und Titel auf. Natürlich, wenn Sie die Social-Sharing-Funktionen einer Nicht-Client-Seite Webmaster vollständig imitieren möchten, ist dies nur die halbe Miete. Sie müssten auch einen eigenen Dienst schreiben, um Tags im Kopf zu aktualisieren. Dann müssen Sie phantomJS verwenden, um statische Versionen Ihrer Site zu erstellen und Google, Facebook und andere Crawler darauf umzuleiten.

Ein Problem, das wir haben, ist, dass die Tasten in IE8 aus irgendeinem Grund nicht rendern. Habe noch keine Lösung gefunden. Das Seltsame ist, dass es funktioniert, wenn Sie es über das HTML in einem Skript-Tag addthis.init() nennen, aber dies wird nicht für ein SPA funktionieren.Auch addthis.init() verfügbar ist (dh !!addthis.init() == true in der Richtlinie so bin ich nicht sicher, was mit ihm nicht stimmt.

Quelle

2013-10-14 19:48:02 wlingke

@ antonpinchuk Lösung gut für mich gearbeitet, es funktioniert einfach nicht den Zähler aktualisieren ... Ich habe die folgende Zeile am Ende der Richtlinie und jetzt funktioniert alles wie ein Zauber :)

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

Quelle

2014-09-09 11:45:15 armoucar

Wenn Sie die neue AddThis Dashboard-Konfiguration verwenden, dann können Sie nur addthis.layers.refresh() wickeln (siehe: http://www.addthis.com/academy/using-dashboard-configuration-tools-dynamically/) in einer Richtlinie und fügen Sie Ihre 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>

Quelle

2015-02-24 11:53:03 watsontom100

Ihr Link ist nicht mehr gültig, aber das hat mich gerettet, danke! – kolli

Ich glaube, das ist der aktualisierte Link: http://www.addthis.com/academy/using-dashboard-configuration-tools-dynamically/ – Andrew

Danke, ich habe es geschafft, eine Angular2-Komponente basierend auf dieser Idee zu machen, um AddThis arbeiten zu können ng2 – Rodney

Versuchen:

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

In Ihrer Winkel Richtlinie oder Controller inyect de $window Objekt nach der nächsten Methode aufrufen: $window.addthis.layers.refresh();

Quelle

2016-03-16 00:24:39 Esteban

Bitte fügen Sie eine Erklärung hinzu. Ihre Antwort wird möglicherweise als "geringe Qualität" gekennzeichnet und kann möglicherweise ohne entfernt werden. –

AngularJs und AddThis Social Plugin

Antwort

Verwandte Themen