In this post you will learn how to quickly create disqus comment plugin for your nodepress js cms.

Let's get started

Step 1 > Create Plugin Folder And Files

Create folder on your desktop called: “disqus-comments”. In that folder, create 4 files

  1. package.json
  2. temp.html
  3. settings.js
  4. disqus-code.js

Step 2 > Setting Up Package File

In your package.json add the below text:

{
	"name": "Disqus Comment Plugins",

	"description": "Use this plugin to use disqus comment platform",

	"plugin_file_name":"disqus-code.js",

	"settings_file":"settings.js",

	"settings_button_id":"btn_disqus_code",		

	"version": "0.1.0",

	"author_name": "NodePress JS Team",    

	"author_url": "https://nodepressjs.com"  
}

Let's walk through all the options you have available to you.  

Name: This will be the name of your plugin

Description: A short description about your plugin as to what it does.

Plugin File Name: This is the javascript file that Nodepress JS CMS look for to perform action. You can name this file to whatever you like. For this example, it's named "disqus-code.js"

Setting File: This is the javascript file that CMS look for to add data to the database. You can name this file to whatever you like. For this example, it's named : "settings.j".

Setting Button ID: This element class id that nodpress js looks for to trigger modal pop up for data entry.

Version: Add a version for your plugin. This can you be any text you want. For example, "1.1.4", "v1", or "my first plugin v1".

Author Name: This will be your name to ensure that people know that you create the nodepress plugin.

Author URL: A URL where people can find out more about your plugin or about your services that you offer.

Step 3 > Temp HTML File

In your temp.html add the below text:

<style type="text/css">
.error_msg{
	background-color: yellow;
}
.msg_alert{
	padding:5px;
	font-size:14px;
	color: red;
}
</style>

<div class="code_container_msg"></div>


<div class="code_container_form" style="display:none;">	
	 
	<div class="form-group">
    	<label >Disqus Site Code</label>
    	<input type="text" class="form-control code_option_value"  placeholder="Enter Your Disqus Site Code">
    	<div class="missing_info"></div>
  	</div>
  	<button type="button" class="btn btn-primary btn_disqus_update_code">Update</button>
  	<span class="post_msg"></span>

</div>

The class "code_container_form" container will open up on the admin side where you can entry your disqus comment code.  The class "code_option_value" is the input field where you will key your disqus comment code. The "btn_disqus_update_code" class is the button when clicked it will process your disqus code and add it to the database. After that, in "pos_msg" class nodepress js will display a success message.

Step 4 > Setting File

In your setting.js add the below text:

