Skip to content

Instantly share code, notes, and snippets.

@SteveBenner

SteveBenner/_disqus.slim

Forked from voigt/disqus.js
Last active August 29, 2015 13:59
Show Gist options
  • Save SteveBenner/10806780 to your computer and use it in GitHub Desktop.
Save SteveBenner/10806780 to your computer and use it in GitHub Desktop.
Download ZIP
Slim partial - Disqus comments widget
Raw
_disqus.slim
/ Integrate Disqus comments into your site with this widget (adheres to official API and config spec)
/
/ @see https://help.disqus.com/customer/portal/articles/1104788-web-integration Official web integration docs
/ @see https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables Configuration docs
/
/ @local [Hash{Symbol => String}] disqus Key/value pairs corresponding to the Disqus JS configuration variables
/ @option disqus [String] shortname Unique identifier for your forum website registered on Disqus.com (REQUIRED)
/ @option disqus [String] identifier A String or Integer value which identifies the current web page thread
/ @option disqus [String] title Title of the current page; defaults to value of HTML `title` element
/ @option disqus [String] url URL of the current page; defaults to `window.location.href`
/ @option disqus [String] category_id Category to use for current page; defaults to the 'General' category
/
/ It's a simple matter to generate a string of JavaScript variable definitions from our data object...
/ We can then drop it right into the JavaScript code using Slim's interpolation support
- js_config_variables = disqus.collect { |k,v| "disqus_#{k}=\"#{v}\"" }.join ','
#disqus_thread
javascript:
var #{{js_config_variables}};
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);
noscript
' Please enable JavaScript to view the
a href="http://disqus.com/?ref_noscript" comments powered by Disqus.
a.dsq-brlink href="http://disqus.com"
' comments powered by
span.logo-disqus Disqus
Raw
•example-output.html
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname="site",disqus_identifier="12",disqus_title="mysite",disqus_url="2015/post",disqus_category_id="2";
dsq = document.createElement('script');
dsq.type = "text/javascript";
dsq.async = true;
dsq.src = "//site.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 class="dsq-brlink" href="http://disqus.com">comments powered by <span class="logo-disqus">Disqus</span></a>
@SteveBenner
Copy link
Author

Developer note

Although the official Disqus documentation suggests declaring your configuration variables template, it is considered best practice to declare such variables in a single main Javascript file that is loaded externally, generally within the site <head>. This improves performance and modularity, reducing bloat for developers and users.

Depending on your technology, in development this may be done via CoffeeScript, as in the snippet below:

disqus_shortname   = site
disqus_identifier  = 12
disqus_title       = mysite
disqus_url         = '2014/post'
disqus_category_id = 2

The final product of your source code, whether JavaScript or CoffeeScript, should be a single compressed file. I accomplish this using coffeescript-concat.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment