私のアプリの開始時にツイートボタンを初期化します。ユーザー操作後、現在のウィンドウの位置はHTML5 pushStateを使用して更新されますが、Twitterボタンはまだ初期化時の以前のURLを共有しています。Twitterの共有ボタンのURLを動的コンテンツで更新するにはどうすればよいですか？

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

出典

2012-02-09 cjroebuck

私は基本的に同じことを達成しようとしています。 'data-url'属性を動的に更新しようとしました：' $（ '。twitter-share-button'）。attr（ "data-url"、 "http：// mynewlink"）; 'しかし、Twitterのjavascriptはすでに実行されており、これは機能しません。助けて！ – tig

私はこれを理解しました。この作業を行う方法は次のとおりです。

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

が.twitter-share-button以外のものにするためにTwitterの共有ボタンのためにあなたの<a>のclassを設定します。また、<a>にはstyle="display:none;"を付けます。
Twitterの共有ボタンを表示するHTMLで、idという固有の<div>（または<span>）を作成します。
- 「クローン（）このクローンでは、ステップ＃1
- からthe hidden, mis-named, `タグ、data-urlなどを設定します。あなたは意志Twitterの共有ボタンのデータを設定したい場合にお使いのjQueryで
- 、あなたは
- が
- 変更クローンのclassに（それを再表示）クローンからstyle属性を削除したいと..属性twitter-share-button
append()このクローンをステップ2の<div>にコピーします。

$.getScript()を使用して、TwitterのJavaScriptを読み込んで実行します。これにより、クローンされた<a>がすべて正しいgoopでに変換されます。あなたのクライアント側の.jsで次に

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

：

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

は（ジェイドで）私のHTMLです

出典

2012-03-22 00:35:50 tig

ありがとうございます。私はtwitters widgets.jsスクリプトを使用せず、リンクのhrefにパラメータとしてurlを渡す私自身のスタイル付きtwitterアンカータグを巻きつけました。このようにして、私はそのスタイルと位置づけをより良くコントロールすることができます。 – cjroebuck

これはもう動作しません。 iframe srcはまだonload urlを参照しています。他のすべての属性は、iframeのsrcを除いて変更されます。他に何をすべきかわからない。 – TYRONEMICHAEL

私は共有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>

私はちょうど（updateTwitterValuesを呼び出し、AJAX呼び出しから新しいデータを取得し、任意の時間）を、新たなに沿って通過情報ここhttps://dev.twitter.com/discussions/5642

出典

2013-09-04 19:47:08 ramoneguru

これは良いです！ – Shaheer

`twttr.widgets.load();`

Twitter's Dev Docsから詳細情報。

出典

2015-05-02 04:04:35

この情報は別の回答に含まれていることに気がついただけです。私はそれを自分で見つけることはできませんでしたし、Google検索で回答を見つけました。もし私が他の答えの情報を見逃してしまったら、他の人もそうかもしれません。 –

<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-16 11:10:49 Kiran

あなたのコードを説明できますか？ – TidyDev

私はコードを更新しました。動的URLがtwitter共有ボタンにどのようにバインドできるかをテストできます。デフォルトでは、Twitterの共有ボタンはブラウザURLを共有として扱いますが、動的URLをいくつか共有したい場合（このURLにいくつかのパラメータを追加することができます）、この関数を使用します。 – Kiran

上記のコードで、 'TestTwitter'ボタンをクリックするとtwitterの共有URLが "http://www.google.com"に変更されます。 – Kiran

Twitterの共有ボタンのURLを動的コンテンツで更新するにはどうすればよいですか？

答えて

twttr.widgets.load();

関連する問題

`twttr.widgets.load();`