Add Disqus to Your Website
Disqus is a pretty awesome tool for website comments. You just to need a little configuration to get things done. Here is a quick guide to add disqus to your rails app.
Disqus Account and Setting
Make sure you have an account, if not, go to disqus. Then go for setting
and click Add Disqus To Site
, choose a site name, unique disqus url and category. Next, choose universal code choice and you will be presented with some code, just copy it!
Create Disqus Partial
Say you need disqus for your post show page and you can just copy the code here, but it’s not a good idea. You can use partial to simplify your view. Create _disqus.html.erb
:
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//demo-yong.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
Then in your show.html.erb
file, add this line of code <%= render 'disqus' %>
, refresh your page, it should work.
Configuration
Comments and posts will get mixed if you don’t add some identifier to disqus. You can add disqus.identifier
, disqus.title
and disqus.url
etc. And after that, the partial should be something like this:
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = '<%= url_for([@post, {only_path: false}]) %>';
this.page.identifier = '<%= @post.id %>';
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//lyuyongle.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>