Disqus Comment System

This is the right place to report general bugs, make suggestions or ask for help.
Tongara
Posts: 77
Joined: Wed Jan 22, 2020 11:09 am
Location: Birmingham, UK
Contact:

Disqus Comment System

Post by Tongara » Wed Jan 22, 2020 11:20 am

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

Tongara
Posts: 77
Joined: Wed Jan 22, 2020 11:09 am
Location: Birmingham, UK
Contact:

Re: Disqus Comment System

Post by Tongara » 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

User avatar
dajare
Posts: 14
Joined: Wed Dec 25, 2019 2:57 pm
Location: Edinburgh, U.K.

Re: Disqus Comment System

Post by dajare » 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!

User avatar
franah
Posts: 39
Joined: Wed Aug 14, 2019 11:50 pm
Location: Spain
Contact:

Re: Disqus Comment System

Post by franah » Mon Jan 27, 2020 2:51 am

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 .

Tongara
Posts: 77
Joined: Wed Jan 22, 2020 11:09 am
Location: Birmingham, UK
Contact:

Re: Disqus Comment System

Post by Tongara » Mon Jan 27, 2020 6:53 pm

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!

Tongara
Posts: 77
Joined: Wed Jan 22, 2020 11:09 am
Location: Birmingham, UK
Contact:

Re: Disqus Comment System

Post by Tongara » Fri Feb 21, 2020 5:42 am

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!

User avatar
Arvid
FlatPress Coder
Posts: 558
Joined: Sat Jan 26, 2019 7:40 pm
Contact:

Re: Disqus Comment System

Post by Arvid » Wed Apr 15, 2020 12:20 pm

Thanks a lot (!) for that detailled guide. I added it to the wiki, so no one has to crawl the support forum to find it: https://wiki.flatpress.org/doc:tips:adddisqus
Tongara, please feel free to further adjust the contents and styling of the wiki page.

All the best,
Arvid

Tongara
Posts: 77
Joined: Wed Jan 22, 2020 11:09 am
Location: Birmingham, UK
Contact:

Re: Disqus Comment System

Post by Tongara » Sat Apr 09, 2022 4:58 pm

A slight update for this one just over 2 years later...
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):

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

Code: Select all

<style>#disqus_thread {
display:none;
}</style>
And that is that!

User avatar
ScrapBlox
Posts: 18
Joined: Sat Mar 12, 2022 2:37 am
Location: United States, OHIO
Contact:

Re: Disqus Comment System

Post by ScrapBlox » Sun May 22, 2022 6:26 pm

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 (Right before the </body> tag)
Change [INSERT SHORT NAME] to your disqus comment section shortname (Can find on general tab in admin dashboard)

Code: Select all

<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

Code: Select all

<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

Code: Select all

<td><a class="link-general" 
href="{$id|link:post_link}#disqus_thread">
{* Compatibility with pre-0.702 *}
{$commentcount|default:$comments}</a></td>
<td>
Any problems/questions/feedback on this addition to this post feel free to ask
Content Creator | Developer | Gamer
~ ScrapBlox (Alec)

Tongara
Posts: 77
Joined: Wed Jan 22, 2020 11:09 am
Location: Birmingham, UK
Contact:

Re: Disqus Comment System

Post by Tongara » Thu Jun 02, 2022 5:20 am

ScrapBlox wrote: Sun May 22, 2022 6:26 pm 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 (Right before the </body> tag)
Change [INSERT SHORT NAME] to your disqus comment section shortname (Can find on general tab in admin dashboard)

Code: Select all

<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

Code: Select all

<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

Code: Select all

<td><a class="link-general" 
href="{$id|link:post_link}#disqus_thread">
{* Compatibility with pre-0.702 *}
{$commentcount|default:$comments}</a></td>
<td>
Any problems/questions/feedback on this addition to this post feel free to ask
Wow, what a cool little addition to this whole thing!
Just to note, if you already added the part to footer.tpl from the first post, then you don't need to add it again here.

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 42 guests