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

Javascript update twitter Button – Twitter API

I am working on creating a random quote generator. I have it mostly finished using quotesondesign.com’s api, but the final thing I need to do is make the twitter button update to the new Quote when I click the “New Quote” button. But it wont change and I’m not sure why. 

$( document ).ready(function() { 
  //get Quote And call to update twitter Button
  $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) { 
    $("#quote-content").html(a[0].content); 
    $("#quote-title").text(a[0].title);
    updateTweet(a);
  });

  //new Quote and update Twitter
  $('#newButton').on('click', function() {
    $.ajax( {
      url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=',
      success: function(a) {
        $('#quote-content').html(a[0].content);
        $('#quote-title').text(a[0].title);
        updateTweet(a);
      },
      cache: false
    });
  });

  //update twitter button function
  function updateTweet(a) {
    var thisQuote = a[0].content.replace(/</?[^>]+(>|$)/g, "");
    var thisQuoteTitle = a[0].title;
    $(".twitter-share-button").attr("href", "https://twitter.com/intent/tweet?text=" + thisQuote + "- " + thisQuoteTitle);
  }
});

Here is my codepen where I am working on this: https://codepen.io/Uberche/pen/RLbjbp

I realize it’s ugly and not properly set up, just trying to get the functionality working before doing altering the style and such. Any help would be appreciated. Sorry if this is some silly thing I forgot to include, still learning javascript and forget things a lot…

Tags:

2

Answers


  1. 0

    The twitter link does not have the class “.twitter-share-button”

    EDIT: More detail.

    In your Codepen, whatever that Twitter widget package you’re pulling in takes that link and replaces it with an iframe and several other nested elements. The actual anchor that the user ends up clicking is buried at the bottom , and it does not actually have the twitter-share-button class on it.

    Login or Signup to reply.
  2. 0

    You need to remove the iframe from the page, append a new <a> element with the values you want to use in your tweet, then call twttr.widgets.load().

    Make your code like below (tested and confirmed in your codepen):

    // New Quote and Update Twitter
$('#newButton').on('click', function() {
  $.ajax(
    'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=',
    {
      success: function(a) {
        $('#quote-title').text(a[0].title);
        $('#quote-content').html(a[0].content);
        updateTweet(a);
      },
      cache: false
    }
  );
});

//Twitter Button Update
function updateTweet(a) {
  var thisQuote = a[0].content.replace(/</?[^>]+(>|$)/g, "");
  var thisQuoteTitle = a[0].title;

  // Remove the iframe
  $('#socialMore iframe').remove();

  // Generate new markup
  $('<a>', {
    class: 'twitter-share-button',
    id: 'tweet_btn',
    href: 'http://twitter.com/intent/tweet',
    'data-text': thisQuote + "- " + thisQuoteTitle
  }).appendTo('#socialMore');

  // Reload the widget
  twttr.widgets.load();
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search