Modifica l'url in modo dinamico di AddThis con jQuery

Question

Sto provando a modificare dinamicamente l'URL inviato da addthis. Quando un utente modifica un elemento, aggiorna un'area di testo contenente un URL personalizzato in modo che possa tornare a quell'URL e continuare/visualizzare il proprio lavoro.

sto creando un pulsante di AddThis in questo modo (dai loro documentazione API):

var addthis_share = {url:"http://www.johndoe.com"} 
$(document).ready(function(){ 
    var tbx = document.getElementById("toolbox"), 
    svcs = {email: 'Email', print: 'Print', facebook: 'Facebook', expanded: 'More'}; 
    for (var s in svcs) { 
     tbx.innerHTML += '<a class="addthis_button_'+s+'">'+svcs[s]+'</a>'; 
    } 
    addthis.toolbox("#toolbox"); 
}); 

Poi quando l'URL viene aggiornato Sto cercando di aggiornare la quota URL AddThis in questo modo:

function updateURL(){ 
    ...get some variables here and generate a new url 
    var newURL="http://the.url.i.want.to.share.com"; 
    $('#tagUrl').val(newURL); 
    //addthis_share = {url:newURL} 
    addthis_share = {url:newURL} 
    addthis.toolbox("#toolbox"); 
} 

I pulsanti originali vengono generati e contengono l'URL corretto, ma quando la funzione di aggiornamento url esegue l'aggiunta, l'URL di condivisione non viene aggiornato. Come posso forzarlo ad aggiornare l'URL di addthis?

Answer 1

Se si desidera modificare l'indirizzo URL dopo che l'html è stato caricato (in caso di ajax o di alcuni eventi utente), utilizzare la codifica sottostante. apis AddThis sono rotti come il [09/04/13 11:42:24 AM] Jhunjhunwala sole:

addthis.update('share', 'url', 'http://www.sourcen.com'); 
addthis.url = "http://www.sourcen.com";                 
addthis.toolbox(".addthis_toolbox"); 

http://www.sourcen.com ---> nuovo URL

Answer 2

AddThis fornisce addthis.update funzione ("share", "url", value) (ma è una funzione buggy in IE8); provare questo:

for(var i = 0; i < addthis.links.length; i++){ 
    addthis.links[i].share.url= "new url"; 
} 

Answer 3

<span id="share-obj" addthis:url="" addthis:title=""></span> 

<script type="text/javascript"> 
    var shareConfig = {url: '', title: ''}; 

    addthis.button('#share-obj', {}, shareConfig); 

    addthis.addEventListener('addthis.menu.open', function(event){ 
     if (! event.data.element.isSameNode($('#share-obj')[0])) { 
      return; 
     } 

     event.data.share.title = shareConfig.title; 
     event.data.share.url = shareConfig.url; 
    }); 

    // in updateURL() or any other place during runtime... 
    function updateURL() { 
     shareConfig.url = 'http://different.url'; 
     shareConfig.title = 'Title changed dynamically...'; 
    } 
</script> 

ho usato una variabile globale shareConfig per tenere traccia della configurazione URL e titolo. Ho più pulsanti aggiuntivi in ​​una pagina Web, ognuno con contenuti diversi. Pertanto ho aggiunto un isSameNode per assicurarmi di aggiornare solo il pulsante che desidero.

Sebbene l'URL e il titolo siano modificati dinamicamente, gli attributi addthis:url e addthis:title devono essere presenti nel pulsante (<span>), altrimenti non funzionerà.

Answer 4

E 'semplice come questo:

addthis.update('share', 'url', "http://www.example.com"); 
addthis.update('share', 'title', "Example Domain Title"); 
addthis.update('share', 'description', "Hello, I am a description"); 

Cheers, Gary

Answer 5

Step-1: Preparazione contenuti ajax per essere caricato con altri HTML;

<div class="addthis_sharing_toolbox-CUSTOM" data-url="<?php my_dynamic_link(); ?>" data-title="<?php my_dynamic_title(); ?>"> 
    <a class="addthis_button_email" style="cursor:pointer"></a> 
    <a class="addthis_button_facebook" style="cursor:pointer"></a> 
    <a class="addthis_button_twitter" style="cursor:pointer"></a> 
    <a class="addthis_button_linkedin" style="cursor:pointer"></a> 
</div> 

Step-2: Preparazione del setup fancybox ajax;

$('.popUpBtn').fancybox({ 
    //....other fancybox settings can go here... 
    //.... 
    afterShow : function(current, previous){ 
     //addthis.init(); 
     addthis.update('share', 'url', $('.fancybox-inner .addthis_sharing_toolbox-CUSTOM').data('url')); 
     addthis.update('share', 'title', $('.fancybox-inner .addthis_sharing_toolbox-CUSTOM').data('title')); 
     //addthis.update('share', 'description', "Hello, I am a description"); 
     addthis.toolbox('.addthis_sharing_toolbox-CUSTOM'); //-->Important: this selector should not be anything from the addthis settings page; We can choose any other names like normal selectors; 
    } 
}); 

Le righe precedenti all'interno della funzione "afterShow()" sono importanti per mantenere una nota;

Answer 6

Per adattato il tasto:

<a class="addthis_button_compact" > 
    <img src="./images/share.png" width="36" height="36" border="0" alt="Share" /> 
</a> 

capo Parte: Parte del corpo

<meta property="og:title" content="YOUR TITLE" /> 
<meta property="og:description" content="YOUR DESCRIPTION" /> 
<meta property="og:image" content="YOUR IMAGE URL" /> 

: Nel mio caso sto usando php ho impostato il corpo attributi come questo.

<body 
     data-url="<?php echo basename($_SERVER['REQUEST_URI']); ?>" 
     data-title="<?php echo $info->record_info->brand; ?>" 
     data-description="<?php echo $info->record_info->description; ?>" 
     data-media="<?php echo ./uploads/logos/<?php echo $info->record_info->logo; ?>" 
> 

Per aggiornare i contenuti in modo dinamico (JS Parte):

<script> 
    addthis.update('share', 'url', $('body').data('url')); // will set the URL 
    addthis.update('share', 'title', $('body').data('title')); // will set the title 
    addthis.update('share', 'description', $('body').data('description')); // will set the description 
    addthis.update('share', 'media', $('body').data('media')); // will set the image if you are sharing 
</script>