twitter share button quirk

Question

Link to my in codepen: codepen.io/neel111/pen/dRBQNY?editors=1010

When the tweet button is clicked then it redirect to the page to tweet in the twitter, with a preselected text to tweet.
The JavaScript code used there is given below just for a quick look:

    //-------------quotes--------
    (function(){

      window.addEventListener("load", makeRequest);

      function makeRequest(mk){  
        document.getElementsByClassName("buttonQ")[0].addEventListener("click", makeRequest);
        function reqListener(rl) {
          if(httpR.readyState === XMLHttpRequest.DONE) {
            var quote;
            if(httpR.status === 200) {
                quote = JSON.parse(httpR.responseText);
              document.getElementsByClassName("quote")[0].innerHTML = quote[0].body;
            } else {
              alert("There was a problem with the request!")
            }
          }
        }    
        var httpR;
        httpR = new XMLHttpRequest();
        httpR.onreadystatechange = reqListener
        httpR.open("GET", "https://quote-api.glitch.me/pull/1", true);
        httpR.send();
      }

      //----------------------tweet-------------------

     window.addEventListener("load", function() {
        document.getElementsByClassName("buttonT")[0].addEventListener("click", tweetEvent);
     })
      function tweetEvent(twt) {
        //twt.preventDefault();
        document.getElementsByClassName("quote")[0].normalize();
        var tweetBody = document.getElementsByClassName("quote")[0].childNodes[0].nodeValue;
        var URLBase = document.getElementsByClassName("twitter-share-button")[0].getAttribute("href");
        var URLExtended = URLBase + "?hashtags=quotes&text=" + encodeURIComponent(tweetBody);
        document.getElementsByClassName("twitter-share-button")[0].setAttribute("href", URLExtended);
      }

    })();

Quirk:
when the tweet button is clicked for the first time after the page is loaded/refreshed then the preselected text in the redirected page to tweet is
Preselected_text(quote)_from_the_main_page #tweet

But after the first click, everytime the tweet button is click the preselected text in the redirected page to tweet is
Preselected_text(quote)_from_the_main_page?hashtags=quotes #quotes

Where i am doing wrong?

score 1 · Answer 1 · answered Jul 21 '17 at 12:54

1

So I think the problem is that you are modifying the href of the anchor tag and inserting the modified href into the dom. What I would do instead is to get rid of the in the button and build the url like you are but instead of modifying something in the dom just call window.open(extendedUrl);

Something like this should get you started:

window.addEventListener("load", function() {
    document.getElementsByClassName("buttonT")[0].addEventListener("click", tweetEvent);
 })
  function tweetEvent(twt) {
    //twt.preventDefault();
    document.getElementsByClassName("quote")[0].normalize();
    var tweetBody = document.getElementsByClassName("quote")[0].childNodes[0].nodeValue;
    var url = "https://twitter.com/intent/tweet?hashtags=quote&text="+encodeURIComponent(tweetBody);
    return window.open(url);
  }

})

As you can see I have simplified the url building and then passed the resulting url to window.open which will open the url in a new window/tab (depending on user preference in their browser... find more on that here).

answered Jul 21 '17 at 12:54

Robert Fines

700
4
13

I get that. but If i had to approach in the only way i did then for some reason then how would i solve that. and if this code works which you shown then why not the one i used. logically both are the same and machine works with logics so i am too curious to know what actually happenning under the hood. please help fixing and figuring out the quirk in my approach – Jake Jul 21 '17 at 13:03
But what happens is that after the first tweet you dont reset the href to what it was before you modified it so the next time (unless you refresh the page which is inconvenient at best) you click the share you are appending more information to the end of an already modified url. My approach builds a fresh url every time the button is clicked. – Robert Fines Jul 21 '17 at 13:11
yeah i got that. but again the point is why only one extra text is seen `?hashtags=quotes&text=` in the preselected text. if i click the share button 10times then the text should be appened 10times, and not only `?hashtags=quotes&text=`, the whole preselected text should get multiplies corresponding to the times the button is clicked – Jake Jul 22 '17 at 09:30

twitter share button quirk

1 Answers1