Disqus Comment System

This is the right place to report general bugs, make suggestions or ask for help.
Post Reply
Tongara
Posts: 26
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: 26
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: 27
Joined: Wed Aug 14, 2019 11:50 pm
Location: Canary Islands, 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: 26
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: 26
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: 92
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
Helpful FlatPress links: Project blog 📝 - FlatPress wiki 📖 - FlatPress@Twitter 🐦
Stay up to date with our feeds: Forum RSS feed 📜 - Project blog RSS feed 📜


🇩🇪 Habe aktuell für meinen Arbeitgeber hier im Ruhrgebiet eine Stelle zu besetzen! 🇩🇪
- Softwareentwickler (Webanwendungen) - unbefristet, sofort

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests