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):

import grok
from interfaces import IArticle
from layout import Content

class Disqus(grok.Viewlet):
    grok.context(IArticle)
    grok.viewletmanager(Content)
    grok.order(99)

    def namespace(self):
        ns = {}
        ns['PAGE_URL'] = self.view.url()
        ns['PAGE_IDENTIFIER'] = self.context.title
        return ns

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:

<div class="CommentSection rounded-top"
	tal:attributes="PAGE_URL PAGE_URL; PAGE_IDENTIFIER PAGE_IDENTIFIER">
	<div id="disqus_thread"></div>
	<script>

	var disqus_config = function () {
	var PAGE_URL = $('#CommentsSection').attr('PAGE_URL');
	var PAGE_IDENTIFIER = $('#CommentsSection').attr('PAGE_IDENTIFIER');
	this.page.url = PAGE_URL;  
	this.page.identifier = PAGE_IDENTIFIER; 

	(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>
</div>

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:

div.CommentSection {
	margin: 2em;
	border: 1px solid gray;
}

The above is added to the general.css definition.

 

Grok 4 Noobs

Adding a Disqus comment section