javascript meteor recaptcha disqus meteorite

Using Disqus / reCaptcha in a Meteor Application

I'm working on an application using Meteor. I am trying to use reCaptcha on one of my forms, and also the Disqus comments system on some of my pages. But the problem is, none of these are being rendered when I run the meteor server.

Here's the sample Disqus code I'm adding to my template:

<script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'HIDDENfromstackoverflow'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

For this, only the text "comments powered by Disqus" shows up on the webpage.

For the reCaptcha:

  <noscript>
     <iframe src="http://www.google.com/recaptcha/api/noscript?k=HiddenFromStackOverflow"
         height="300" width="500" frameborder="0"></iframe><br>
     <textarea name="recaptcha_challenge_field" rows="3" cols="40">
     </textarea>
     <input type="hidden" name="recaptcha_response_field"
         value="manual_challenge">
  </noscript>

It's interesting to note that the reCaptcha is displayed if I open my template as a normal HTML file in the browser (and not via the Meteor server.)

What am I missing?

Solution

You need jquery included for this.

public/disqus.js

 /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'HIDDENfromstackoverflow'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();

app.html

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
</head>

<body>
{{>captcha}}
</body>

<template name="captcha">
    {{#isolate}}
     <div id="my-disqus">
        <div id="disqus_thread"></div>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a> 
    </div>
    {{/isolate}}
</template>

client/main.js

Meteor.startup (function () {

    $(function () {
        var el = document.createElement("script");
        el.src = "/disqus.js";
        el.type = 'text/javascript';
        $("#my-disqus").prepend(el);

    });

});