html - How to dynamically create "Share This buttons" with a custom URLs with a javascript function?

Question

im using the http://sharethis.com/ buttons to give users on a website a simple way to share content.

They have information on "custom buttons" here: http://help.sharethis.com/customization/custom-buttons

It looks like to specify the URL, in the example all they have its just html like this:

<span class="st_sharethis" st_url="http://mycustomurl.com" st_title="Sharing Rocks!"
displayText="ShareThis"></span>

But I need to be able to dynamically create buttons on the fly without reloading the page.

So, In a flash application i'm building i have a "share button" that triggers a javascript function on the webpage that makes a "popup" div fade into the center of the screen that I want to display the share buttons. Depending on what share button someone clicks it will need to have a dynamically created URL.

It's important if they close the dialog, then click the share button again, im hoping the code will just overwrite the old code with new buttons, with the new url/titles.

So, i created this javascript function that I call from flash, while passing the url from flash. I placed the script and everything inside my "popup" div, hoping that the buttons will be rendered inside that div.

function shareChannel(theurl)
{
//I cant seem to find an example of what to put here to load the buttons, and give them a custom URL and title

//finally display the popup after the buttons are made and setup.
displaypopup();
}

could anyone possibly post an example of how I might be able to do this without ever reloading the page?

EDIT: @Cubed

<script type="text/javascript">
function shareChannel(chaan)
          {

          document.getElementById('spID1').setAttribute('st_url', 'http://mycustomurl?chan='+chaan);
          document.getElementById('spID1').setAttribute('st_title', 'Custom Title is ['+chann+'] it works!');

          stButtons.locateElements();

          centerPopupThree();
          loadPopupThree();
          }

</script>

Basically nothing happens. I hate using javascript because I really have no idea how to get error messages or debug. When I work with flex, I have a great debugger/console to messaround with. So, sorry im having trouble providing more info. I did notice when I remove just the

document.getElementById('spID1').setAttribute('st_url', 'http://mycustomurl?chan='+chaan);
              document.getElementById('spID1').setAttribute('st_title', 'Custom Title is ['+chann+'] it works!');

The popup appears.

But if I have the above setAttribute code inside the function, the popup never appears, so im assuming something in that code is breaking it. Any suggestions? Or at least a way I could use chrome to tell me what the error is? I tried the inspect element console but there was nothing that appeared there when i triggered the function.

Also, in at the top of my code they had me use:

    <script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js">
</script><script type="text/javascript">stLight.options({publisher:'mypubidgoeshere'});</script>

Should I be using stLight.locateElements(); rather than stButtons.locateElements();

Answer 1

I've been using the

stButtons.locateElements();

function to generate any new buttons after loading content via AJAX, I imagine it will work for this too.

This question might be of some assistance also:

Sharethis button does not work on pages loaded via ajax

Better Solution:

Make your <div> and make sure all the <span>s have IDs, otherwise you can give them classes but you will need to iterate through them all.

function shareChannel(theurl, thetitle)
    {
    document.getElementById('spanID1').setAttribute('st_url', theurl);
    document.getElementById('spanID1').setAttribute('st_title', thetitle);

    stButtons.locateElements();

    //finally display the popup after the buttons are made and setup.
    displaypopup();
    }