Me inicializar el botón Tweet a principios de mi aplicación, después de la interacción del usuario ubicación de la ventana actual se actualiza utilizando HTML5 pushState, pero el botón de Twitter todavía es compartir la URL anterior de cuando se ha inicializado.¿Cómo actualizar la URL del botón de compartir de Twitter con contenido dinámico?
¿Cómo actualizo la URL que Twitter usa?
Me di cuenta de esto. He aquí cómo hacer que esto funcione.
La idea general es:
class de su <a> para el botón de compartir de Twitter para ser algo más que .twitter-share-button. También proporcione <a> a style="display:none;".<div> (o <span>) con un único id.the hidden, mis-named, etiqueta `desde el paso # 1data-url etc. .. atributos como deseestyle a partir del clon (mostrarla)class del clon a twitter-share-buttonappend() este clon a su <div> desde el paso 2.$.getScript() para cargar y ejecutar el Javascript de Twitter. Esto convertirá su clonado <a> en un con toda la pega perfecta.Aquí es mi HTML (en 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
Luego, en sus Js del lado del cliente:
// 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");
que tiene las principales pistas para esta solución desde aquí: http://tumblr.christophercamps.com/post/4072517874/dynamic-tweet-button-text-using-jquery
Gracias por esto. Terminé sin usar la secuencia de comandos de twitters widgets.js y lanzando mi propia etiqueta de anclaje de twitter que pasaba la url como parámetro al href del enlace. De esta forma, tengo un mejor control sobre cómo se diseñó y posicionó. – cjroebuck
Esto ya no funciona. El iframe src todavía tiene referencia a la URL de carga. Todos los demás atributos cambian, excepto el src del iframe. No estoy seguro de qué más hacer. – TYRONEMICHAEL
Tuve éxito utilizando la nueva función de Twitter que vuelve a cargar la URL compartida.
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();
}
Mi HTML inicial solo tiene un contenedor para el enlace de acción, así:
<div id="twitter-share-section"></div>
Cada vez que tengo nuevos datos de una llamada ajax acabo de llamar updateTwitterValues () y pasar a lo largo de la nueva información Más información aquí https://dev.twitter.com/discussions/5642
¡esto es mejor! – Shaheer
twttr.widgets.load();Notado justo después de responder que esta información está contenida en otra respuesta. No lo detecté yo mismo y encontré la respuesta a través de una Búsqueda de Google. Si me perdí la información en la otra respuesta, entonces otros también podrían - así lo dejo aquí. –
<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>
¿Podría explicar su código? https://stackoverflow.com/help/how-to-answer – TidyDev
He actualizado el código. ahora podemos probar cómo la url dinámica se puede vincular al botón de compartir de Twitter. De forma predeterminada, el botón Compartir de Twitter toma la URL del navegador como compartida, si queremos compartir alguna URL dinámica (significa que podemos agregar algunos parámetros a nuestra URL) esta función se usa para eso. – Kiran
En el código anterior, cuando hacemos clic en el botón 'TestTwitter', compartir URL de twitter cambia a "http://www.google.com". – Kiran
Estoy tratando de lograr básicamente lo mismo. Traté de actualizar el atributo 'data-url' dinámicamente con esto:' $ ('. Twitter-share-button'). Attr ("data-url", "http: // mynewlink"); 'pero el javascript de twitter tiene Ya se ejecutó y esto no funciona. ¡Ayuda! – tig