Кнопка Twitter для обмена контентом со страницы

Question

Я делаю случайную машину цитирования и должен иметь возможность делиться цитатой с твиттером, у меня есть кнопка 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

Проблема с кодом, что код щебет виджеты уже конвертированы свой a тег в 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(); 

Answer 2

Вы можете создать свою собственную кнопку, а не использовать API JS а скорее ссылка намерения (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); 
 
});