$(document).ready(function()
{
    $(document).on('click', '.btn_disqus_code', function(event) 
    {
    	event.preventDefault();    	

    	var site_plugin_folder = '/np-content/plugins/';

    	var plugin_folder_name = 'disqus-comments/';
    	var template_file = 'temp.html';

    	var url  =  site_plugin_folder+plugin_folder_name+template_file;    	
 
    	$.get(url, function(data) 
    	{
    		msg_box = $(document).find('.code_container_msg');

    		var object_data =
			{
				ModalTitle:'Disqus Comment Plugin', 
				ModalBodyContent: data,
			};

			bs.Modal(object_data);
    		
    		var d = bs.WaitingMsg("Please wait....Processing your request");

    		$(document).find('.code_container_msg').html(d).show();


    		var DataString = {option_name: 'disqus_code'};

    		var ajax = np_admin_ajax_option('GET',DataString);

    		//error
			ajax.fail(function(xhr, ajaxOptions, thrownError)  
			{ 		 	 
			  //do your error handling here
			  
				bs.ClearError();
				var Msg = 'There was an error message ('+thrownError+') while trying to process your request. <br><br>'
				+ 'Please try agin in a few seconds.<br><br>';     

				var ErrorMsg = bs.AlertMsg(Msg,'error');

				$(document).find('.code_container_msg').html(ErrorMsg).show();
				console.log(thrownError);
				console.log(xhr); 
			});

			//success
			ajax.done(function(data) 
			{ 
				//console.log(data) 

				var ele = $(document).find('.code_container_form');
				ele.find('.code_option_value').val(data.option_value);
				ele.show();
				$(document).find('.code_container_msg').hide();
			});
		});
    });
	
	
	//--->submit > start
	$(document).on('click', '.btn_disqus_update_code', function(event) 
    {
    	event.preventDefault();
    	
    	bs.ClearError()
    	var ele_this = $(this);

 
		//Get the field value
		var api_key = $(document).find('.code_option_value');
		 
		// Validate field
		if(frm.IsEmpty(api_key.val() ))
		{
			//Show alert
			bs.ShowError ("Please enter code",api_key);
		}
		else
		{
			var d = bs.WaitingMsg("Please wait....Processing your request");

    		$(document).find('.code_container_msg').html(d).show();


    		var DataString = {option_name: 'disqus_code', option_value:api_key.val()};

    		var ajax = np_admin_ajax_option('POST',DataString);

    		//error
			ajax.fail(function(xhr, ajaxOptions, thrownError)  
			{ 		 	 
			  //do your error handling here
			  
				bs.ClearError();
				var Msg = 'There was an error message ('+thrownError+') while trying to process your request. <br><br>'
				+ 'Please try agin in a few seconds.<br><br>';     

				var ErrorMsg = bs.AlertMsg(Msg,'error');

				$(document).find('.code_container_msg').html(ErrorMsg).show();
				//$('.ScreenData').show();

				console.log(thrownError);
				console.log(xhr);				 
			});
			//success
			ajax.done(function(data) 
			{ 
				//console.log(data) 
				var d = bs.AlertMsg("Updated your disqus comment code", "success");
				$(document).find('.post_msg').html(d);
				$(document).find('.code_container_msg').hide();
			});
		}
    });
	//--->submit > end	 
});

Let's look at the 2 on click event:  "btn_disqus_code and btn_disqus_update_code".

1) btn_disqus_code

This "btn_disqus_code" is the code that you added in your package.json file under > "settings_button_id":"btn_disqus_code". This is assigned to "setting button" with class named "btn_disqus_code" in your admin side under plugin:

Once the "setting" button is clicked, the "btn_disqus_code" event fires. First, the CMS goes into disqus plugin folder and get the content of "temp.html" file. Next it puts it into a modal using Awesome Functions modal function.

After that, it uses built in  function ("np_admin_ajax_option('GET',DataString)" ) to call cms and looks to see if disqus code was already saved as an option.  If it was, then it gets the value from database and displays it. 

$(document).on('click', '.btn_disqus_code', function(event) 
    {
    	event.preventDefault(); 
    	
    	var site_plugin_folder = '/np-content/plugins/';

    	var plugin_folder_name = 'disqus-comments/';
    	var template_file = 'temp.html';

    	var url  =  site_plugin_folder+plugin_folder_name+template_file;    	
 
    	$.get(url, function(data) 
    	{
    		msg_box = $(document).find('.code_container_msg');

    		var object_data =
			{
				ModalTitle:'Disqus Comment Plugin', 
				ModalBodyContent: data,
			};

			bs.Modal(object_data);
    		
    		var d = bs.WaitingMsg("Please wait....Processing your request");

    		$(document).find('.code_container_msg').html(d).show();


    		var DataString = {option_name: 'disqus_code'};

    		var ajax = np_admin_ajax_option('GET',DataString);

    		//error
			ajax.fail(function(xhr, ajaxOptions, thrownError)  
			{ 		 	 
			  //do your error handling here
			  
				bs.ClearError();
				var Msg = 'There was an error message ('+thrownError+') while trying to process your request. <br><br>'
				+ 'Please try agin in a few seconds.<br><br>';     

				var ErrorMsg = bs.AlertMsg(Msg,'error');

				$(document).find('.code_container_msg').html(ErrorMsg).show();
				console.log(thrownError);
				console.log(xhr); 
			});

			//success
			ajax.done(function(data) 
			{ 
				//console.log(data) 

				var ele = $(document).find('.code_container_form');
				ele.find('.code_option_value').val(data.option_value);
				ele.show();
				$(document).find('.code_container_msg').hide();
			});
		});
    });

2) btn_disqus_update_code

