Listed in topics: Developers, Documentation

Plugin Resources »Plugin Examples

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

Quick Links:

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: — Can't find your answer here? Let us know.

Last modified: January 11, 2012 by Michael

Help us improve:

We're always looking to improve our documentation. If this page didn't answer your question or left you wanting more, let us know! We love hearing your feedback. For support, please use the forums or contact support form. Thanks!

You must be logged in to post a comment.