How to add Disqus comments to your Freeway Pro website

Last update: 27-02-2012

Sometimes you like to give your website some extra interactivity like the possibility for your visitors to give comments. In the most articles on this website you will find this option.

I did not build this myself, but used the service of a commenting tool that is used on a lot of other websites around the internet. This (free) service is called DISQUS.

Go to the Disqus website and make an account and log in.
Go to the dashboard and click the +Add button
In Site URL fill in the main URL to your website (e.g. http://www.dtp2.nl)
In Site Name fill in a description for the page the script is on (e.g. AddDisqus)
The Site Shortname will be automatically generated. Remember this one!
If you did all this, click Continue
In the settings screen you don't have to change anything, but do as you please
In the next screen you can choose Install Instructions. Choose Universal Code
Now you will be presented with the code under Embed Code
Copy this complete bunch of code
Now go back to your Freeway Pro page where the script is going to be on
Click Insert / Markup Item
Paste the copied code into this dialog

In the code only three items should be changed. Below is the standard code copied from the Discus website, but I've highlighted the three items that you should change to make it work:

<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * *
var disqus_shortname = 'adddisqus';
var disqus_identifier = 'adddisqus';
var disqus_url = 'http://www.dtp2.nl/disqus-freeway-pro.html';

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + 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">blog comments powered by <span class="logo-disqus">Disqus</span></a>

In the two first lines between the single quotes you should place your comment scripts shortname that I told you to remember before. This is the automatically generated name from the Disqus website. In this case for my website this is adddisqus. In the third line fill in the URL of the actual webpage this script is going to be running on. In this case it is http://www.dtp2.nl/disqus-freeway-pro.html. If you don't know the exact name of your webpage, look into Freeway Pro's Inspector palette at file.

If you did all this, click OK in the Markup Dialog and you should be up and running from here on. Unfortunately if you preview the website in Freeway Pro you won't see anything. You need to publish it online to see the result. But believe me, you will be blown away.

Styling your Disqus content

The Disqus CSS is determined by the template you choose on the Disqus website. If you are a handy coder, you can paste a bit of CSS on that website or link to an external Style Sheet. Since I'm not a handy coder, I got some help from Walterdavisstudio to help me find out what code I need to paste where to get the desired result.

What I did is go to the Page menu item in Freeway Pro, HTML Markup to the Before </head> section and paste this code:

<style type="text/css">

#dsq-content {

font-family: Arial,Helvetica,sans-serif; font-size:12px;

}

</style>

Of course you can pick your own fonts and size, but this is what I used to get the desired results.

>> Click here to go back to the homepage