Is this the right way to embed Disqus in Angular2 component?

Question

Is the below done correctly to embed Disqus in Angular2 Component

disqus.component.html

<div class="card card-block">
  <div id="disqus_thread"></div>
  <noscript>
    Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a>
  </noscript>
</div>

--

disqus.component.ts

//Above code omitted for simplicity

    export class DisqusComponent {
      ngOnInit(){
        (function() { // DON'T EDIT BELOW THIS LINE
          var d = document, s = d.createElement('script');

          s.src = '//blahblahblahdafsfawf.disqus.com/embed.js';

          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
        })();
      }
    }

If you know you're going to use Disqus, why don't you put that code in the or ? Do you really need it to be loaded inside a component? — Eric Martinez, Mar 19 '16 at 14:01
This was perfect for me, since I only want Disqus on one of my subpages. Thanks. — Johan Frick, Apr 01 '18 at 18:26
Just use [ngx-disqus](https://github.com/MurhafSousli/ngx-disqus) — Murhaf Sousli, Oct 07 '18 at 21:07

Murhaf Sousli · Accepted Answer · 2017-05-29T18:09:16.317

Update: The easiest way is to use this DisqusModule that you can install from npm check Live Demo

If you still want to write it your self, this component will do the job

import {Component, Input, ElementRef, OnInit, Renderer2} from '@angular/core';


@Component({
    selector: 'disqus',
    template: '<div id="disqus_thread"></div>',
})

export class Disqus implements OnInit{

    @Input() public identifier:string;
    @Input() public shortname:string;

    constructor(private el:ElementRef, private renderer:Renderer2) {
      this.dom = el.nativeElement;
    }

    ngOnInit() {
      if ((<any>window).DISQUS === undefined) {
        this.addScriptTag();
      }
      else {
        this.reset();
      }
    }

    /**
     * Reset Disqus with new information.
     */
    reset() {
      (<any>window).DISQUS.reset({
        reload: true,
        config: this.getConfig()
      });
    }

    /**
     * Add the Disqus script to the document.
     */
    addScriptTag() {
       (<any>window).disqus_config = this.getConfig();

       let script = this.renderer.createElement(this.el.nativeElement, 'script');
       script.src = `//${this.shortname}.disqus.com/embed.js`;
       script.async = true;
       script.type = 'text/javascript';
       script.setAttribute('data-timestamp', new Date().getTime().toString());
     }

    /**
     * Get Disqus config
     */
    getConfig() {
      let _self = this;
      return function () {
        this.page.url = window.location.href;
        this.page.identifier = _self.identifier;
        this.language = 'en';
      };
    }
}

@choopage I have updated my answer, use `renderer.createElement` instead — Murhaf Sousli, Aug 24 '16 at 03:37
@MurhafSousli Hi. I saw your npm module, and was having a look on github. I have a question: you're using `Renderer2` and `global` for universal support. Why not just do an overall check with `isPlatformBrowser`. In node the `el.nativeElement` will be null so the script won't be attached, so it's not going to work or render anyway I would have thought? I see this a lot, but I'm confused as to the point, as it's a lot of extra checks for something that won't render on the server — Drenai, Feb 18 '18 at 13:44

score 1 · Answer 2 · answered Jun 10 '16 at 07:23

1

You can use the DISQUS.reset function to update the page details for a comment section without having to loading embed.js every time. That was you can just add the script once as Eric Martinez suggests.

answered Jun 10 '16 at 07:23

JayChase

11,174
2
43
52

Is this the right way to embed Disqus in Angular2 component?

2 Answers2