我在應用程序的初始化開始鳴叫按鈕，用戶交互後的當前窗口的位置使用HTML5 pushState的更新，但Twitter的按鈕還是從共享時，它被初始化之前的URL。如何使用動態內容更新Twitter分享按鈕URL？

如何更新Twitter使用的網址是什麼？

2012-02-09 cjroebuck

我試圖完成基本相同的事情。我嘗試更新'data-url'屬性：'$（'。twitter-share-button'）。attr（「data-url」，「http：// mynewlink」）;'但Twitter的JavaScript已經運行，這是行不通的。幫幫我！ – tig 2012-03-21 22:54:51

我想通了這一點。以下是如何完成這項工作。

的總體思路是：

在HTML設定<a>的class的Twitter分享按鈕比.twitter-share-button以外的東西。也給<a>一個style="display:none;"。
在您的HTML中，您希望顯示twitter共享按鈕的位置，創建一個帶有唯一id的<div>（或<span>）。
在你jQuery的，當你想設置的Twitter分享按鈕，您將數據：
- 「克隆（）從步驟＃1
- the hidden, mis-named,`標籤在此克隆，設置data-url等。 ..屬性，只要你願意
- 從克隆刪除style屬性（取消隱藏）
- 更改克隆的class到twitter-share-button
append()此克隆從步驟2到您的<div>。
使用$.getScript()加載和運行Twitter的Javascript。這將轉換您的克隆<a>爲與所有正確的GOOP。

這裏是我的HTML（翡翠）：

a.twitter-share-button-template(style="display:none;", href='https://twitter.com/share=', data-lang='en', 
     data-url='http://urlthatwillbe_dynamically_replaced', 
     data-via='ckindel', data-text='Check this out!', 
     data-counturl='http://counturlthatwillbe_dynamically_replaced') Share with Twitter 
    #twitter-share-button-div

然後在您的客戶端的.js：

// the twitter share button does not natively support being dynamically 
// updated after the page loads. We want to give it a unique (social_id) 
// link whenver this modal is shown. We engage in some jQuery fun here to 
// clone a 'hidden' twitter share button and then force the Twitter 
// Javascript to load. 

// remove any previous clone 
$('#twitter-share-button-div').empty() 

// create a clone of the twitter share button template 
var clone = $('.twitter-share-button-template').clone() 

// fix up our clone 
clone.removeAttr("style"); // unhide the clone 
clone.attr("data-url", someDynamicUrl); 
clone.attr("data-counturl", someDynamicCountUrl); 
clone.attr("class", "twitter-share-button"); 

// copy cloned button into div that we can clear later 
$('#twitter-share-button-div').append(clone); 

// reload twitter scripts to force them to run, converting a to iframe 
$.getScript("http://platform.twitter.com/widgets.js");

我得到了這個解決方案的主要線索，從這裏開始： http://tumblr.christophercamps.com/post/4072517874/dynamic-tweet-button-text-using-jquery

來源

2012-03-22 00:35:50 tig

謝謝你。我最終沒有使用twitters的widgets.js腳本和滾動我自己的風格嘰嘰喳喳錨標籤傳遞網址作爲參數鏈接的href。這樣我可以更好地控制它的風格和位置。 – cjroebuck 2012-03-23 01:30:28

這不再有效。 iframe src仍然引用onload url。除iframe的src外，其他所有屬性都會更改。不知道還有什麼要做。 – TYRONEMICHAEL 2013-02-07 13:28:43

我使用新的Twitter功能，重新加載共享網址獲得了成功。

function updateTwitterValues(share_url, title) { 
// clear out the <a> tag that's currently there...probably don't really need this since you're replacing whatever is in there already. 
    $(container_div_name).html('&nbsp;'); 
    $(container_div_name).html('<a href="https://twitter.com/share" class="twitter-share-button" data-url="' + share_url +'" data-size="large" data-text="' + title + '" data-count="none">Tweet</a>'); 
twttr.widgets.load(); 
}

我最初的HTML只是有共享鏈接的容器，這樣的：）

<div id="twitter-share-section"></div>

任何時候，我從一個Ajax調用我只是叫updateTwitterValues（新的數據和沿新傳信息。這裏更多的信息https://dev.twitter.com/discussions/5642

來源

2013-09-04 19:47:08 ramoneguru

這樣比較好！ – Shaheer 2013-09-20 15:47:03

`twttr.widgets.load();`

從Twitter's Dev Docs。

來源

2015-05-02 04:04:35

只是在回答這個信息包含在另一個答案後注意到。我沒有發現它，並通過Google搜索找到了答案。如果我錯過了其他答案中的信息，那麼其他人可能也會這樣 - 因此我將在此留下。 – 2015-05-02 04:07:48

<body> 
The tweet button: 
<span id='tweet-span'> 
    <a href="https://twitter.com/share" id='tweet' 
      class="twitter-share-button" 
      data-lang="en" 
      data-count='none'>Tweet</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
</span> 

<div> 
    <input type="button" onclick="tweetSetup('http://www.google.com','MyGoogle')" value="TestTwitter" /> 
</div> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
function tweetSetup(dynamicurl,dynamictext) { 
    $(".twitter-share-button").remove(); 
    var tweet = $('<a>') 
     .attr('href', "https://twitter.com/share") 
     .attr('id', "tweet") 
     .attr('class', "twitter-share-button") 
     .attr('data-lang', "en") 
     .attr('data-count', "none") 
     .text('Tweet'); 
    $("#tweet-span").prepend(tweet); 
    tweet.attr('data-text', dynamictext);//add dynamic title if need 
    tweet.attr('data-url', dynamicurl); 
    twttr.widgets.load(); 
} 
</script> 
</body>

來源

2018-01-16 11:10:49 Kiran

你能解釋你的代碼嗎？ https://stackoverflow.com/help/how-to-answer – TidyDev 2018-01-16 11:30:09

我已經更新了代碼。現在我們可以測試動態url如何綁定到twitter分享按鈕。默認情況下，Twitter分享按鈕將瀏覽器網址視爲共享，如果我們想共享一些動態網址（意味着我們可以添加一些參數到我們的網址），該功能就是用來實現這一點的。 – Kiran 2018-01-18 10:43:13

在上面的代碼中，當我們點擊'TestTwitter'按鈕時，Twitter分享網址變爲「http://www.google.com」。 – Kiran 2018-01-18 11:25:59

如何使用動態內容更新Twitter分享按鈕URL？

回答

twttr.widgets.load();

相關問題

`twttr.widgets.load();`