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="" 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/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.

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./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./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.

• javascript
• meteor
• handlebars.js

2 Answers 2

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./widgets.js";
      fjs.parentNode.insertBefore(js, fjs);
    }
  }(document, "script", "twitter-wjs");
}

Although @emgee answer is absolutely correct, in some situation this is not enough.

When the JavaScript just inserts a new element, the next time the template is displayed, the JS will not be re-inserted (it is already there) and it's initialization will not be called a second time.

This is true for most social widgets and you need to manually force those widgets to re-parse the page. This is not just a Meteor problem but true for any site that loads content in AJAX that contains widgets.

For example, for twitter widgets you need to call twttr.widgets.load(rootElement).

For example, on the homepage of pijs.io, to re-process the embedded tweets and the "Follow" button, I have:

Template.home.rendered = function() {
  setTimeout(function() { 
    twttr.widgets.load(this.firstNode);;
    FB.XFBML.parse(this.firstNode);
  }, 0);
}

Reference:

• Twitter: https://dev.twitter./discussions/890
• Facebook: https://developers.facebook./docs/reference/javascript/FB.XFBML.parse/