Mike Mead

Dropplets blogging platform with Disqus

Written by Mike

Apr 21, 2014

PHP

Dropplets blogging platform with Disqus

Dropplets provides a simple and lightweight blogging platform, but out of the box there's no provision for your readers to leave comments or discuss your articles. This is easily overcome in just three simple steps using Disqus.

  1. Sign-up for a Disqus account (It's free!)

    Head over to Disqus and register your website for a free account.

  2. Grab the Disqus integration code

    Whilst logged into your Disqus Admin portal select Settings on the right hand site and then click on Install which is just underneath.

Click on Universal Code and you will be presented with the code required to integrate Disqus with your website. Select and copy the code, which should look very much like the following:

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'FORUMSHORTNAME'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

  1. Edit the Dropplet template page for posts

    Open the template file posts.php in your favourite text editor. You'll find the file under /templates/templatename/

Paste the code from Step 2 where you would like the comments box to appear. Here's an example using the Simple or Default theme:

<article class="<?php echo($post_status); ?>">
	<div class="row">
		<div class="one-quarter meta">
			<div class="thumbnail">
				<img src="<?php echo($post_image); ?>" alt="<?php echo($post_title); ?>" />
			</div>

			<ul>
				<li>Written by <?php echo($post_author); ?></li>
				<li><?php echo($published_date); ?></li>
				<li>About <a href="<?php echo($post_category_link); ?>"><?php echo($post_category); ?></a></li>
				<li></li>
			</ul>
		</div>

		<div class="three-quarters post">
			<h2><a href="<?php echo($post_link); ?>"><?php echo($post_title); ?></a></h2>

			<?php echo($post_intro); ?>

			<ul class="actions">
				<li><a class="button" href="<?php echo($post_link); ?>">Continue Reading</a></li>
				<?php if ($category) { ?>
				<li><a class="button" href="<?php echo($blog_url); ?>">More Articles</a></li>
				<?php } ?>
			</ul>
			
			<!-- START DISQUS INTEGRATION -->
			<div id="disqus_thread"></div>
			<script type="text/javascript">
				/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
				var disqus_shortname = 'FORUMSHORTNAME'; // required: replace example with your forum shortname

				/* * * DON'T EDIT BELOW THIS LINE * * */
				(function() {
					var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
					dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
					(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
				})();
			</script>
			<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
			<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
			<!-- END DISQUS INTEGRATION -->
			
		</div>
	</div>
</article>

Save the file and you are finished!

comments powered by Disqus
  • Contact