CODEWITHSUNDEEP
javascriptjquerytwitter
user5372593
user5372593

Reputation:

Twitter button to share content from page

I'm doing a random quote machine and need to be able to share the quote to twitter, I have the twitter button set up but can't seem to change the data-text value to have the quote on the pop-up window. I've tried adding twttr.widgets.load() but it hasn't helped, any other suggestions?

HTML-

<div class="container">
  <div class="row">
    <div class="col-xs-4 centered">
      <button id="newQuote" class="btn btn-default">Click here for new quote</button>
    </div>
  <div class="row">
    <div id="quote" class="col-xs-12">

    </div> 
  </div>
  <div class="row">
    <div id="author" class="col-xs-4">

    </div>
  </div>
  <div class="row">
    <div id= "twitter-button" class="col-xs-12">
      <a class="twitter-share-button">
      Tweet
      </a>
      <!--javascript for twitter button-->
      <script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))returnt;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
    </div>
  </div>
</div>

Javascript-

var quotes = [
  ['"She got a big booty so I call her big booty"', '2Chainz'], 
  ['"fjdkaljfdksla"', 'bhd'], 
  ['"fdhafjdahaa"', 'fndun'],
  ['"fjdkfjsdkfjdsiojdsvndio\"', 'fvdsw']
];

var quoteText = "";

$("#newQuote").click(function() {
  var randomNum = Math.floor(Math.random() * quotes.length);
  quoteText = quotes[randomNum][0] + " -" + quotes[randomNum][1] 
  $("#quote").empty();
  $("#author").empty();
  $("#quote").append(quotes[randomNum][0]);
  $("#author").append(" -"+quotes[randomNum][1]);
  createButton();
});

var createButton = function () {
  var twtr = $(".twitter-share-button");  
  twtr.attr("href", "https://twitter.com/share");
  twtr.removeAttr("data-text");
  twtr.attr("data-text", quoteText);
  twttr.widgets.load();
};

and a link to the codepen-http://codepen.io/Davez01d/pen/Ywaydd?editors=1010

Upvotes: 2

Views: 4009

Answers (2)

alexoakley1
alexoakley1

Reputation: 565

The problem with your code is that the twitter widgets code has already converted your a tag into an iframe tag when you try to add the data-text attribute. You need to recreate your initial html structure that you start with before calling twttr.widgets.load().

Replace the contents of your createButton function with the following:

$('iframe.twitter-share-button,a.twitter-share-button').remove();
var twtr = '<a class="twitter-share-button"></a>';
$('#twitter-button').append(twtr);
$('.twitter-share-button').attr('href', 'https://twitter.com/share')
  .attr('data-text', quoteText);
twttr.widgets.load();

Upvotes: 1

Glenn
Glenn

Reputation: 1102

You could create your own button and not use the JS api but rather an intent link (https://dev.twitter.com/web/tweet-button/web-intent). Then you'd only have to worry about plain HTML.

Or, instead of worrying about updating the link, just generate it for each random quote. Here's a CodePen example (with some refactoring): http://codepen.io/anon/pen/adYBVO

var quotes = [
  { text: "She got a big booty so I call her big booty", author: '2Chainz'}, 
  { text: "fjdkaljfdksla", author: 'bhd'}, 
  { text: "fdhafjdahaa", author: 'fndun'},
  { text: "fjdkfjsdkfjdsiojdsvndio", author: 'fvdsw'}
]


// Returns a random quote
function getRandomQuote() {
  var randomNumber = Math.floor(Math.random() * quotes.length);
  
  return quotes[randomNumber]
}

// Create tweet button from text
function createTweetButton( text ) {
  twttr.widgets.createShareButton(
    'https://twitter.com/share', // url : string 
    document.getElementById('twitter-button'), // targetEl : DOM node
    {
      text: text
    }  // options : object
  );
};
    
// Generates tweet text and creates button
function createTweetButtonFromQuote( quote ) {
  var tweetText = (quote.text+ " -" + quote.author);
  
  createTweetButton( tweetText )
};


// On clicking new quote button, get a random quote, then generate a tweet button to share the quote.
$("#newQuote").click(function() {
  var quote = getRandomQuote();
  
  $("#quote").html(quote.text);
  $("#author").html(" -" + quote.author);
  $("#twitter-button").empty();
  
  createTweetButtonFromQuote( quote );
});

Upvotes: 1

Related Questions