logo标签列表

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

javascriptjqueryurltwitterpushstate
5

我在我的应用程序开始时初始化了推文按钮，在用户交互后，使用HTML5 pushState更新当前窗口的位置，但Twitter按钮仍然分享自上次初始化时的先前URL。

我该如何更新Twitter使用的URL？

我试图实现基本相同的事情。 我尝试使用以下代码动态更新 data-url 属性：$('.twitter-share-button').attr("data-url", "http://mynewlink"); 但 Twitter 的 JavaScript 已经运行，这不起作用。 求助！ - tig
4个回答
15

我使用了Twitter的新功能，成功地重新加载了分享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('&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。
13

我解决了这个问题。以下是使其正常工作的方法：

总体思路是：

  1. 在 HTML 中，将 Twitter 分享按钮的 class 设置为除 .twitter-share-button 以外的其他值。同时，给 <a> 添加一个样式 style="display:none;"。
  2. 在你想要出现 Twitter 分享按钮的地方，在 HTML 中创建一个带有唯一 id 的 <div>（或者 <span>）。
  3. 在 jQuery 中，当你想要设置 Twitter 分享按钮的数据时，你需要：
    • 从步骤＃1中隐藏并命名错误的标签中`clone()`
    • 在此克隆上，根据您的需求设置 data-url 等属性
    • 删除克隆的 style 属性（取消隐藏）
    • 将克隆的 class 更改为 twitter-share-button
  4. append() 此克隆到步骤 2 中的 <div> 中。
  5. 使用 $.getScript() 加载和运行 Twitter 的 JavaScript。这将把你克隆的 <a> 转换为带有所有正确设置的 <iframe>。

以下是我的 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

谢谢。最终我没有使用Twitter的widgets.js脚本，而是自己编写了样式化的Twitter锚点标签，并将URL作为参数传递给链接的href属性。这样我可以更好地控制它的样式和位置。 - cjroebuck
2
这个不再起作用了。iframe的src仍然引用onload url。除了iframe的src之外，所有其他属性都会更改。不确定还能做什么。 - TYRONEMICHAEL
4
回答后注意到这些信息已经包含在另一个答案中。我自己没有发现它，是通过谷歌搜索找到的答案。如果我错过了其他答案中的信息，那么其他人也可能会错过 - 因此我将把它留在这里。 - Fred Gandt
1
<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>
1
你能解释一下你的代码吗？https://stackoverflow.com/help/how-to-answer - TidyDev
我已经更新了代码。现在我们可以测试动态URL如何绑定到Twitter分享按钮。默认情况下，Twitter分享按钮会将浏览器URL作为共享内容，如果我们想要分享一些动态URL（也就是我们可以向URL添加一些参数），则可以使用此函数。 - Kiran
在上述代码中，当我们点击“TestTwitter”按钮时，Twitter分享的URL会更改为“http://www.google.com”。 - Kiran
你的答案很好，也能够运行，但是一开始很难理解你的意图。 - Leandro Bardelli
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接