Я инициализирую кнопку твитта в начале своего приложения, после взаимодействия с пользователем местоположение текущего окна обновляется с помощью HTML5 pushState, но кнопка Twitter по-прежнему использует предыдущий URL-адрес с момента его инициализации.Как обновить URL-адрес кнопки щебета с динамическим контентом?
Как обновить URL-адрес, который использует твиттер?
Я понял это. Вот как это сделать.
Основная идея заключается в:
class вашего <a> для кнопки TwitterОпубликовать в чем-то другом, чем .twitter-share-button. Также дайте <a> a style="display:none;".<div> (или <span>) с уникальным id.the hidden, mis-named,` тег из шага # 1data-url и т.д. .. атрибуты, как вы хотитеstyle из клона (отобразите его)class из клона twitter-share-buttonappend() этот клон на ваш <div> с шага 2.$.getScript() для загрузки и запуска Javascript на Twitter. Это преобразует ваш клонированный <a> в со всеми правильными ошибками.Вот мой 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
Спасибо за это. Я закончил тем, что не использовал скрипты widgets.js twitters и перевернул собственный тег привязки твиттера, передающий url в качестве параметра href ссылки. Таким образом, я лучше контролирую, как его стиль и расположение. – cjroebuck
Это больше не работает. В iframe src по-прежнему имеется ссылка на URL-адрес загрузки. Все остальные атрибуты изменяются за исключением src iframe. Не уверен, что еще делать. – TYRONEMICHAEL
У меня был успех с использованием новой функции 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(' ');
$(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
это лучше! – Shaheer
twttr.widgets.load();Заметил сразу после ответа, что эта информация содержится в другом ответе. Я сам этого не заметил, и нашел ответ через 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>
Не могли бы вы объяснить свой код? https://stackoverflow.com/help/how-to-answer – TidyDev
Я обновил код. теперь мы можем проверить, как динамический url может связываться с кнопкой щебета. По умолчанию кнопка Twitter share использует URL-адрес браузера как общий, если мы хотим поделиться некоторым динамическим url (мы можем добавить некоторые параметры к нашему URL-адресу), для чего эта функция используется. – Kiran
В приведенном выше коде, когда мы нажимаем кнопку «TestTwitter», щебетайте URL-адрес щебета на странице «http://www.google.com». – Kiran
Я пытаюсь выполнить в основном то же самое. Я попытался обновить атрибут 'data-url' динамически с помощью этого:' $ ('. Twitter-share-button'). Attr ("data-url", "http: // mynewlink") ;, но jitter-браузер twitter уже выполняется, и это не работает. Помогите! – tig