Inicjuję przycisk tweet na początku mojej aplikacji, po interakcji użytkownika aktualna lokalizacja okna jest aktualizowana za pomocą pushState HTML5, ale przycisk Twittera nadal udostępnia poprzedni adres URL od momentu zainicjowania.Jak zaktualizować URL przycisku udostępniania współdzielenia Twittera za pomocą dynamicznej zawartości?
Jak zaktualizować adres URL używany przez twitter?
Wymyśliłem to. Oto jak to zrobić.
Ogólna idea jest:
class swojego <a> dla przycisku Udostępnij Twitter być coś innego niż .twitter-share-button. Podaj także <a> a style="display:none;".<div> (lub <span>) z unikalnym id.the hidden, mis-named,` tag od kroku # 1data-url etc. .. atrybuty jak chceszstyle z klonu (odkryć go)class klonu do twitter-share-buttonappend() ten klon do swojego <div> z kroku 2.$.getScript(), aby załadować i uruchomić skrypt JavaScript na Twitterze. Spowoduje to konwersję sklonowanego <a> do ze wszystkimi prawymi goop.Oto mój HTML (w 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
Następnie w swoim js po stronie klienta:
// 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");
mam główne wskazówki dotyczące tego rozwiązania stąd: http://tumblr.christophercamps.com/post/4072517874/dynamic-tweet-button-text-using-jquery
Dzięki za to. Skończyło się na tym, że nie korzystałem ze skryptu twittera widgets.js i przetaczałem własny tag zakotwiczenia w stylu twitter, przekazując adres URL jako parametr do href łącza. W ten sposób mam lepszą kontrolę nad tym, jak jest stylizowany i umiejscowiony. – cjroebuck
To już nie działa. Element iframe src nadal ma odwołanie do adresu URL pobierania. Wszystkie pozostałe atrybuty zmieniają się, z wyjątkiem src iframe. Nie wiem, co jeszcze można zrobić. – TYRONEMICHAEL
Udało mi się użyć nowej funkcji na Twitterze, która przeładowuje adres URL udostępnienia.
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();
}
Mój początkowy HTML ma tylko pojemnik na link zakładowego, na przykład:
<div id="twitter-share-section"></div>
Za każdym razem dostaję nowe dane z wywołania AJAX I wystarczy zadzwonić updateTwitterValues () i przechodzą wzdłuż nowa info. Więcej informacji tutaj https://dev.twitter.com/discussions/5642
to jest lepsze! – Shaheer
twttr.widgets.load();Po stwierdzeniu, że te informacje znajdują się w innej odpowiedzi, zauważono. Sam tego nie zauważyłem i znalazłem odpowiedź za pomocą wyszukiwarki Google. Jeśli pominęłabym informacje w drugiej odpowiedzi, inni też mogą - więc zostawię to tutaj. –
<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>
Czy możesz wyjaśnić swój kod? https://stackoverflow.com/help/how-to-answer – TidyDev
Zaktualizowałem kod. teraz możemy przetestować, jak dynamiczny URL może wiązać się z przyciskiem udostępniania na Twitterze. Domyślnie przycisk udostępniania na Twitterze pobiera adres URL przeglądarki jako udostępniony, jeśli chcemy udostępnić dynamiczny URL (oznacza to, że możemy dodać kilka parametrów do naszego adresu URL), funkcja ta służy do tego. – Kiran
W powyższym kodzie po kliknięciu przycisku "TestTwitter" przycisk Udostępnij adres URL zmiany współdzielenia na "http://www.google.com". – Kiran
Próbuję osiągnąć w zasadzie to samo. Próbowałem dynamicznie aktualizować atrybut 'data-url' za pomocą następującego:' $ ('. Twitter-share-button') .attr ("adres danych", "http: // mynewlink"); 'ale program Twitter javascript ma już działa i to nie działa. Wsparcie! – tig