最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin6浏览0评论

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

They have information on "custom buttons" here:

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

<span class="st_sharethis" st_url="" 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=".js">
</script><script type="text/javascript">stLight.options({publisher:'mypubidgoeshere'});</script>

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

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();

Share Improve this question edited May 30, 2022 at 21:16 Daniel Widdis 9,13113 gold badges48 silver badges68 bronze badges asked Sep 2, 2011 at 20:43 brybambrybam 5,01912 gold badges52 silver badges95 bronze badges 1
  • There's a typo in the code, you have 'chann' and 'chaan', that's why it's not working, change 'chann' to 'chaan' for the title and it should work wonders. For the record the Tools>Javacript console in chrome will get you to the debugger. If you go there before you change, it should have an error 'Uncaught ReferenceError: chann is not defined' – Cubed Eye Commented Sep 3, 2011 at 10:10
Add a comment  | 

1 Answer 1

Reset to default 15

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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论