All geek questions in one place

How do I update the URL of a sharing button with dynamic content?

I initialize the twitter button at the beginning of my application, after interacting with the user, the current location of the window is updated using HTML5 pushState, but the Twitter button still uses the previous URL from the moment it was initialized.

How to update a URL that uses twitter?

+6
source share
4 answers

I get it. Here's how to do it.

General idea:

  • In your HTML, set the class your <a> for the twitter .twitter-share-button as something other than .twitter-share-button . Also give <a> a style="display:none;" .
  • In your HTML, where you want the twitter sharing button to appear, create a <div> (or <span> ) with a unique id .
  • In your jQuery, when you want to set the data for the twitter share button, you will:
    • 'clone () the hidden, mis-named, `tag from step # 1
    • In this clone, set data-url attributes, etc., as you would like
    • Remove style attribute from clone (show it)
    • Change clone class to twitter-share-button
  • append() this clone to your <div> from step 2.
  • Use $.getScript() to download and run Twitter Javascript. This will convert your cloned <a> to <iframe> with all the correct errors.

Here is my HTML (in 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

Then on the client side .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");

I got the basic tips for this solution from here: http://tumblr.christophercamps.com/post/4072517874/dynamic-tweet-button-text-using-jquery

+12
source

I have had success using the new Twitter feature, which reloads the sharing URL.

 function updateTwitterValues(share_url, title) { // clear out the <a> tag that 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(); }

My source HTML has a container for a shared link, for example:

 <div id="twitter-share-section"></div>

Every time I get new data from an ajax call, I just call updateTwitterValues ​​() and pass in the new information. More details here https://dev.twitter.com/discussions/5642

+15
source

twttr.widgets.load();

From Twitter Dev Docs .

+4
source 
 <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>
0
source

Source: https://habr.com/ru/post/908064/

More articles:


All Articles