Twitter built-in timeline inside polymer element

Question

I am trying to implement twitter's built-in timeline inside a polymer element. But there is a problem: twitter widgets.js script cannot get the anchor element that is inside the shadow dom. To solve this problem, I overwrite some methods of the document element and after widgets.js has finished executing, I restored the standard methods of the document. It works, but it seems very unsafe. Can anyone get a better solution?

Answer 1

After you tried these tricks, I found out that the answer is trivial!

Looking at the Twitter docs ( https://dev.twitter.com/web/javascript/initialization ), I found out that you can say that it is looking for dynamically created widgets at any given point, moving from the given node.

This means that you just need to connect it to the finished polymer:

...
  <template>

    <a class="twitter-timeline" height="500" href="https://twitter.com/joaomgvieira">Tweets by joaomgvieira</a>

  </template>

  <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>
    Polymer({

      ready: function () {
        twttr.ready(function () {
          twttr.widgets.load(this);
        }.bind(this));
      }

    });
  </script>
...

To make it reusable, I created https://github.com/joaovieira/twitter-widgets .

This should do the trick easily, so you can use your attachments as you used to.

Answer 2

I tried creating a Polymer component with widget.js library from Twitter: https://github.com/LasaleFamine/polymer-twitter-timeline

: https://github.com/LasaleFamine/polymer-lib-loader

.

, . , , PR!