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.

score 12 · Answer 1 · answered Apr 19 '13 at 08:33

12

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");
}

answered Apr 19 '13 at 08:33

emgee

1,234
9
12

This should really be flagged as the answer. Applicable to just about anything, uservoice, etc. – Stephan Tual May 05 '13 at 21:19
http://stackoverflow.com/questions/3755606/what-does-the-exclamation-mark-do-before-the-function – emgee Jan 06 '14 at 21:58
Why use a self executing anonymous function? You are inside a function already, no need to scope your vars. – Perdi Estaquel Sep 27 '16 at 05:59

score 9 · Answer 2 · answered May 28 '13 at 21:49

9

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.com/discussions/890
Facebook: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

answered May 28 '13 at 21:49

sarfata

4,625
4
28
36

I am having some trouble with the facebook part ... it causes error messages about cross-domain errors (facebook using SSL while my site is in http). I have commented this out for now. – sarfata May 28 '13 at 21:50
1

thanks for adding this! was definitely necessary for me to get the basic twitter timeline working on page "reloads". newb ignorance, but can you walk me through why widgets.load() needs to be wrapped inside a setTimeout call? – Jacob May 29 '13 at 21:31
1

Short answer: it does not work without it (at least in my case). Long answer: the setTimeout(, 0) just delays the call to twitter api until the rendering is finished which seems to be needed. – sarfata May 30 '13 at 09:58
I had to wrap it in a `if (typeof twttr !== "undefined")` to make it work the first load. – Jonatan Littke Nov 08 '13 at 11:07
on another note, this didnt seem to work for the facebook thing – mcdonaldjosh Mar 26 '15 at 02:46

Embed Javascript Widget In Meteor Template

2 Answers2