AngularJs e AddThis social plugin

Sto provando a utilizzare il plug-in AddThis javascript Social in un'app AngularJS, ma non aggiorna le icone addthis del plug-in quando carico un partial con ng-view. Se aggiorno la pagina lo fa (ctrl + F5). Penso che AngularJs carichi le viste parziali tramite Ajax e in tal caso addthis non mostra le icone social della pagina caricata.AngularJs e AddThis social plugin

Questo è il codice di indice:

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

Questa è la vista parziale che carica nel tag sezione, dove sono le icone AddThis:

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

Naturalmente, ho lo script riferimento per AddThis nella 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>

Ho il riferimento di script jquery prima riferimento di riferimento:

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

Grazie in anticipo.

fonte

2013-03-23 rtrujillor

ho creato la direttiva semplici AngularJS per aggiornare AddThis toolbox definito all'interno del dinamicamente incluso parziale esempio

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:

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

predefinito codice del widget da addthis site dovrebbe anche funzionare, è sufficiente rimuovere &async=1 e addthis.init().

è possibile utilizzare un approccio simile per controllare altre funzioni AddThis, come ad esempio addthis.button(), addthis.counter() ecc

fonte

2013-05-20 16:32:43 antonpinchuk

Probabilmente avrai bisogno di inserire i riferimenti del tag script per aggiungere questo script nel tuo parziale. Questa sarebbe la soluzione più semplice.

Quello che succede è che al momento dell'esecuzione, il partial non è ancora caricato, quindi non influisce su nulla.

fonte

2013-03-24 00:21:37

Hi blesh, ho provato fare riferimento ai tag script per addThis nel partial e non funziona :-(. Ho letto più persone che hanno questo iss e fino ad ora non hanno trovato una soluzione. – rtrujillor

voluto aggiungere un ulteriore punto per la risposta atonpinchuk. Un problema che abbiamo riscontrato nella nostra app era che disponevamo di pulsanti aggiuntivi su varie pagine e volevamo che l'URL e il titolo cambiassero a seconda della pagina. Abbiamo un servizio che aggiorna i meta tag, ma poiché addth è avviato con lo script nel nostro modello principale, addthis non ha rilevato i nostri meta tag modificati.

La nostra soluzione era quella di utilizzare la configurazione di condivisione nel nostro direttiva come notato qui: http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-sharing

In questo modo AddThis raccoglie l'url destra e titoli. Ovviamente, se vuoi imitare completamente le funzionalità di condivisione social di un sito web non client, questa è solo metà della battaglia. Dovresti anche scrivere il tuo servizio per aggiornare i tag in testa. Quindi devi usare phantomJS per creare versioni statiche del tuo sito e reindirizzare google, facebook e altri crawler.

Un problema che stiamo riscontrando è che i pulsanti non vengono visualizzati in IE8 per qualche motivo. Non ho ancora trovato una soluzione. La cosa strana è che funziona se lo chiami addthis.init() in un tag script tramite HTML, ma questo non funzionerà per una SPA.Inoltre addthis.init() è disponibile (cioè !!addthis.init() == true nella direttiva, quindi non sono sicuro di ciò che è sbagliato con esso.

fonte

2013-10-14 19:48:02 wlingke

@ soluzione antonpinchuk ha funzionato bene per me, semplicemente non aggiorna il contatore ... ho aggiunto la seguente linea alla fine della direttiva e ora tutto funziona come un fascino :)

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

fonte

2014-09-09 11:45:15 armoucar

Se si sta utilizzando la nuova configurazione del cruscotto AddThis allora si può solo avvolgere addthis.layers.refresh() (vedi: http://www.addthis.com/academy/using-dashboard-configuration-tools-dynamically/) in una direttiva e aggiungere al vostro 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>

fonte

2015-02-24 11:53:03 watsontom100

Il tuo link non è più valido, ma questo mi ha salvato, grazie! – kolli

Credo che questo sia il collegamento aggiornato: http://www.addthis.com/academy/using-dashboard-configuration-tools-dynamically/ – Andrew

Grazie, sono riuscito a creare un componente Angular2 basato su questa idea per far funzionare AddThis con ng2 – Rodney

Prova:

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

Nella direttiva angolare o il controller inyect de $window oggetto dopo la chiamata al metodo successivo: $window.addthis.layers.refresh();

fonte

2016-03-16 00:24:39 Esteban

Per favore aggiungi qualche spiegazione. La tua risposta potrebbe essere contrassegnata con "bassa qualità" e alla fine potrebbe essere rimossa senza. –

AngularJs e AddThis social plugin

risposta

Problemi correlati