2013-03-12 22 views
17

Próbuję dynamicznie zmieniać adres URL wysyłany przez addthis. Kiedy użytkownik zmienia element, aktualizuje obszar tekstowy zawierający niestandardowy adres URL, aby mógł powrócić do tego adresu URL i kontynuować/przeglądać swoją pracę.Dynamicznie zmień adres AddThis za pomocą jQuery

tworzę przycisk AddThis jak tak (od ich docs 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"); 
}); 

wtedy, gdy adres URL jest aktualizowana Próbuję zaktualizować URL AddThis tak:

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

Oryginalne przyciski są generowane i zawierają poprawny adres URL, ale po uruchomieniu funkcji aktualizacji adresu url addthis share nie jest aktualizowany. Jak zmusić go do aktualizacji adresu URL addthis?

+0

Chcesz odświeżyć stronę? 'window.location.reload()' – soyuka

+0

Nie ... ten adres zmienia się bardzo często. – maddogandnoriko

+0

Hmm to dziwne, ponieważ twój var 'addthis_share' wygląda na globalny. Powinieneś spróbować przeładować wtyczkę AddThis lub sprawdzić, czy możesz bezpośrednio zmienić URL w DOM. – soyuka

Odpowiedz

18

Jeśli chcesz zmienić adres URL addthis po załadowaniu html (w przypadku ajax lub niektórych zdarzeń użytkownika), użyj poniższego hacka. apis AddThis są podzielone jak na [09/04/13 11:42:24 AM] słoneczne jhunjhunwala:

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

http://www.sourcen.com ---> nowy url

+0

Dziękuję bardzo – maddogandnoriko

+0

Wow, dziękuję bardzo! – Darren

+0

witam wszystkich .... – sunnyuff

0

AddThis zapewnia addthis.update ("share", "URL", wartość) funkcji (ale to jest funkcja buggy w IE8); spróbuj tego:

for(var i = 0; i < addthis.links.length; i++){ 
    addthis.links[i].share.url= "new url"; 
} 
0
<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> 

użyłem zmiennej globalnej shareConfig śledzić konfiguracji URL i tytuł. Mam wiele dodatkowych przycisków na stronie internetowej, z których każda udostępnia inną treść. Dlatego dodałem isSameNode, aby upewnić się, że aktualizuję tylko przycisk, który chcę.

Chociaż adres URL i tytuł są zmieniane dynamicznie, atrybuty addthis:url i addthis:title muszą znajdować się w przycisku (<span>), ponieważ w przeciwnym razie nie będzie działać.

+0

Skąd pochodzi 'isSameNode'? – crmpicco

15

jest tak prosta jak to:

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

zdrowie, Gary

0

Etap 1: Przygotowanie ajax zawartości do załadowania innej 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> 

Krok 2: Przygotowanie mojej konfiguracji ajaxcybox;

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

Powyższe linie wewnątrz funkcji "afterShow()" są ważne, aby zachować notatkę;

0

Aby dostosować przycisk:

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

część głowicy:

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

części ciała: W moim przypadku używam php ustawić atrybuty ciało tak.

<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; ?>" 
> 

Aby zaktualizować zawartość dynamicznie (JS Part):

<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> 
Powiązane problemy