用于分享页面内容的 Twitter 按钮

Question

我正在做一个随机报价机，需要能够将报价分享到 twitter，我设置了 twitter 按钮，但似乎无法更改数据文本值以在弹出窗口中显示报价-上窗口。我尝试添加 twttr.widgets.load() 但没有帮助，还有其他建议吗？

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();
}; 

以及codepen的链接-http://codepen.io/Davez01d/pen/Ywaydd?editors=1010

Answer 1

您的代码的问题在于，当您尝试添加data-text 属性时，twitter 小部件代码已经将您的a 标记转换为iframe 标记。在调用 twttr.widgets.load() 之前，您需要重新创建初始 html 结构。

将 createButton 函数的内容替换为以下内容：

$('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();

Answer 2

您可以创建自己的按钮，而不是使用 JS api，而是使用意图链接 (https://dev.twitter.com/web/tweet-button/web-intent)。那么您只需要担心纯 HTML。

或者，不用担心更新链接，只需为每个随机引用生成它。这是一个 CodePen 示例（进行了一些重构）：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 );
});