title: How to dynamically create "Share This buttons" with a custom URLs with a javascript function?
body: <p>im using the <a href="http://sharethis.com/" rel="noreferrer">http://sharethis.com/</a> buttons to give users on a website a simple way to share content.</p>
  
  <p>They have information on "custom buttons" here: <a href="http://help.sharethis.com/customization/custom-buttons" rel="noreferrer">http://help.sharethis.com/customization/custom-buttons</a></p>
  
  <p>It looks like to specify the URL, in the example all they have its just html like this:</p>
  
  <pre><code>&lt;span class="st_sharethis" st_url="http://mycustomurl.com" st_title="Sharing Rocks!"
  displayText="ShareThis"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>But I need to be able to dynamically create buttons on the fly without reloading the page.</p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>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();
  }
  </code></pre>
  
  <p>could anyone possibly post an example of how I might be able to do this without ever reloading the page?</p>
  
  <p>EDIT:
  @Cubed</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  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();
            }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>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 </p>
  
  <pre><code>document.getElementById('spID1').setAttribute('st_url', 'http://mycustomurl?chan='+chaan);
                document.getElementById('spID1').setAttribute('st_title', 'Custom Title is ['+chann+'] it works!');
  </code></pre>
  
  <p>The popup appears.</p>
  
  <p>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.</p>
  
  <p>Also, in at the top of my code they had me use:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;var switchTo5x=true;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"&gt;
  &lt;/script&gt;&lt;script type="text/javascript"&gt;stLight.options({publisher:'mypubidgoeshere'});&lt;/script&gt;
  </code></pre>
  
  <p>Should I be using 
  <code>stLight.locateElements();</code> rather than <code>stButtons.locateElements();</code></p>