IntenseDebate Comment System

Looking for a few examples to get you started? Look no further!

Quick Links:

• YouTube
• AddToAny Share Button for Posts
• AddToAny Share Button for Comments
• Hyves Tip
• After the Deadline: Spell check for Comments
• Facebook Share

YouTube

<pre>var id_youtube_plugin = {};
id_youtube_plugin.youtube_disabled_edit_ids = []; /* IntenseDebate commentid's that should have edit functionality disabled (contain youtube embeds) */
id_youtube_plugin.youtube_posted_from = 0; /* Which field should the poll embed code be inserted in (Reply or New Comment) */

/* add the YouTube button to the interface */
id_youtube_plugin.id_add_youtube_button = function() {
     id_add_plugin_button("javascript: id_youtube_plugin.id_show_youtube_embed(0)", "javascript: id_youtube_plugin.id_show_youtube_embed(1)", "http://www.youtube.com/favicon.ico", "Add a YouTube Video", "YouTube", "Embed video");

     id_youtube_plugin.id_youtube_disable_edit_buttons();
};

/* display the popup for the url of the video to embed */
id_youtube_plugin.id_show_youtube_embed = function(posted_from) {
     /* keep track of if it was for a reply or a new comment */
     id_youtube_plugin.youtube_posted_from = posted_from;

     var link2 = $newEl('a');
     link2.href="javascript: id_youtube_plugin.id_add_youtube_embed_code();";
     IDReplaceHtml(link2, "&lt;span&gt;&lt;/span&gt;&lt;span class='idc-r'&gt;Embed Video&lt;/span&gt;");
     link2.className="idc-btn_s idc-disablestyles";
     link2.style.cssFloat = 'right';

     showMsgBox('Embed a YouTube Video', '&lt;p&gt;Enter the video URL to embed below:&lt;/p&gt;&lt;input type="text" id="txtYouTubeURL"/&gt;', 0, null, link2);
};

id_youtube_plugin.id_add_youtube_embed_code = function() {
     /* Grab the url and identify the target textbox */
     var vidUrl = $id('txtYouTubeURL').value;

     /* make sure we add the embed code to the right textbox ( a reply or a new comment) */
     if(id_youtube_plugin.youtube_posted_from == 0)
          var textBox = $id('IDCommentNewThreadText');
     else
          var textBox = $id('txtComment');

     /* Check for valid match */
     var regex=/http:\/\/([a-zA-Z0-9]+\.)?youtube\.com\/watch\?v=(.*)/ig;
     var m=regex.exec(vidUrl);

     /* If there is a match */
     if(m &amp;&amp; m.length&gt;2) {
          /* If no comment text has been entered yet be sure to clear the default stuff */
          if(textBox.value=='Enter text right here!') {
               textBox.value = '';
               textBox.style.color = 'black';
          }

          /* Add the embed code to the textbox */
          textBox.value += " + " " + vidUrl + " youtube]";

          /* Hide the popup box */
          hideMsgBox();

          /* reset the regex */
          regex.lastIndex=0;

          /* Give focus to the text box */
          textBox.focus();
     }
     else
          /* Failed to match the url */
          alert('Unable to parse that url');
};

/* Disable the edit button for any comments that have a video */
id_youtube_plugin.id_youtube_disable_edit_buttons = function() {
     for(objElem in id_youtube_plugin.youtube_disabled_edit_ids) {
          if($id('IDCommentPostReplyLinkEdit'+id_youtube_plugin.youtube_disabled_edit_ids[objElem]))
          $id('IDCommentPostReplyLinkEdit'+id_youtube_plugin.youtube_disabled_edit_ids[objElem]).style.display = 'none';
     }
};

id_youtube_plugin.id_youtube_embed_replace = function(args) {
     var text = args['text'];

     //Check for valid match
     var youtube_regex=/\/ig;
     var m = youtube_regex.exec(text);

     //If there is a match
     if(m &amp;&amp; m.length&gt;1) {
          /* add the IntenseDebate commentid to the array of comments to disable editing for */
          id_youtube_plugin.youtube_disabled_edit_ids[id_youtube_plugin.youtube_disabled_edit_ids.length] = args['commentid'];

          /* reset the regex */
          youtube_regex.lastIndex=0;

          /* return the youtube div (where the video will go */
          return text.replace(youtube_regex, '&lt;div class="idc-video_youtube"&gt;&lt;object width="480" height="295"&gt;&lt;param name="movie" value="http://www.youtube.com/v/'+m[1]+'&amp;hl=en&amp;fs=1&amp;rel=0"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt;&lt;param name="allowscriptaccess" value="always"&gt;&lt;/param&gt;&lt;embed src="http://www.youtube.com/v/'+m[1]+'&amp;hl=en&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"&gt;&lt;/embed&gt;&lt;/object&gt;&lt;/div&gt;');
     }
     else {
          /* reset the regex */
          youtube_regex.lastIndex=0;
          return text;
     }
};

