Twitter API Question posted in
The official Twitter API documentation can be found here.

Twitter button is creating multiple buttons – Twitter-api

I am using the Twitter createShareButton on my site (http://conn3cted.uk.tn/quote.html) but every time the ‘New Quote’ button is pressed it creates a new twitter button, leaving me with multiple buttons (e.g. if the ‘New Quote’ button is pressed 10 times, there will be 10 share buttons).

It was working fine a couple of days ago, so not sure what the hell has happened.

My JavaScript is below

// Random Quote Generator
$(document).ready(function() {
  // Set the default values for future AJAX requests
  $.ajaxSetup({
    // Prevent all future AJAX requests from being cached. 
    cache: false
  });
  // API URL
  var quoteURL = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
  // getQuote function, which accepts a data parameter. 
  var getQuote = function(data) {
    // Replace the html of the targeted element with the returned content field.
    $(".quoteContent").html(data[0].content);
    // Replace the html of the targeted element with the returned title field.
    $(".quoteTitle").html('Author: ' + data[0].title);
    newColor();

    twttr.ready(function() {
        // Use the pre-made createShareButton function
        twttr.widgets.createShareButton(
            // Do not share a URL
            " ",
            // Div where the share button should be inserted
            document.getElementById('tweetButton'),
            {
                // Define the tweet that will be used
                text: "'" + $(".quoteContent").text().replace(/(rn|n|r)/gm,"") + "'n" +
                $(".quoteTitle").text(),
                // Set the size of the Twitter share button
                size: "large",
            }
        );
    });
  };

  var newColor = function() {
    var color = Please.make_color();
    $("body, button, .btn").css("background-color",color);  
    $("p, blockquote").css("color",color);
  };

  /*  
  * On every page load get JSON data from the URL, defined in the
  * 'url' variable, and then run the getQuote function 
  */
  $.getJSON(quoteURL, getQuote);
 //newColor();

 /*  
  * When the button is clicked load get JSON data from the   * URL,defined in the 'url' variable, and then run the
  * getQuote function.
  */
  $(".regenButton").click(function() {
    $.getJSON(quoteURL, getQuote);
  });


});
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    For anybody that comes across this post; I was looking into this a bit more and discovered a way to create the Twitter Share button without using the Twitter Widget.

    First you need to create an A tag...

    <!-- 
- href will create a link to the Twitter web intent composer
- target (_blank) will open the link in a new window
--> 
<a class="tweetButton" href="https://twitter.com/intent/tweet?text=Initial Text" 
                target="_blank">
<!-- Create a button for the link to interact with -->
   <button class="btn">
      Tweet
   </button>
</a>

    And then setup jQuery to amend it for each new quote...

    /*
* Amend the "href" attribute of the element with a "tweetButton" class
* (the "a" tag) to take the twitterURL Global Variable, plus the parameter 
* "text=" (which specifies what the tweet will say) and assign the value of:
*
* - the element with a class of "quoteContent", without the HTML tags 
* (.text()), removing all line breaks (.replace(/(rn|n|r)/gm,"")), 
* trims all the white space (.trim())
*
* - adds a line break (n)
*
* - the element with a class of "quoteTitle", without the HTML tags
* (.text())
*
* Then URL encode the result (encodeURIComponent) to complete the amendment
*/
$(".tweetButton").attr("href", twitterURL + "text=" + encodeURIComponent("'" +
    $(".quoteContent").text().replace(/(rn|n|r)/gm,"").trim() +
    "'n" + $(".quoteTitle").text()));

  2. 0

    Your twitter share button code is inside the getQuote function – so each time .regenButton is clicked, getQuote is called, giving you another button.

    Login or Signup to reply.
  3. 0

    It’s because you create the twitter button in your $.getJSON success callback. So everytime a quote is loaded, a twitter button is created.

    The best solution would be to create the button once, and update the share text everytime a quote is loaded. Which I can’t find in the docs. So my best guess is to delete the previously one first:

    var getQuote = function(data) {
  // Replace the html of the targeted element with the returned content field.
  $(".quoteContent").html(data[0].content);
  // Replace the html of the targeted element with the returned title field.
  $(".quoteTitle").html('Author: ' + data[0].title);
  newColor();

  // remove previous button
  $('.twitter-share-button').remove();

  // and create a new one
  twttr.ready(function() {
      // Use the pre-made createShareButton function
      twttr.widgets.createShareButton(
          // Do not share a URL
          " ",
          // Div where the share button should be inserted
          document.getElementById('tweetButton'),
          {
              // Define the tweet that will be used
              text: "'" + $(".quoteContent").text().replace(/(rn|n|r)/gm,"") + "'n" +
              $(".quoteTitle").text(),
              // Set the size of the Twitter share button
              size: "large",
          }
      );
  });
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search