如何使用动态内容更新Twitter分享按钮URL？ [英] How to update the twitter share button URL with dynamic content?

问题描述

我在应用程序开始时初始化推文按钮，在用户交互之后，使用HTML5 pushState更新当前窗口的位置，但是twitter按钮仍然在初始化时共享以前的URL。

I initialize the tweet button at the beginning of my app, after user interaction the current window's location is updated using HTML5 pushState, but the twitter button is still sharing the previous URL from when it was initialized.

如何更新Twitter使用的URL？

How do I update the URL that twitter uses?

推荐答案

我想通了。以下是如何使这项工作。

I figured this out. Here's how to make this work.

一般的想法是：

1. In您的HTML将< a> 的类设置为Twitter分享按钮，而不是 .twitter股按钮。同时给< a> a style =display：none;。


2. 在HTML中，您希望显示Twitter分享按钮，请创建< div> （或< span> ）带有唯一的 id 。


3. 在你的jQuery中，当你想为twitter设置数据时分享按钮你将：
   
   
   
   
   • 'clone（）隐藏的，错误命名的，`标签来自步骤＃1
   
   
   • 在此克隆上，根据需要设置 data-url etc ...属性
   
   
   • 从克隆中删除样式属性（取消隐藏）
   
   
   • 更改 克隆到 twitter-share-button
   


1. In your HTML set the class of your <a> for the twitter share button to be something other than .twitter-share-button. Also give the <a> a style="display:none;".
2. In your HTML, where you want the twitter share button to appear, create a <div> (or <span>) with a unique id.
3. In your jQuery, when you want to set the data for the twitter share button you will:
   • 'clone()the hidden, mis-named,` tag from step #1
   • On this clone, set the data-url etc... attributes as you'd like
   • Remove the style attribute from the clone (unhide it)
   • Change the class of the clone to twitter-share-button

这是我的HTML（在Jade中）：

Here's my HTML (in 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

然后在你的客户端。 js：

Then in your client-side .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

I got the main clues for this solution from here: http://tumblr.christophercamps.com/post/4072517874/dynamic-tweet-button-text-using-jquery

这篇关于如何使用动态内容更新Twitter分享按钮URL？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！