Page 1 of 1

Disqus Comment System

Posted: Wed Jan 22, 2020 11:20 am
by Tongara
Hi everyone.

I've recently started to use FlatPress, and I'm finding it to be a great little system that suits my needs. The only thing I didn't really like too much was the self hosted comments system, so I've gone ahead and installed Disqus using the Universal Code provided on their website.

As I want the comment system to appear underneath posts, I've added it to the "entry-default.tpl" file, but realistically I want it to be shown ONLY when the user either clicks on the title of the entry or "Read More" link, which brings them to the page of that specific entry. Is this possible? Because I've found no template that separates the regular posts and "full post" after clicking on the links stated previously.

In addition to this, I'm having a hard time getting the Disqus comment count to work on the blog, so I would like some assistance with this too, please.

I'd be really grateful forany help provided with this~ :D

Re: Disqus Comment System

Posted: Fri Jan 24, 2020 10:45 am
by Tongara
Sorry to double post, but I actually got this to fully work!

If anyone is interested, I could probably make a guide for it. :D

Re: Disqus Comment System

Posted: Sun Jan 26, 2020 7:43 pm
by dajare
Well done! About this:
Tongara wrote:
Fri Jan 24, 2020 10:45 am
If anyone is interested, I could probably make a guide for it. :D
This could well be of interest to other users. If you wrote up your "guide" here, it could probably be added fairly easily to the wiki if that's a better place for it. Thanks!

Re: Disqus Comment System

Posted: Mon Jan 27, 2020 2:51 am
by franah
Tongara wrote:
Fri Jan 24, 2020 10:45 am
Sorry to double post, but I actually got this to fully work!

If anyone is interested, I could probably make a guide for it. :D
How did you do it?. Maybe we can create a plugin for FlatPress :D .

Re: Disqus Comment System

Posted: Mon Jan 27, 2020 6:53 pm
by Tongara
dajare wrote:
Sun Jan 26, 2020 7:43 pm
Well done! About this:
Tongara wrote:
Fri Jan 24, 2020 10:45 am
If anyone is interested, I could probably make a guide for it. :D
This could well be of interest to other users. If you wrote up your "guide" here, it could probably be added fairly easily to the wiki if that's a better place for it. Thanks!
Alright, I'll be sure to write up a guide in the next day or so, as I agree, it could be of interest to other users.
franah wrote:
Mon Jan 27, 2020 2:51 am
How did you do it?. Maybe we can create a plugin for FlatPress :D .
Now THAT would be cool!

Re: Disqus Comment System

Posted: Fri Feb 21, 2020 5:42 am
by Tongara
Okay, sorry about the delay, but here is exactly how I did it.

This guide 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

Code: Select all

"$theme ['default_style'] = leggero';"
You should add the following:

Code: Select all

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

Code: Select all

	<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

Code: Select all

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

Code: Select all

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

Code: Select all

{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

Code: Select all

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

Code: Select all

{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

Code: Select all

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

Code: Select all

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

Code: Select all

<script id="dsq-count-scr" src="//flat-1.disqus.com/count.js" async></script>
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.

If you want to see it working before you use it yourself, then you can find a live demo of it working on a "Deckay 4.0 - Deckay Black" theme at: http://www.clockworkknight.com/flat/

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