Adding a comment section is straightforward, and demonstrates integration with external services. Adding Google Analytics™ is a very similar (though less complicated) procedure.
First, your web site should be registered with Disqus (one of the better forums at this time). Once registered, Disqus will provide you with a Javascript snippet to embed on each page where you would like to support forums. It looks something like this:
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
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 = 'https://gfn-aptrackers-com.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">comments powered by Disqus.</a></noscript>
To add this to our pages, we first create a new viewlet (disqus.py
):
This viewlet will be added to the end (order=99) of the Content providers for items of type IArticle
. The namespace()
method allows us to make variables directly accessible within the template namespace. We could have added attributes to the Disqus
object from within the update()
method, but the above demonstrates an alternate (and arguably better) way to provide variables into a template.
The template itself (disqus_templates/disqus.pt
)contains an HTML snippet that will be rendered for this viewlet:
We use tal:attributes to define the PAGE_URL and PAGE_IDENTIFIER variables, and then retrieve them from the page element when the script executes.
The only remaining task is to make the comment section look good with a bit of CSS:
The above is added to the general.css
definition.