/* add filter to swap embed code */
id_add_filter('comment_text_load', id_youtube_plugin.id_youtube_embed_replace);
id_add_action('idcomments_func_load',id_youtube_plugin.id_add_youtube_button); /* add youtube button on load */
id_add_action('user_login',id_youtube_plugin.id_youtube_disable_edit_buttons); /* disable edit buttons on login */
id_add_action('comment_post',id_youtube_plugin.id_youtube_disable_edit_buttons); /* disable edit buttons on comment post (for new comments w/ YouTube videos) */</pre>

AddToAny Share Button for Posts↑ Table of Contents ↑

<pre>
var id_addtoany_posts_plugin = {};


// Initiate AddToAny drop-down(s)
id_addtoany_posts_plugin.load_addtoany_js = function() {	
	/* AddToAny globals */
	a2a_linkname = document.title;
	a2a_linkurl = location.href;
	
	var s = document.createElement('script');
	s.src = "http://static.addtoany.com/menu/page.js";
	document.getElementsByTagName('head')[0].appendChild(s);
};


// Insert AddToAny button below each comment
id_addtoany_posts_plugin.insert_share_button = function() {
	var container = document.getElementById('idc-container');
	var button_cont = document.createElement("div"),
		button_link = document.createElement("a"),
		button_image = document.createElement("img");
	
	button_cont.style.display = "block";
	button_cont.style.margin = "15px 0";
	
	button_link.className = "a2a_dd";
	button_link.href = "http://www.addtoany.com/share_save";
	
	button_image.src = "http://static.addtoany.com/buttons/share_save_171_16.png";
	button_image.width = 171;
	button_image.height = 16;
	button_image.border = 0;
	
	button_link.appendChild(button_image);
	button_cont.appendChild(button_link);
	
	container.insertBefore( button_cont, container.firstChild );
	container.insertBefore( button_cont, container.firstChild );
	
	/* Initiate drop-down */
	id_addtoany_posts_plugin.load_addtoany_js();
};


// IntenseDebate Filters
id_add_action('idcomments_init', id_addtoany_posts_plugin.insert_share_button);
</pre>

AddToAny Share Button for Comments↑ Table of Contents ↑

<pre>
var id_addtoany_plugin = {};
id_addtoany_plugin.comment_ids = [];
id_addtoany_plugin.addtoany_script_loaded = false;

// Return comment IDs as they appear in DOM (modified getElementsByClass)
id_addtoany_plugin.get_comment_ids = function (className) {
	var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
	var elm = document.getElementById('idc-cover'); // Assumed idc-cover
	var elements = elm.getElementsByTagName('div'); // Assumed DIV
	var returnElements = [];
	var current;
	var length = elements.length;
	for(var i=0; i<length; i++){
		current = elements[i];
		if(testClass.test(current.className)){
			returnElements.push(current.id); // Set element ID
		}
	}
	return returnElements; // Return element IDs
}

// Detect external script onLoad
id_addtoany_plugin.load_external_js = function (src, test, callback) {
	var s = document.createElement('script');
	s.src = src;
	document.getElementsByTagName('head')[0].appendChild(s);
	
	var callbackTimer = setInterval(function() {
	var call = false;
	try {
	  call = test.call();
	} catch (e) {}
	
	if (call) {
	  clearInterval(callbackTimer);
	  callback.call();
	}
	}, 100);
};

// Initiate AddToAny drop-down(s)
id_addtoany_plugin.load_addtoany_js = function() {
	a2a_linkname = document.title; // AddToAny global
	var base_location = location.href.split('#')[0] + '#IDComment';
	
	// Additional drop-downs: set location, call a2a_init
	if ( id_addtoany_plugin.addtoany_script_loaded ) {
		var num_ids = id_addtoany_plugin.comment_ids.length;
		for(var i = 1; i < num_ids; i++) {
			a2a_linkurl = base_location + id_addtoany_plugin.comment_ids[i]; // AddToAny global
			a2a_init("page");
		}
	}
	// First drop-down, set location, load AddToAny script (which also calls a2a_init)
	else {
		// Set all comment IDs
		id_addtoany_plugin.comment_ids = id_addtoany_plugin.get_comment_ids('idc-c');
		
		id_addtoany_plugin.addtoany_script_loaded = true;
		a2a_linkurl = base_location + id_addtoany_plugin.comment_ids[0]; // AddToAny global
		id_addtoany_plugin.load_external_js('http://static.addtoany.com/menu/page.js',
			function(){ return (typeof window['a2apage_init'] != 'undefined') },
			function(){ id_addtoany_plugin.load_addtoany_js() }
		);
	}
};


