1

I am trying to have the Tweet button updated dynamically so that different text is tweeted (if one presses the Tweet button) every time some event happens.

Actually, what I am trying to achieve is the same as described in the following question:

Dynamically change Tweet Button "data-text" contents

And the provided answer to that question works ok with one annoying small problem. If I implement it like that, the Tweet button blinks when it's updated (disappears and appears) because it is rendered from scratch by using

twttr.widgets.load();

Does anyone have an idea on how would I achieve the same thing but without the "blinking"?

Community
  • 1
  • 1
morkitz
  • 151
  • 1
  • 7
  • Load the twitter button first, and `onLoad`, hide/get rid of the first one. – Feathercrown Nov 15 '16 at 19:10
  • When you say twitter button, what do you mean? Because the way the twitter button is updated is by removing the rendered ` – morkitz Nov 16 '16 at 15:47
  • @Feathercrown could you explain pls? – Leandro Bardelli Jan 07 '21 at 11:55
  • 1
    @Leandro I mean load a new twitter button with your new text so that you have two but style it to be hidden, and when the second one is finished loading, remove the first one and show the second. – Feathercrown Jan 14 '21 at 17:41

1 Answers1

0

The way I finally solved this was like so.

In the html file I define two divs one after another:

<div id="share_fixed">
  <a class="twitter-share-button" href="http://twitter.com/share" data-url=" " data-size="large" data-show-count="false" data-text=" ">
  </a>
</div>
<div id="share">
</div>

The div with id="share_fixed" will contain a Tweet button which will be static (rendered only when the page loads). The other div with id="share" will contain the Tweet button which will be rerendered (updated) every time some event occurs.

In the CSS I position both divs at the same location and overlay the one which changes on top of the fixed one:

#share {
  position: absolute;
  bottom: 12px;
  left: 15px;
  z-index: 1;
}

#share_fixed {
  position: absolute;
  bottom: 12px;
  left: 15px;
  z-index: 0;
}

This will actually force the fixed "dummy" Tweet button to always be positioned below the one which changes and blinks on reload. Whenever the button on top changes and "blinks" the one below it will remain and since it's exactly the same, it will seem like nothing changes.

In the Javascript file I add e.g. something like this:

var tweetBtn = $(document.createElement('a')).addClass("twitter-share-button")
          .attr('href', 'http://twitter.com/share')
          .attr('data-url', ' ')
          .attr('data-size', 'large')
          .attr('data-show-count', 'false')
          .attr('data-text', "Some new tweet text");
$("#share iframe").remove();
$("#share").append(tweetBtn);

twttr.widgets.load();

I guess there are more ways to solve this, but this works for me on Chrome, haven't tried on other browsers.

morkitz
  • 151
  • 1
  • 7