Tôi khởi tạo nút tweet ở đầu ứng dụng, sau khi tương tác người dùng, vị trí cửa sổ hiện tại được cập nhật bằng HTML5 pushState, nhưng nút twitter vẫn đang chia sẻ URL trước đó khi nó được khởi tạo.Cách cập nhật URL nút chia sẻ twitter với nội dung động?
Làm cách nào để cập nhật URL mà twitter sử dụng?
Tôi đã tìm ra điều này. Đây là cách để thực hiện công việc này.
Ý tưởng chung là:
class của <a> của bạn cho các nút chia sẻ twitter là một cái gì đó khác hơn .twitter-share-button. Đồng thời, hãy cung cấp <a> một style="display:none;".<div> (hoặc <span>) với số id duy nhất.the hidden, mis-named,' thẻ từ bướC# 1data-url .. các thuộc tính như bạn muốnstyle từ clone (thôi ẩn nó)class của clone để twitter-share-buttonappend() bản sao này vào số <div> của bạn từ bước 2.$.getScript() để tải và chạy Javascript của Twitter. Điều này sẽ chuyển đổi nhân bản của bạn <a> thành một với tất cả các goop đúng.Dưới đây là HTML của tôi (trong Jade):
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
Sau đó, trong .js client-side của bạn:
// 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");
tôi có những manh mối chính cho giải pháp này từ đây: http://tumblr.christophercamps.com/post/4072517874/dynamic-tweet-button-text-using-jquery
Cảm ơn vì điều này. Tôi đã kết thúc không sử dụng twitters widgets.js kịch bản và cán của riêng tôi theo kiểu thẻ neo twitter đi qua các url như một tham số cho href của liên kết. Bằng cách này, tôi có thể kiểm soát tốt hơn kiểu dáng và vị trí của nó. – cjroebuck
Thao tác này không hoạt động nữa. Khung nội tuyến src vẫn có tham chiếu đến url tải lên. Tất cả các thuộc tính khác thay đổi ngoại trừ src của khung nội tuyến. Không chắc còn gì để làm. – TYRONEMICHAEL
Tôi đã thành công khi sử dụng tính năng Twitter mới tải lại url chia sẻ.
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(' ');
$(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 ban đầu của tôi chỉ có một container cho liên kết phần, như thế này:
<div id="twitter-share-section"></div>
Bất cứ lúc nào tôi nhận được dữ liệu mới từ một cuộc gọi ajax tôi chỉ cần gọi updateTwitterValues () và vượt qua cùng mới thông tin. Xem thêm thông tin ở đây https://dev.twitter.com/discussions/5642
điều này là tốt hơn! – Shaheer
twttr.widgets.load();Nhận thấy ngay sau khi trả lời rằng thông tin này được chứa trong câu trả lời khác. Tôi đã không phát hiện ra bản thân mình và tìm thấy câu trả lời qua Tìm kiếm của Google. Nếu tôi bỏ lỡ thông tin trong câu trả lời khác, thì những người khác cũng có thể - vì vậy tôi sẽ để lại điều này ở đây. –
<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>
Bạn có thể giải thích mã của mình không? https://stackoverflow.com/help/how-to-answer – TidyDev
Tôi đã cập nhật mã. bây giờ chúng ta có thể kiểm tra cách url động có thể liên kết với nút chia sẻ twitter. Theo mặc định nút chia sẻ Twitter có url trình duyệt như được chia sẻ, nếu chúng ta muốn chia sẻ một số url động (có nghĩa là chúng ta có thể thêm một số tham số url của chúng tôi) chức năng này sử dụng cho điều đó. – Kiran
Trong đoạn mã trên, khi chúng tôi nhấp vào nút 'TestTwitter' thay đổi url chia sẻ thành "http://www.google.com". – Kiran
Tôi đang cố gắng hoàn thành về cơ bản cùng một điều. Tôi đã thử cập nhật thuộc tính 'data-url' động với điều này:' $ ('. Twitter-share-button'). Attr ("data-url", "http: // mynewlink"); 'nhưng javascript twitter có đã chạy và điều này không hoạt động. Cứu giúp! – tig