Table of Contents

Guide: How to add Disqus comment system

This guide shows how to replace FlatPress' default comments with the Disqus comment system. It was originally provided by Tongara on the support forum. Thank you very much, Tongara!

Please refer to the forum if you have suggestions or questions regarding this guide.

The Basics

The following assumes you already have a Disqus site created, and you've got your Disqus Universal Code ready. If not, please visit https://disqus.com/profile/signup/ and do that first.

First things first, we're going to be using the leggero default theme, but this can be done with any theme at all.

Go ahead and open up your theme's “theme.conf.php”, and underneath the line that says
“$theme ['default_style'] = leggero';”

You should add the following:
$theme['hassingle'] = true;
That will make sure your blog entries are now displaying as their own entries on their own single page permalinks, which is a must imo.

It took me a good HOUR to find that line of code, and I randomly found it on a flatpress news update about “FlatPress 0.804 Vivace” from all the way back in May 2008 (!!!!), which can be seen here. I really think it should be added to the wiki's general knowledge on Flatpress. Anyway, back to the guide…

Now you're going to want to make a new file in the same directory called “single-default.tpl”, and you're going to want to copy the contents of your “entry-default.tpl” like so, and then we're going to paste that into our newly created single-default.tpl:

	<div itemscope itemtype="http://schema.org/BlogPosting" id="{$id}" class="entry {$date|date_format:"y-%Y m-%m d-%d"}">
				{* 	using the following way to print the date, if more 	*} 
				{*	than one entry have been written the same day,		*} 
				{*	 the date will be printed only once 				*}
				
		{$date|date_format_daily:"<h2 class=\"date\">`$fp_config.locale.dateformat`</h2>"}
		
				<h3 itemprop="name">
				<a href="{$id|link:post_link}">
				{$subject|tag:the_title}
				</a>
				</h3>
				{include file=shared:entryadminctrls.tpl}
				
				<span itemprop="articleBody">
				{$content|tag:the_content}
				</span>
				
				<ul class="entry-footer">
			
				<li class="entry-info">Posted by <span itemprop="author">{$author}</span> at
				{$date|date_format}

				<span itemprop="articleSection">
				{if ($categories)} in {$categories|@filed}{/if}
				</span>
				</li> 
				
				{if !(in_array('commslock', $categories) && !$comments)}
				<li class="link-comments">
				<a href="{$id|link:comments_link}#comments">{$comments|tag:comments_number} 
					{if isset($views)}(<strong>{$views}</strong> views){/if}
				</a>
				</li>
				{/if}
				
				</ul>
			
				
	</div>

Now we need to do some editing!

Find the following code 

				{if !(in_array('commslock', $categories) && !$comments)}
				<li class="link-comments">
				<a href="{$id|link:comments_link}#comments">{$comments|tag:comments_number} 
					{if isset($views)}(<strong>{$views}</strong> views){/if}
				</a>
				</li>
				{/if}

Delete that code, and then underneath the </ul> simply in your Disqus universal code, like below: 

<P> <div id="disqus_thread"></div>
{literal}<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 = YOUR-SITE-PAGE.URL/YOUR-PAGE.php;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = YOUR_UNIQUE_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://YOUR-DISQUS-SITE-NAME.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>{/literal}
	</div>

Remember to change “YOUR-SITE-PAGE.URL/YOUR-PAGE.php” to your flatpress blogs address, change “YOUR-DISQUS-SITE-NAME” to the shortname of your disqus site, and to change the identifier to whatever you like, or make it blank, it's up to you.

You can obviously place this where is best suited in your own code if your theme doesn't contain a <ul> here, etc, but towards the bottom after the rest of the content is probably best.

To note, you MUST wrap your Disqus universal code in {literal}{/literal} tags, as script tags in the body of a page that aren't wrapped in them is going to confuse smarty, and smarty is going to throw errors at you, which is NOT cool. This fixes that, and was something else I had to find out by searching through Smarty support forums. Anyway, back to the guide again…

Now that you've done that, in the same folder, you're going to want to create a new file called “single.tpl”, and then you're going to want to copy the contents of your index.tpl like so, and then we're going to paste that into our newly created single.tpl: 

{include file=header.tpl}

		<div id="main">
		
		
		{entry_block}
		
			{entry}
			{include file='entry-default.tpl'}
			{/entry}
		
			<div class="navigation">
				{nextpage}{prevpage}
			</div>
			
		{/entry_block}

		</div>
			

		{include file=widgets.tpl}
				
{include file=footer.tpl}

Now, we're going to do a bit more editing!

Replace the following line 

{include file='entry-default.tpl'}

with 

{include file='single-default.tpl'}

Now we need to edit your entry-default.tpl to add the Disqus comments link and comment count. When you've opened that file, find the following line 

<a href="{$id|link:comments_link}#comments">{$comments|tag:comments_number}

and replace it with 

<a href="{$id|link:post_link}#disqus_thread">Comments</a>

And finally, we're going to add the following discord count script right above the </body> tag in your footer.tpl file: 

<script id="dsq-count-scr" src="https://YOUR-DISQUS-SITE-NAME.disqus.com/count.js" async></script>

Remember to change YOUR-DISQUS-SITE-NAME to your disqus comment site shortname.

And there you have it, your Disqus comments system will be fully operational, and not to mention that all of your posts are now on their own pages, making the whole thing a bit nicer. You might have to visit your blog entry at least once for the counter to work, but that is a fault with Disqus and not Flatpress or this modification.

Adding to static pages

Now, depending on how you have your site set up, and if you're like me, you'll want to display comments on static pages too!

To do that is very simple. Simply open up your theme's satic.tpl file and find where you want to put the comment section. Once you've done that, paste and edit the following code (matches the earlier code): 

<P> <div id="disqus_thread"></div>
{literal}<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 = YOUR-SITE-PAGE.URL/static.php;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = YOUR_UNIQUE_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://YOUR-DISQUS-SITE-NAME.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>{/literal}
	</div>

Remember to change “YOUR-SITE-PAGE.URL” to your flatpress blogs address (keep the /static.php), change “YOUR-DISQUS-SITE-NAME” to the shortname of your disqus site, and to change the identifier to whatever you like, or make it blank, it's up to you. That adds it to every static page!

BUT, what if you've done this and now you don't want disqus comments on every static page? Easy!

You simply add the following code to the static pages you DON'T want disqus comments to appear on: 

<style>#disqus_thread {
display:none;
}</style>

And that is that!

Comment count in the admin panel

(This addition was created by ScrapBlox):

Adding onto what was already said about this

To get the comment count to show up in the admin entry list page.

Inside the footer.tpl make sure the following line is there Change [INSERT SHORT NAME] to your disqus comment section shortname (Can find on general tab in admin dashboard) 

<script id="dsq-count-scr" src="//[INSERT SHORT NAME].disqus.com/count.js" async></script>

So after that you want to open Blog > admin > panels > entry > admin.entry.list.tpl Find the following code 

<td><a class="link-general" 
href="{$panel_url|action_link:commentlist}&amp;entry={$id}">
{* Compatibility with pre-0.702 *}
{$commentcount|default:$comments}</a></td>
<td>

And change that to 

<td><a class="link-general" 
href="{$id|link:post_link}#disqus_thread">
{* Compatibility with pre-0.702 *}
{$commentcount|default:$comments}</a></td>
<td>

Closing Remarks

If you just so happen to run into any problems, then we'll try to help, but it's a pretty simple guide and I'm sure it will be easy enough to implement!