Inizializzo il pulsante tweet all'inizio della mia app, dopo l'interazione dell'utente la posizione della finestra corrente viene aggiornata utilizzando HTML5 pushState, ma il pulsante twitter sta ancora condividendo l'URL precedente da quando è stato inizializzato.Come aggiornare l'URL del pulsante di condivisione twitter con contenuto dinamico?
Come aggiornare l'URL utilizzato da Twitter?
L'ho capito. Ecco come farlo funzionare.
L'idea generale è:
class del <a> per il pulsante di condivisione Twitter di essere qualcosa di diverso da .twitter-share-button. Dare anche il <a> a style="display:none;".<div> (o <span>) con un id univoco.the hidden, mis-named, `tag dal passaggio # 1data-url etc. .. attributi come vuoistyle dal clone (riapparire)class del clone di twitter-share-buttonappend() questo clone al tuo dal passaggio 2.$.getScript() per caricare ed eseguire Javascript di Twitter. Questo convertirà il tuo clonato <a> in uno con tutto il giusto goop.Ecco il mio HTML (a 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
Poi, nel tuo .js client-side:
// 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");
ho ottenuto i principali indizi di questa soluzione da qui: http://tumblr.christophercamps.com/post/4072517874/dynamic-tweet-button-text-using-jquery
Grazie per questo. Ho finito per non utilizzare twitters widgets.js script e arrotolare il mio tag di ancoraggio twitter in stile passando l'url come parametro per il href del link. In questo modo ho un controllo migliore su come è stilizzato e posizionato. – cjroebuck
Questo non funziona più. L'iframe src ha ancora riferimento all'url di caricamento. Tutti gli altri attributi cambiano tranne che per lo src dell'iframe. Non sono sicuro su che altro fare. – TYRONEMICHAEL
Ho avuto successo utilizzando la nuova funzionalità di Twitter che ricarica l'URL di condivisione.
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();
}
mio iniziale HTML ha solo un contenitore per il link di condivisione, in questo modo:
<div id="twitter-share-section"></div>
Ogni volta che ricevo nuovi dati provenienti da una chiamata AJAX mi basta chiamare updateTwitterValues () e passare lungo il nuovo Informazioni. Maggiori informazioni qui https://dev.twitter.com/discussions/5642
questo è meglio! – Shaheer
twttr.widgets.load();Notato subito dopo aver risposto che queste informazioni sono contenute in un'altra risposta. Non l'ho notato da solo e ho trovato la risposta tramite una ricerca su Google. Se mi mancassero le informazioni nell'altra risposta, allora anche gli altri potrebbero - quindi lascerò questo qui. –
<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>
Puoi spiegare il tuo codice? https://stackoverflow.com/help/how-to-answer – TidyDev
Ho aggiornato il codice. ora possiamo testare come l'url dinamico può legarsi al pulsante di condivisione di Twitter. Per impostazione predefinita, il pulsante di condivisione di Twitter accetta l'URL del browser come condiviso, se vogliamo condividere alcuni URL dinamici (significa che possiamo aggiungere alcuni parametri al nostro URL), questa funzione viene utilizzata per questo. – Kiran
Nel codice sopra riportato quando clicchiamo su "TestTwitter", il pulsante twitter share url cambia in "http://www.google.com". – Kiran
Sto provando a realizzare fondamentalmente la stessa cosa. Ho provato ad aggiornare dinamicamente l'attributo 'data-url' con:' $ ('. Twitter-share-button'). Attr ("data-url", "http: // mynewlink"); 'ma il javascript di Twitter ha già eseguito e questo non funziona. Aiuto! – tig