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

您可以创建自己的按钮，而不是使用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 );
});

Answer 2

您的代码存在的问题是，当您尝试添加a属性时，Twitter小部件代码已将iframe代码转换为data-text代码。在调用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();

Twitter按钮，用于分享来自页面

2 个答案: