Building Custom Forum Chat Box: Chapter 2

Do you own a website or a blog and want some cool forum or chat box features for it but you are unsure of how to build this feature or if it's too difficult to design this functionality for your website? Is it really that difficult?

Chill, relax and think twice may be thrice, depending on you; just kidding. Well this is now a very easy task using DISQUS. So in this article I'll be discussing how easily you can do that without writing any single line of code.

Yeah you read it right, without writing any single line of code (manually). So buckle up guys for this interesting journey because it's smart work. Here we go.

Outlines

• Overview
• Procedure
• Output
• Conclusion

Overview

Unlike my previous article for creating a forum chat box it is totally different. Using this option you can generate a universal option that will work fine for each platform in the same fashion. So just go through it.

You can visit the previous part here:

Creating Custom Forum Chat Box Chapter 1

Step 1

First of all visit the official DISQUS website, which is:

https://disqus.com/

In this page, you will find a portion something like shown below:



In that portion simply click on "Add Disqus to Your Site". On clicking this button it will redirect you to another page and in that page you will see a window like that.

That window contains 3 options, or I better say functionality options. These are:

• Site Name
• Choose your Unique Disqus URL
• Category
  
  

Here is a brief introduction to these sections:

• Site Name
  
  In this section you must provide a Site name of your website or blog.
  
  
• Choose your Unique Disqus URL
  
  In this second section you need to select a unique Disqus URL, this URL can be your website / blog URL too (just name, nothing else).
  
  
• Category
  
  Now finally select a category for your website, it can be a tech, business, and so on.

Step 2

Now simply provide all necessary details as needed for further steps and then click on "Finish Registration".

(The following image shows the second step order.)



Step 3

After clicking the "Finish Registration" option it will redirect you to another page, where you will get a list of all supported platforms. These platforms are:

      -    Universal
      -    Wordpress
      -    Blogger
      -    Tumblr
      -    SquareSpace
      -    TypePad
      -    Drupal
      -    Joomla

In my case I will use the Universal Code option. For any other option you can visit the first part of this article; for that go to this link:



Step 4

Then you will get an option like that, saying universal code. Just follow the option provided in it.

There are two sub operations in this step, as in the following.

A)



B)



Step 5

Actually, this is not a step number 5, it's just an additional functionality that you can provide to you website. For that follow the instruction defined in it.

There is two sub-steps in it.

A)


B)

Step 6

At the end you will directly get a functional code like this, just copy and paste it according tou you in your desired web page.

<script type="text/javascript">

/* * * CONFIGURATION VARIABLES: THIS CODE IS ONLY AN EXAMPLE * * */
var disqus_shortname = 'example'; // Required - Replace example with your forum shortname
var disqus_identifier = 'a unique identifier for each page where Disqus is present';
var disqus_title = 'a unique title for each page where Disqus is present';
var disqus_url = 'a unique URL for each page where Disqus is present';

/* * * 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>

Output

If everything works fine for you then on running your web page you will get something like this:



Login with your Facebook, Google, Twitter or separate Disqus account and start discussing.



Now guys, just clap for yourself because you just created a forum for your website without writing any single line of code.

Conclusion

Sometimes we don't need to do hard work or work hard for developing or designing something because smart work also exists in the world and this is the most beautiful example of that smart work for software engineers.

I hope it will be useful to you guys and you will like that. (Actually don't only like, try to provide some comments too, whether positive or negative. I'll appreciate them all.)

 

<< Creating Custom Forum Chat Box Chapter 1