0

I generate content for my tweet button as the page loads, but even when I have my script to run first widget.js still runs before, I tried using twttr.widget.load() to update the value but it didn't work.

Is it possible to update the value of the twitter button after it has already loaded initially? Or make it so it initializes after the content has loaded?

Below is the code I use.

I've tried placing widget.js before and after my script on the HTML too. 

text = quote[0].content.substring(3, quote[0].content.length - 5);
document.querySelector("#quote").innerHTML = text; 
document.querySelector(".twitter-share-button").setAttribute("data-text", text);
twttr.widgets.load(document.getElementById("tweet"));

HTML

    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script>window.twttr = (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
    if (d.getElementById(id)) return t;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);

    t._e = [];
    t.ready = function(f) {
        t._e.push(f);
        };

        return t;
    }(document, "script", "twitter-wjs"));</script>
<script src="script.js"></script>
Danyx
  • 574
  • 7
  • 34
  • Possible duplicate of [Dynamically change Tweet Button "data-text" contents](http://stackoverflow.com/questions/10486354/dynamically-change-tweet-button-data-text-contents) – Robiseb Oct 01 '16 at 23:35

2 Answers2

1

The twitter widget load asynchronously.

Twitter documentation

Loading the widgets.js file asynchronously will require you to wait before binding events

No matter your code is before or after the load widget line, 

twttr.widgets.load(document.getElementById("tweet"));

you have to wait that the widget is loaded.

Try this code

twttr.ready(
  function (twttr) {
    twttr.events.bind(
      'loaded',
      function (event) {
        var text = quote[0].content.substring(3, quote[0].content.length - 5);
        document.querySelector("#quote").innerHTML = text; 
        document.querySelector(".twitter-share-button").setAttribute("data-text", text);
      }
    );
  }
);
Robiseb
  • 1,576
  • 2
  • 14
  • 17
  • I'm getting a twttr is not defined error, I've updated the question with my HTML to see if I'm doing something wrong. – Danyx Oct 01 '16 at 23:18
  • `twtter` script has to be performed **before** `widgets.js` ! 1. twtter script, 2. widgets.js, 3. script.js – Robiseb Oct 01 '16 at 23:21
  • Now how do I reference the button? The widget changes anything with the twitter-button-share class to an iframe and I can't change the data-text value anymore. – Danyx Oct 01 '16 at 23:30
  • 1
    Please, [see this answer](http://stackoverflow.com/questions/10486354/dynamically-change-tweet-button-data-text-contents) – Robiseb Oct 01 '16 at 23:34
  • I'm having some issues with the twttr.events.bind(), it only seems to run sometimes and that's where I'm deleting the iframe, but it's not consistent when the function will execute. – Danyx Oct 02 '16 at 00:06
0

I found a way to do it, here's what you need to know:

1) There's no need to have a twitter button in the initial HTML (this will only create a duplicate button that you'll need to delete later).

2) Simply create the button 

var button = document.createElement('a');
button.classList += "twitter-share-button";
button.innerHTML = "Tweet";
button.setAttribute("data-text", text);
button.setAttribute("data-via", via);
button.setAttribute("href", "https://twitter.com/intent/tweet");

And append it wherever you want it to be

document.querySelector(".quote").appendChild(button);

After that all you need to do is reload the widget

twttr.widgets.load();

Since it loads asynchronously I don't know whether or not it's necessary to check before calling the load method, I've been reloading for a few minutes and haven't found any issues with it, keep this in mind if your button isn't loading properly.

Danyx
  • 574
  • 7
  • 34