// Insert AddToAny button below each comment
id_addtoany_plugin.insert_share_button = function(args) {
	var comment_text = args['text'],
		comment_id = args['commentid'];
	
	// Add the IntenseDebate commentid to the array of comment IDs
	//id_addtoany_plugin.comment_ids[id_addtoany_plugin.comment_ids.length] = comment_id;

	return comment_text+'&lt;div style="display:block;margin:6px 0 0"&gt;&lt;a class="a2a_dd" href="http://www.addtoany.com/share_save"&gt;&lt;img src="http://static.addtoany.com/buttons/share_save_171_16.png" width="171" height="16" border="0" alt="Share/Save/Bookmark"/&gt;&lt;/a&gt;&lt;/div&gt;';	 
};


// IntenseDebate Filters
id_add_filter('comment_text_load', id_addtoany_plugin.insert_share_button); // Should ideally call our function in the order of comments as they appear in the DOM
id_add_action('idcomments_func_load', id_addtoany_plugin.load_addtoany_js);
</pre>

Hyves Tip↑ Table of Contents ↑

<pre>
var id_hyvestip_posts_plugin = {};

id_hyvestip_posts_plugin.insert_hyves_button = function() {
	
// Declare values

	var container = document.getElementById('idc-container');
	var hyvesUrl = "http://www.hyves.nl/hyvesconnect/smartbutton?type=11&category=12&rating=5&body=";
	var hyvesCont = document.createElement("div");
	var hyvesLink = document.createElement("a");

// Set classname for container

	hyvesCont.className = "idc-hyves-tip";
	hyvesCont.style.height = "32px";
	hyvesCont.style.float = "right";

// Add location for link
// Set background and styles

	hyvesLink.href = hyvesUrl + document.location.href + "&title=" + document.title;
	hyvesLink.target = "blank";
	hyvesLink.innerHTML = "Plaats als tip op Hyves!";
	hyvesLink.style.background = 'url(http://cache.hyves-static.net/images/logo/app/icon_24.png) no-repeat left';
	hyvesLink.style.padding = "10px 0 10px 28px !important";

// hierarchy of elements

	hyvesCont.appendChild(hyvesLink);

	container.insertBefore( hyvesCont, container.firstChild );
};

// Insert to IntenseDebate

id_add_action('idcomments_init', id_hyvestip_posts_plugin.insert_hyves_button);
</pre>

After the Deadline - Spell check for Comments↑ Table of Contents ↑

<pre>
var id_AtD_plugin = {};

id_AtD_plugin.add_button = function()
{
   id_add_plugin_button('javascript:id_AtD_plugin.check_writing(0)', 'javascript:id_AtD_plugin.check_writing(1)', 'http://www.polishmywriting.com/atd_jquery/images/atdbuttontr.gif', 'Proofread Comment w/ After the Deadline', 'AtD', 'Check Spelling');
};

id_AtD_plugin.restore_edit_comment = function(button_selector, field_id)
{
   AtD.remove(field_id);

   var style = jQuery('#' + field_id).attr('style');
   jQuery('#' + field_id).replaceWith('&lt;textarea class="idc-text_noresize" id="' + field_id +'"&gt;' + jQuery('#' + field_id).html() + '&lt;/textarea&gt;');
   jQuery('#' + field_id).attr('style', style);

   jQuery(button_selector).text('Check Spelling');
};

id_AtD_plugin.check_writing = function(field)
{
   /* Choose your destiny: the main comment box or the reply comment box */

   var field_id, button_selector;

   if (field == 0)
   {
      field_id = 'IDCommentNewThreadText';
      button_selector = '#idc-plugin-buttons-new-thread > li > a > img[src="http://www.polishmywriting.com/atd_jquery/images/atdbuttontr.gif"] + span';
   }
   else
   {
      field_id = 'txtComment';
      button_selector = '#idc-plugin-buttons-reply > li > a > img[src="http://www.polishmywriting.com/atd_jquery/images/atdbuttontr.gif"] + span';
   }

   /* restore or spellcheck the field... it all depends on the text of the AtD button associated with the form */

   if (jQuery(button_selector).text() == 'Edit Comment')
   {                               
      id_AtD_plugin.restore_edit_comment(button_selector, field_id); 
   } 
   else 
   {
      jQuery(button_selector).text('Edit Comment');

      var style = jQuery('#' + field_id).attr('style');
      jQuery('#' + field_id).replaceWith('&lt;div class="idc-text_noresize" id="' + field_id + '"&gt;' + jQuery('#' + field_id).val() + '&lt;/div&gt;');
      jQuery('#' + field_id).attr('style', style);

      AtD.checkCrossAJAX(field_id, 
      {
         success : function(errorCount) 
         {
            if (errorCount == 0)
            {
               alert("No writing errors were found");
            }
            id_AtD_plugin.restore_edit_comment(button_selector, field_id); 
         },

         error : function(reason)
         {
            alert("There was an error communicating with the spell checking service.\n\n" + reason);
         }
      });
   }
};

