CODEWITHSUNDEEP
javascriptevents
Jake
Jake

Reputation: 254

twitter share button quirk

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?

Upvotes: 0

Views: 39

Answers (1)

Robert Fines
Robert Fines

Reputation: 720

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).

Upvotes: 1

Related Questions