当前位置：文江博客话题详情

如何使用动态内容更新 Twitter 分享按钮 URL？

发布于 2025-01-04 06:21:57 字数 123 浏览 0 评论 0原文

我在应用程序开始时初始化 tweet 按钮，在用户交互后，使用 HTML5 PushState 更新当前窗口的位置，但 Twitter 按钮仍然共享初始化时的先前 URL。

如何更新 Twitter 使用的 URL？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

颜 2025-01-11 06:21:58

<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>

<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>

回复收藏 0 原文

离鸿 2025-01-11 06:21:57

我成功地使用了重新加载共享 URL 的新 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(' '); 
  $(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

I had success using the new Twitter feature that reloads the share url.

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();
}

My initial HTML just has a container for the share link, like this:

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

Any time I get new data from an ajax call I just call updateTwitterValues() and pass along the new info. More info here https://dev.twitter.com/discussions/5642

回复收藏 0 原文

￠蛋碎的人ぎ生 2025-01-11 06:21:57

我明白了这一点。以下是如何进行这项工作。

总体思路是：

在 HTML 中，将 twitter 分享按钮的的 class 设置为 .twitter-share-button 以外的内容。还要给一个 style="display:none;"。
在您希望显示 twitter 分享按钮的 HTML 中，创建一个具有唯一 id
（或）代码>.
在 jQuery 中，当您想要设置 twitter 共享按钮的数据时，您将：
- 'clone()第 1 步中隐藏的、命名错误的` 标记
- 在此克隆上，根据需要设置 data-url 等...属性
- 从克隆中删除 style 属性（取消隐藏）
- 将克隆的 class 更改为 twitter-share-button
append() 将此克隆添加到您的步骤 2 中的
。
使用 $.getScript() 加载并运行 Twitter 的 Javascript。这会将您克隆的转换为具有所有正确内容的。

这是我的 HTML（在 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 中：

// 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 figured this out. Here's how to make this work.

The general idea is:

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;".
In your HTML, where you want the twitter share button to appear, create a <div> (or <span>) with a unique id.
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
append() this clone to your <div> from step 2.
Use $.getScript() to load and run Twitter's Javascript. This will convert your cloned <a> into an <iframe> with all the right goop.

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

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");

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

回复收藏 0 原文