ff-stream-web

git clone git://archive.git.mtrnord.blog/MTRNord/ff-stream-web.git
Log | Files | Refs | README | LICENSE

how-to-integrate-disqus.md (1824B)

      1 ## How to Integrate [Disqus](https://disqus.com)
      2 
      3 https://disqus.com/admin/create/
      4 
      5 #### `DisqusThread.js`
      6 
      7 ```js
      8 import React, { PropTypes } from 'react';
      9 
     10 const SHORTNAME = 'example';
     11 const WEBSITE_URL = 'http://www.example.com';
     12 
     13 function renderDisqus() {
     14   if (window.DISQUS === undefined) {
     15     var script = document.createElement('script');
     16     script.async = true;
     17     script.src = 'https://' + SHORTNAME + '.disqus.com/embed.js';
     18     document.getElementsByTagName('head')[0].appendChild(script);
     19   } else {
     20     window.DISQUS.reset({reload: true});
     21   }
     22 }
     23 
     24 class DisqusThread extends React.Component{
     25 
     26   static propTypes = {
     27     id: PropTypes.string.isRequired,
     28     title: PropTypes.string.isRequired,
     29     path: PropTypes.string.isRequired
     30   };
     31 
     32   shouldComponentUpdate(nextProps) {
     33     return this.props.id !== nextProps.id ||
     34       this.props.title !== nextProps.title ||
     35       this.props.path !== nextProps.path;
     36   }
     37 
     38   componentDidMount() {
     39     renderDisqus();
     40   }
     41 
     42   componentDidUpdate() {
     43     renderDisqus();
     44   }
     45 
     46   render() {
     47     let { id, title, path, ...other} = this.props;
     48 
     49     if (process.env.BROWSER) {
     50       window.disqus_shortname = SHORTNAME;
     51       window.disqus_identifier = id;
     52       window.disqus_title = title;
     53       window.disqus_url = WEBSITE_URL + path;
     54     }
     55 
     56     return <div {...other} id="disqus_thread" />;
     57   }
     58 
     59 }
     60 
     61 export default DisqusThread;
     62 ```
     63 
     64 #### `MyComponent.js`
     65 
     66 ```js
     67 import React from 'react';
     68 import DisqusThread from './DisqusThread.js';
     69 
     70 class MyComponent extends React.Component{
     71 
     72   render() {
     73     return (
     74       <div>
     75         <DisqusThread id="e94d73ff-fd92-467d-b643-c86889f4b8be"
     76                       title="How to integrate Disqus into ReactJS App"
     77                       path="/blog/123-disquss-integration" />
     78       </div>
     79     );
     80   }
     81 
     82 }
     83 
     84 export default MyComponent;
     85 ```