Как обновить URL кнопки «Поделиться» в Твиттере динамическим контентом? - PullRequest
Новая
       16

Как обновить URL кнопки «Поделиться» в Твиттере динамическим контентом?

5 голосов
/ 09 февраля 2012

Я инициализирую кнопку твита в начале моего приложения, после взаимодействия с пользователем текущее местоположение окна обновляется с помощью HTML5 pushState, но кнопка твиттера все еще делит предыдущий URL с момента его инициализации.

Как обновить URL, который использует твиттер?

Ответы [ 4 ]

14 голосов
/ 04 сентября 2013

Я успешно использовал новую функцию 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 голосов
/ 22 марта 2012

Я понял это. Вот как это сделать.

Общая идея:

  1. В вашем HTML установите class вашего <a> для кнопки общего доступа Twitter, чтобы она отличалась от .twitter-share-button. Также дайте <a> a style="display:none;".
  2. В своем HTML, где вы хотите, чтобы появилась кнопка общего доступа Twitter, создайте <div> (или <span>) с уникальным id.
  3. В вашем jQuery, когда вы хотите установить данные для кнопки обмена Twitter, вы будете:
    • 'clone () the hidden, mis-named, `тег из шага # 1
    • Для этого клона установите атрибуты data-url и т. Д. ...
    • Удалить атрибут style из клона (показать его)
    • Измените class клона на twitter-share-button
  4. append() этот клон к вашему <div> с шага 2.
  5. Используйте $.getScript(), чтобы загрузить и запустить JavaScript Javascript. Это преобразует ваш клонированный <a> в <iframe> со всеми нужными элементами.

Вот мой HTML (в нефрите): 

  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

4 голосов
/ 02 мая 2015
0 голосов
/ 16 января 2018 
<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>
...