Embed Javascript Widget In Meteor Template

Question

I'm building my first Meteor app and am bumping into an issue embedding Javascript widgets.

So my app is basic single page landing page and I'm trying to embed the Twitter timeline widget with the following code...

<a class="twitter-timeline" href="https://twitter.com/abrudtkuhl" data-widget-id="325157935250546688">Tweets by @abrudtkuhl</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

The script tag is never executed and it only renders the a tag. I'm not quite sure if this is a Handlebars (the default template engine for Meteor) issue or Meteor issue as I'm relatively new to both frameworks.

Answer 1

Generally speaking, when you build a Meteor app, you want to keep your Javascript separate from your template. Try this:

I'm assuming <a class="twitter-timeline"... is inside a template named 'twitter' (e.g. <template name="twitter">. Put your javascript inside a file called twitter.js and call once the template is rendered.

Template.twitter.rendered = function () {
  ! function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (!d.getElementById(id)) {
      js = d.createElement(s);
      js.id = id;
      js.src = "//platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);
    }
  }(document, "script", "twitter-wjs");
}