twitter - set Tweet button 'data-text' contents dynamically with javascript, or..?

Here is functioning code on a form that displays a Tweet button -- the button's on a form that displays several images -- when the user clicks one of the images, it bees the 'selected' image and the Tweet button is supposed to tweet the selected image's name and url:

      <a id="tweetBtnId" href="" class="twitter-share-button" 
         data-text="Check me out on OurWebSite!"
         data-url=http://$ourSiteURL
         data-via=http://$ourSiteURL data-size="medium" data-count="none">Tweet</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; 
            if(!d.getElementById(id)){js=d.createElement(s); js.id=id; 
              js.src="//platform.twitter/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}}
                (document,"script", "twitter-wjs");</script>

I have an 'onclick()' handler for the div that displays the image. When the user clicks one of the images, its div's onclick() handler is called and sets that image to be the 'currentlySelectedImage' on the page -- and the onclick() handler then needs to update the Tweet button's 'data-text' attribute with the name of the just-selected image:

          // This is part of the code of the 'onclick()' handler for
          // the image being selected. 
         <script> 
         function handleImageOnClick()
         {
           var myDynamicTweetText = "name of currently-selected image goes here";
           var elem = document.getElementById("tweetBtnId");
           alert("The elem is: " + elem);  // elem IS NULL !!  Dagnabbit.

           // this fails because 'elem' is null
           elem.setAttribute("data-text", myDynamicTweetText);

           // other onclick() code not shown for brevity......
         }
         </script>

I need to dynamically change the 'data-text' attribute's value in the Tweet button to be the name of the selected image. I added the javascript code above which fails-- the 'elem' obtained from the code here:

    var elem = document.getElementById("tweetBtnId");

is null (I think) because of this line in the Twitter tweet button code above:

   if(!d.getElementById(id)){js=d.createElement(s); js.id=id;

I'm not sure but it looks like the Twitter Tweet button default script overwrites any attempt to add an 'id' attribute to the Tweet button.

You will see that I added the id="tweetBtnId" to the Tweet button above so I could get access to the Tweet button in my image-selection onclick() handler above, then set the 'data-text' to the name of the just-selected image.

I just doubt that Twitter's design goal for the Tweet button was "we're gonna dumb this sucker WAY down, we'll only let these animals choose ONE data-text value - every Tweet button has to have one hard-coded, "Once-on-the-page" data-text attribute - joke's on them if they try to dynamically change the Tweet button's data-text attribute."

I need to get this to work -- any ideas?

      <a id="tweetBtnId" href="https://twitter./share" class="twitter-share-button" 
         data-text="Check me out on OurWebSite!"
         data-url=http://$ourSiteURL
         data-via=http://$ourSiteURL data-size="medium" data-count="none">Tweet</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; 
            if(!d.getElementById(id)){js=d.createElement(s); js.id=id; 
              js.src="//platform.twitter./widgets.js"; fjs.parentNode.insertBefore(js,fjs);}}
                (document,"script", "twitter-wjs");</script>

          // This is part of the code of the 'onclick()' handler for
          // the image being selected. 
         <script> 
         function handleImageOnClick()
         {
           var myDynamicTweetText = "name of currently-selected image goes here";
           var elem = document.getElementById("tweetBtnId");
           alert("The elem is: " + elem);  // elem IS NULL !!  Dagnabbit.

           // this fails because 'elem' is null
           elem.setAttribute("data-text", myDynamicTweetText);

           // other onclick() code not shown for brevity......
         }
         </script>

    var elem = document.getElementById("tweetBtnId");

is null (I think) because of this line in the Twitter tweet button code above:

   if(!d.getElementById(id)){js=d.createElement(s); js.id=id;

I'm not sure but it looks like the Twitter Tweet button default script overwrites any attempt to add an 'id' attribute to the Tweet button.

I need to get this to work -- any ideas?

Share Improve this question edited Mar 13, 2012 at 0:51 asked Mar 13, 2012 at 0:36 wantTheBest 1,7204 gold badges46 silver badges71 bronze badges

Just confirmed with Firebug -- the id of the Tweet button is 'b', not even a number. The twitter script is not letting you getElementById() very easily then. – wantTheBest Commented Mar 13, 2012 at 1:04
Wow I can hear the snail outside my window snoring. Quiet in here today. One SUPER-kludgy workaround would be to create a form with one hidden field and do a form.submit() on it inside my onclick() handler that's called when the user clicks an image. Then I could set a PHP variable with the name of the 'selected image' and redirect back to the original page, and use the PHP variable for the 'data-text' part of the Tweet button, so when the user tweets the PHP variable has the selected image's name assigned to 'data-text' in the tweet button. A server round-trip for a tweet! DAGNABBIT. – wantTheBest Commented Mar 13, 2012 at 1:31
The reason nobody is answering this question is because it is so long and full of code, that is likely to be unrelated to the actual core problem. – Domenic Commented Mar 13, 2012 at 2:17
I have this same problem – Alex Borsody Commented Oct 11, 2012 at 4:08
@alex_b What problem are you experiencing? It seems to work for me? jsbin./ivevif/2 (verified with firebug...) – Stobor Commented Oct 18, 2012 at 1:06

| Show 1 more ment

4 Answers 4

Sorted by: Reset to default 3

Just put it in a container with a known ID and traverse the document with it:

<div id="someIDiKnow">
    <a id="tweetBtnId"...>...</a>
</div>

$("#someIDiKnow a").attr("data-text", "Replacement Text!");

Looks like it's going to be the kludgy hidden form/php variable approach for now -- I'll post back if I find a better work-around.

EDIT: the hidden-form/PHP variable solution has beaten the roadblock put up by Twitter's Tweet button -- I can now successfully, dynamically change the Tweet button text at will, anytime based on the user's client-side input. Per Domenic's astute observation that the question above is too long and has code in it, I'll skip posting the answer here, and I apologize for the length above.

You could use JQuery to update the attribute data-text by adding an onclick action on the image. If you wanted to include the text inside the actual image tag by adding your own attribute to the tag, that could be an easy work around to assembling the tweet text.

For example:

function updateTweetBtn(obj) {
   $('#someIDiKnow a').attr('data-text', $(this).attr('tweet'));
}

<img src="/images/myimage.jpg" tweet="This is what I want to tweet" onclick="updateTweetBtn(this);" />
<img src="/images/myimage2.jpg" tweet="This is some other text I want to tweet" onclick="updateTweetBtn(this);" />

using in html

<script type="text/javascript" src="http://platform.twitter./widgets.js"></script>
<a href="http://twitter./share" class="twitter-share-button" data-text="old text">Tweet</a>

I managed to change the 'data-text' with javascript

var a = "new text";
document.getElementsByClassName('twitter-share-button')[0].setAttribute("data-text", a);

also worked with document.getElementById('twitter') if you add id='twitter' to <a>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

twitter - set Tweet button 'data-text' contents dynamically with javascript, or..? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)