id_AtD_plugin.fix_form = function(text)
{
   /* this is a hack that exists to remove the AtD markup and turn the preview DIV back into a textarea if the user hits submit while in the middle of spellchecking. */

   if (text != undefined)
   {
      return text;
   }
   else if (jQuery('#idc-plugin-buttons-reply > li > a > img[src="http://www.polishmywriting.com/atd_jquery/images/atdbuttontr.gif"] + span').text() == 'Edit Comment')
   {
      id_AtD_plugin.restore_edit_comment('#idc-plugin-buttons-reply > li > a > img[src="http://www.polishmywriting.com/atd_jquery/images/atdbuttontr.gif"] + span', 'txtComment');

      setTimeout(function() 
      { 
         jQuery('#IDCommentNewThreadText').css({ color: 'black' }); /* this is on purpose, the main one gets set to grey for reasons unknown to me. */
         jQuery('#txtComment').css({ color: 'black' });
      }, 501); 

      return jQuery('#txtComment').val();
   }
   else if (jQuery('#idc-plugin-buttons-new-thread > li > a > img[src="http://www.polishmywriting.com/atd_jquery/images/atdbuttontr.gif"] + span').text() == 'Edit Comment')
   {
      id_AtD_plugin.restore_edit_comment('#idc-plugin-buttons-new-thread > li > a > img[src="http://www.polishmywriting.com/atd_jquery/images/atdbuttontr.gif"] + span', 'IDCommentNewThreadText');
      setTimeout(function() { jQuery('#IDCommentNewThreadText').css({ color: 'black' }); }, 501);
      return jQuery('#IDCommentNewThreadText').val();
   }
   else
   {
      return "";
   }
};

id_AtD_plugin.init_plugin = function()
{
   var atd_api = ['atd_jquery/css/atd.css', 'atd_jquery/scripts/jquery.atd.js', 'atd_jquery/scripts/csshttprequest.js', 'atd_id/id.css'];

   /* load some helpful JS and CSS for AtD/ID */
   for (var i = 0; i < atd_api.length; i++)
   {
      if (atd_api[i].substr(atd_api[i].length - 4) == '.css')
      {
         s = document.createElement('link')
         s.rel = 'stylesheet';
         s.type = 'text/css';
         s.media = 'screen';
         s.href = 'http://www.polishmywriting.com/' + atd_api[i];
         document.getElementsByTagName('head')[0].appendChild(s);
      }
      else if (atd_api[i].substr(atd_api[i].length - 3) == '.js')
      {
         s = document.createElement('script')
         s.src = 'http://www.polishmywriting.com/' + atd_api[i];
         document.getElementsByTagName('head')[0].appendChild(s);
      }
   }

   /* load jQuery if it isn't already loaded */
   if (typeof jQuery == 'undefined')
   {
      s = document.createElement('script');
      s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js';
      document.getElementsByTagName('head')[0].appendChild(s);
   }
};

id_add_filter('pre_comment_text', id_AtD_plugin.fix_form, 0);
id_add_action('idcomments_func_load', id_AtD_plugin.init_plugin);
id_add_action('idcomments_func_load', id_AtD_plugin.add_button);

</pre>

Facebook-share↑ Table of Contents ↑

<pre>
function add_fb_share() {
var fb_link = document.createElement('a');
fb_link.href = 'http://www.facebook.com/share.php?u=' + window.location.href;
fb_link.className = 'fb_share_button';
fb_link.onclick = 'return fbs_click()';
fb_link.target = '_blank';
fb_link.style.textDecoration = 'none';
fb_link.innerHTML = 'Share';
fb_link.style.cssFloat = 'right';
document.getElementById('idc-container').insertBefore(fb_link, document.getElementById('idc-container').firstChild);
}

function fbs_click() {
u=location.href;
t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
id_add_action( 'idcomments_func_load', add_fb_share);
</pre>

Tags: Plugins API — Can't find your answer here? Let us know.

Last modified: January 11, 2012 by Michael