After you have keyed in the code and clicked the "update" button, nodepress js will perform a validation process via Awesome functions Form Validator

Once all clear, it precedes to add the value to the database by calling the built in secure ajax function " np_admin_ajax_option('POST',DataString)". On the backend side, the "option code" is validated by looking to see if it exist. If does exist, cms updates the value. However, if it doesn't exist, then cms adds it as a new option value. 

After that, a success message is shown to you. 

//--->submit > start
	$(document).on('click', '.btn_disqus_update_code', function(event) 
    {
    	event.preventDefault();
    	
    	bs.ClearError()
    	var ele_this = $(this);

 
		//Get the field value
		var api_key = $(document).find('.code_option_value');
		 
		// Validate field
		if(frm.IsEmpty(api_key.val() ))
		{
			//Show alert
			bs.ShowError ("Please enter code",api_key);
		}
		else
		{
			var d = bs.WaitingMsg("Please wait....Processing your request");

    		$(document).find('.code_container_msg').html(d).show();


    		var DataString = {option_name: 'disqus_code', option_value:api_key.val()};

    		var ajax = np_admin_ajax_option('POST',DataString);

    		//error
			ajax.fail(function(xhr, ajaxOptions, thrownError)  
			{ 		 	 
			  //do your error handling here
			  
				bs.ClearError();
				var Msg = 'There was an error message ('+thrownError+') while trying to process your request. <br><br>'
				+ 'Please try agin in a few seconds.<br><br>';     

				var ErrorMsg = bs.AlertMsg(Msg,'error');

				$(document).find('.code_container_msg').html(ErrorMsg).show();
				//$('.ScreenData').show();

				console.log(thrownError);
				console.log(xhr);				 
			});
			//success
			ajax.done(function(data) 
			{ 
				//console.log(data) 
				var d = bs.AlertMsg("Updated your disqus comment code", "success");
				$(document).find('.post_msg').html(d);
				$(document).find('.code_container_msg').hide();
			});
		}
    });
	//--->submit > end	

Step 5 > Client Side Code File

In your disqus-code.js add the below text: 

var update_disqus_link  = function (comment_code) 
{
    var get_comment_container = $('.comment_container') ;
 
    if(get_comment_container.html().length> 0)
    {
        //get_comment_container.remove();
        get_comment_container.html('<div id="disqus_thread" style="padding:10px;"></div>');         
        var d = document, s = d.createElement('script');
        s.src = 'https://'+comment_code+'.disqus.com/embed.js';
        s.setAttribute('async','true');
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);        
    }     
};

$(document).ready(function()
{    
    var get_comment_container = $('.comment_container');
    if(get_comment_container.length > 0)
    {
        var get_disqus_link = JSON.parse( np_ls_get('ls_site_disqus_code') );

        if(np_size(get_disqus_link) > 0   )
        { 
            update_disqus_link(get_disqus_link.disqus_code);         
            return false;
        }

        np_sm_ajax({url:'/api/options',type:'get',data:{option_name:'disqus_code'}},function(data)
        {
            if(data.status == 'success')
            {
                var option_value = data.option_value; 
                //add 5 minutes to expire timestamp
                var date_expire = np_get_expire_timer({min:5});

                //add to localstorage
                var obj = 
                {
                    disqus_code:data.option_value,
                    code_expire_sec:date_expire.unix,
                    code_expire_iso: date_expire.iso,
                };
                np_ls_add('ls_site_disqus_code', JSON.stringify(obj) );
                update_disqus_link(data.option_value);                  
            }
        });
    } 
});

When your client side site loads up, nodepress js will check to see if the page has comment div container with class name (comment_container). 

If it does, then it will use the cms built in function "np_sm_ajax" to call the option name(disqus_code) and get it's value from the database. 

Once the value is obtained, it stores it in localstorage with built in function(np_ls_add) and adds a timer of 5 minutes with another built in function (np_get_expire_timer). This ensures that your database is not called every time  a page loads. 

Next cms loads up the required disqus js file into header. 

Step 6 > Zip Folder

Just zip the folder with all the files and upload it to your Nodepress JS CMS under the plugin section and activate the plugin.

Download This Plugin