5

アプリの開始時にツイート ボタンを初期化します。ユーザーの操作の後、現在のウィンドウの場所は HTML5 pushState を使用して更新されますが、Twitter ボタンは初期化されたときの以前の URL をまだ共有しています。

Twitter が使用する URL を更新するにはどうすればよいですか?

4

4 に答える 4

15

共有 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('&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-04T19:47:08.050 に答える
13

私はこれを理解しました。これを機能させる方法は次のとおりです。

一般的な考え方は次のとおりです。

  1. HTMLで、twitter 共有ボタンの を 以外に設定しclassます。また、aを与えます。<a>.twitter-share-button<a>style="display:none;"
  2. Twitter 共有ボタンを表示する HTML で、一意の を使用して<div>(または<span>) を作成しますid。
  3. jQuery で、Twitter 共有ボタンのデータを設定する場合は、次のようにします。
    • ステップ 1の 'clone() the hidden, mis-named,` タグ
    • このクローンで、必要に応じてdata-urletc... 属性を設定します
    • styleクローンからアトリビュートを削除します (再表示)
    • classクローンの をに変更しますtwitter-share-button
  4. append()このクローンを<div>ステップ 2 から作成します。
  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

于 2012-03-22T00:35:50.227 に答える
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>
于 2018-01-16T11:10:49.133 に答える