browse by category or date

I was reading Wikipedia on social bookmarking which lead me to this social-bookmarking-button-generator. It’s really useful so I use it immediately. After selecting all website, I download the zipped file. I extract and upload the images to the server (at “/images” folder) and then i modify ‘single.php’ by copy-paste and modify the content into

single.php

<?php
	$current_url = 'http://'.$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
	$current_url = str_replace(":", "%3A", $current_url);
	$current_url = str_replace("/", "%2F", $current_url);
	$current_url = str_replace("&", "%26", $current_url);
	$current_title = urlencode(the_title("","",FALSE));
?>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href='http://digg.com/submit?phase=2&url=<?php 
echo $current_url; ?>&title=<?php  echo $current_title; ?>' target='_self'>
<img border='0' src='/images/digg.png?x61720' alt='Digg This' title='Digg This' /></a></td>

<td><a href='http://del.icio.us/post?url=<?php echo $current_url; ?>&title=<?php 
echo $current_title; ?>' target='_self'><img border='0' 
src='/images/delicious.png?x61720' alt='del.icio.us' title='del.icio.us' /></a></td>

<td><a href='http://reddit.com/submit?url=<?php 
echo $current_url; ?>&title=<?php echo $current_title; ?>' 
 target='_self'><img border='0' src='/images/reddit.png?x61720' alt='Reddit' title='Reddit' /></a></td>

<td><a href='http://www.spurl.net/spurl.php?url=<?php 
echo $current_url; ?>&title=<?php echo $current_title; ?>' target='_self'>
<img border='0' src='/images/spurl.png?x61720' alt='Spurl' title='Spurl' /></a></td>

<td><a href='http://www.furl.net/storeIt.jsp?u=<?php 
 echo $current_url; ?>&t=<?php echo $current_title; ?>' target='_self'>
<img border='0' src='/images/furl.png?x61720' alt='Furl' title='Furl' /></a></td>

<td><a href='http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=<?php 
echo $current_url; ?>&Title=<?php echo $current_title; ?>' target='_self'>
<img border='0' src='/images/blinklist.png?x61720' alt='BlinkList' title='BlinkList' /></a></td>

<td><a href='http://ma.gnolia.com/bookmarklet/add?url=<?php 
echo $current_url; ?>&title=<?php echo $current_title; ?>' target='_self'>
<img border='0' src='/images/magnolia.png?x61720' alt='ma.gnolia.com' title='ma.gnolia.com' /></a></td>

<td><a href='http://www.newsvine.com/_tools/seed&save?u=<?php 
echo $current_url; ?>&h=<?php echo $current_title; ?>' target='_self'>
<img border='0' src='/images/newsvine.png?x61720' alt='Newsvine' title='Newsvine' /></a></td>

<td><a href='http://www.simpy.com/simpy/LinkAdd.do?href=<?php 
echo $current_url; ?>&title=<?php echo $current_title; ?>' target='_self'>
<img border='0' src='/images/simpy.png?x61720' alt='Simpy' title='Simpy' /></a></td>

<td><a href='http://technorati.com/faves?add=<?php 
echo $current_url; ?>' target='_self'><img border='0' src='/images/technorati.png?x61720' 
alt='Technorati' title='Technorati' /></a></td>

<td><a href='http://cgi.fark.com/cgi/fark/edit.pl?new_url=<?php 
 echo $current_url; ?>&new_comment=<?php echo $current_title; 
?>&linktype=Misc' target='_self'><img border='0' src='/images/fark.png?x61720' alt='Fark' 
title='Fark' /></a></td>

<td><a href='http://www.blinkbits.com/bookmarklets/save.php?v=1&source_url=<?php
echo $current_url; ?>&title=<?php echo $current_title; ?>' target='_self'>
lt;img border='0' src='/images/blinkbits.png?x61720' alt='Blinkbits' title='Blinkbits' /></a></td>

<td><a href='http://tailrank.com/share/?text=&link_href=<?php 
echo $current_url; ?>&title=<?php echo $current_title; ?>' target='_self'>
<img border='0' src='/images/tailrank.png?x61720' alt='TailRank' title='TailRank' /></a></td>

<td><a href='http://www.netvouz.com/action/submitBookmark?url=<?php 
echo $current_url; ?>&title=<?php echo $current_title; ?>&description=<?php 
echo $current_title; ?>' target='_self'><img border='0' src='/images/netvouz.png?x61720' 
alt='Netvouz' title='Netvouz' /></a></td>

<td><a href='http://www.mister-wong.de/index.php?action=addurl&bm_url=<?php
echo $current_url; ?>' target='_self'><img border='0' src='/images/mrwong.png?x61720' 
alt='Mr. Wong' title='Mr. Wong' /></a></td>

<td><a href='http://myweb2.search.yahoo.com/myresults/bookmarklet?u=<?php 
echo $current_url; ?>&t=<?php echo $current_title; ?>' target='_self'>
<img border='0' src='/images/yahoomyweb.png?x61720' alt='YahooMyWeb' title='YahooMyWeb' /></a></td>

<td><a href='http://blogmarks.net/my/new.php?mini=1&simple=1&url=<?php 
echo $current_url; ?>&title=<?php echo $current_title; ?>' target='_self'>
<img border='0' src='/images/blogmarks.png?x61720' alt='Blogmarks' title='Blogmarks' /></a></td>

</tr>
</table>

Have fun with yours =)

About Hardono

Hi, I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

I was roaming at digg when i stumble upon this page:CSS+Javascript power. Fancy menu. Inside, i was amazed to see the way the snippets presented. In an expandable box. You can even see the box expanding line by line.

If you see my post yesterday, I tried my best to reproduce the same effect. But I failed.

To successfully create the expandable box, modify the following files of your active WordPress template/theme by adding the snippet:
style.css

.codediv
{
	height:21px; width:470px;
	overflow:hidden;
	border: #333333 thin solid;
	font-size: 11px;
	display: block;
	background-color: #fff;
}
.codeclicker
{
	cursor:pointer;
}


header.php

<script language="javascript" type="text/javascript" src="<?php bloginfo('wpurl') ?>/js/behavior.js" ></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('wpurl') ?>/js/selector.js" ></script>
<script language="javascript" type="text/javascript">
var myrules = {
	'.codeclicker' : {
		onclick : function() {
			//alert(this.parentNode.tagName);
			var o = this.parentNode;
			if (o.style.overflow == 'hidden') {
				o.style.height = '100%';
				o.style.overflow = 'scroll';
			}
			else {
				o.style.height = '21px';
				o.style.overflow = 'hidden';
			}
		}
	}
};
Behavior.register(myrules);
</script>

Create a folder called “js” on your WordPress installation folder and create the following files on that folder:


selector.js

/* document.getElementsBySelector(selector)
- returns an array of element objects from the current document
matching the CSS selector. Selectors can contain element names,
class names and ids and can be nested. For example:elements = document.getElementsBySelect('div#main p a.external')
Will return an array of all 'a' elements with 'external' in their
class attribute that are contained inside 'p' elements that are
contained inside the 'div' element which has id="main"
New in version 0.4: Support for CSS2 and CSS3 attribute selectors:
See http://www.w3.org/TR/css3-selectors/#attribute-selectors
Version 0.4 - Simon Willison, March 25th 2003
-- Works in Phoenix 0.5, Mozilla 1.3, Opera 7, Internet Explorer 6, Internet Explorer 5 on Windows
-- Opera 7 fails
*/

function getAllChildren(e) {
	// Returns all children of element. Workaround required for IE5/Windows. Ugh.
	return e.all ? e.all : e.getElementsByTagName('*');
}

document.getElementsBySelector = function(selector) {
	// Attempt to fail gracefully in lesser browsers
	if (!document.getElementsByTagName) {
		return new Array();
	}
	
	// Split selector in to tokens
	var tokens = selector.split(' ');
	var currentContext = new Array(document);
	for (var i = 0; i < tokens.length; i++) {
		token = tokens[i].replace(/^s+/,'').replace(/s+$/,'');
		if (token.indexOf('#') > -1) {
			// Token is an ID selector
			var bits = token.split('#');
			var tagName = bits[0];
			var id = bits[1];
			var element = document.getElementById(id);
			if (tagName && element.nodeName.toLowerCase() != tagName) {
				// tag with that ID not found, return false
				return new Array();
			}
			
			// Set currentContext to contain just this element
			currentContext = new Array(element);
			continue; // Skip to next token
		}
		if (token.indexOf('.') > -1) {
			// Token contains a class selector
			var bits = token.split('.');
			var tagName = bits[0];
			var className = bits[1];
			if (!tagName) {
				tagName = '*';
			}
			
			// Get elements matching tag, filter them for class selector
			var found = new Array;
			var foundCount = 0;
			for (var h = 0; h < currentContext.length; h++) {
				var elements;
				if (tagName == '*') {
					elements = getAllChildren(currentContext[h]);
				} else {
					elements = currentContext[h].getElementsByTagName(tagName);
				}
				
				for (var j = 0; j < elements.length; j++) {
					found[foundCount++] = elements[j];
				}
			}
			currentContext = new Array();
			var currentContextIndex = 0;
			
			for (var k = 0; k < found.length; k++) {
				if (found[k].className && found[k].className.match(new RegExp('b'+className+'b'))) {
					currentContext[currentContextIndex++] = found[k];
				}
			}
			continue; // Skip to next token
		}
		// Code to deal with attribute selectors
		if (token.match(/^(w*)[(w+)([=~|^$*]?)=?"?([^]"]*)"?]$/)) {
			var tagName = RegExp.$1;
			var attrName = RegExp.$2;
			var attrOperator = RegExp.$3;
			var attrValue = RegExp.$4;
			if (!tagName) {
				tagName = '*';
			}
			// Grab all of the tagName elements within current context
			var found = new Array;
			var foundCount = 0;
			for (var h = 0; h < currentContext.length; h++) {
				var elements;
				if (tagName == '*') {
					elements = getAllChildren(currentContext[h]);
				} else {
					elements = currentContext[h].getElementsByTagName(tagName);
				}
				for (var j = 0; j < elements.length; j++) {
					found[foundCount++] = elements[j];
				}
			}
			currentContext = new Array();
			var currentContextIndex = 0;
			var checkFunction; // This function will be used to filter the elements
			switch (attrOperator) {
				case '=': // Equality
					checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); };
					break;
				case '~': // Match one of space seperated words
					checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('b'+attrValue+'b'))); };
					break;
				case '|': // Match start with value followed by optional hyphen
					checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); };
					break;
				case '^': // Match starts with value
					checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); };
					break;
				case '$': // Match ends with value - fails with "Warning" in Opera 7
					checkFunction = function(e) {
						return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); 
					};
					break;
				case '*': // Match ends with value
					checkFunction = function(e) { 
						return (e.getAttribute(attrName).indexOf(attrValue) > -1); 
					};
					break;
				default :
					// Just test for existence of attribute
					checkFunction = function(e) { return e.getAttribute(attrName); };
			}
			currentContext = new Array();
			var currentContextIndex = 0;
			for (var k = 0; k < found.length; k++) {
				if (checkFunction(found[k])) {
					currentContext[currentContextIndex++] = found[k];
				}
			}
			// alert('Attribute Selector: '+tagName+' '+attrName+' '+attrOperator+' '+attrValue);
			continue; // Skip to next token
		}
		
		// If we get here, token is JUST an element (not a class or ID selector)
		tagName = token;
		var found = new Array();
		var foundCount = 0;
		for (var h = 0; h < currentContext.length; h++) {
			var elements = currentContext[h].getElementsByTagName(tagName);
			for (var j = 0; j < elements.length; j++) {
				found[foundCount++] = elements[j];
			}
		}
		
		currentContext = found;
	}
	return currentContext;	
}

/* That revolting regular expression explained
/^(w+)[(w+)([=~|^$*]?)=?"?([^]"]*)"?]$/
---/  ---/-------------/    -------/
|      |         |               |
|      |         |           The value
|      |    ~,|,^,$,* or =
|   Attribute
Tag
*/

behavior.js

// behavior.js - by Dave Herman
// Copyright (C) 2005 by Dave Herman
//
// Based on behaviour.js by Ben Nolan, June 2005
// and getElementBySelector.js by Simon Willison, 2004.
//
// This library is free software; you can redistribute it and/or modify it
// under the terms of the GNU Lesser General Public License as published by
// the Free Software Foundation; either version 2.1 of the License, or (at
// your option) any later version.
//
// This library is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
// FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Lesser General Public
// License for more details.
//
// You should have received a copy of the GNU Lesser General Public License
// along with this library; if not, write to the Free Software Foundation,
// Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
// =============================================================================
// Class: HandlerSet
// =============================================================================

function HandlerSet() {
	this.clearHandlers();
}

HandlerSet.prototype = {
	addHandler : function(f, key) {
		key = key || this.uniqueID++;
		this.installedHandlers[key] = f;
		return key;
	},
	removeHandler : function(key) {
		delete this.installedHandlers[key];
	},
	clearHandlers : function() {
		this.installedHandlers = { };
		this.uniqueID = 0;
	},
	replaceHandlers : function(f, key) {
		clearHandlers();
		return addHandler(f, key);
	},
	applyAll : function(object, arguments) {
		for (var handler in this.installedHandlers) {
			this.installedHandlers[handler].apply(object, arguments);
		}
	},
	debug : function() {
		var str = "";
		for (var p in this.installedHandlers) {
			str += p + " => " + this.installedHandlers[p] + "n";
		}
		alert(str);
	}
};

// =============================================================================
// Function Class: EventHandler
// =============================================================================
function isEventHandler(x) {
	return (typeof x == 'function' && 
		x.handlers &&
		x.handlers.constructor == HandlerSet);
}

function makeEventHandler(original) {
	var handlers = new HandlerSet();
	if (typeof original == 'function') {
		handlers.addHandler(original);
	}
	
	// The event handler is a function, so it can be used with the DOM.
	// But when it's called, we apply all the handlers in the set.
	var result = function() {
		handlers.applyAll(this, arguments);
	};
	
	// We also expose its handler set so we can get at it later.
	result.handlers = handlers;
	return result;
}

// =============================================================================
// Module: Behavior
// =============================================================================
var Behavior = {
	registry : new Array,
	register : function(sheet) {
		Behavior.registry.push(sheet);
	},
	registerEventHandlers : function(element, handlers) {
		for (var event in handlers) {
			if (!isEventHandler(element[event])) {
				element[event] = makeEventHandler(element[event]);
			}
			element[event].handlers.addHandler(handlers[event]);
		}
	},
	apply : function() {
		for (var i = 0; i < Behavior.registry.length; i++) {
			var sheet = Behavior.registry[i];
			for (var selector in sheet) {
				var list = document.getElementsBySelector(selector);
				if (!list) {
					continue;
				}
				for (var j = 0; j < list.length; j++) {
					Behavior.registerEventHandlers(list[j], sheet[selector]);
				}
			}
		}
	},
	addLoadHandler : function(handler) {
		var oldHandler = window.onload;
		if (typeof oldHandler != 'function') {
			window.onload = handler;
		}
		else {
			window.onload = function() {
				oldHandler();
				handler();
			};
		}
	}
};

Behavior.addLoadHandler(function() { Behavior.apply(); });


To use create the snippets use the following structure:

<pre class="codediv"><img src="/images/codeclicker.gif?x61720" class="codeclicker" border="0" />
<!-- put your snippet content here -->
</pre>

Don’t forget to create the “codeclicker.gif” that will be put on folder “images” in your WordPress installation folder (use bloginfo(‘wpurl’); ) the image height should be 20px (if more the image will be hidden since its overflow the “pre” tag)


Note:
I tried to add changing the background color using CSS “background-color = “#bbbbbb”;” on the onclick event handler, but somehow it prevents the script running. Any idea? I also have yet to be able to slowly scroll the snippet box. Again, any idea??
Thank you for reading. Critics and comments are welcome 🙂

About Hardono

Hi, I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

Today I will share you my experience of Integrating Chat module to an existing Web Application. The client requires us to add a chat module to the .NET Web Application we developed for them earlier. We tried the AJAX-based chat system, phpFreeChat. During the test with 100+ users online, the server’s load was always 100%, but the clients was unable to communicate due to very high delay time.

So we decided to use IRC as text chatting is the only required means of communication. If in the future they demands voice/video chatting, that will become another problem to research.

This solution is applicable when the following situation met:

  1. You have permission to install programs and modify filesystem
  2. You have permission to open port in the firewall of server’s network
  3. You already have the user database

Our Solution will consist of two steps:

  1. Setting up the IRC Server
  2. Setting the Applet IRC Client

1. Setting up the Internet Relay Chat (IRC) Server

On the server side, we will add IRC Server. The reason why we use IRC for the chat is that it is simple and it has all the functionalities that we expect from a text chatting.

There are a lot of solutions offered for IRC Server. On the Windows platform, most of them are commercial and only a few are free. As on the linux platform, all are open-source, as always.

So on this solution the IRC Server that we will use depends on your server operating system. If you are using Windows, we recommend to use:

  1. IRCd. This IRC server is originally from UNIX and compiled for Windows x86 environment. binary: Ircd binary Source: ircd source. These files was taken from here: source, binary. I just found out that the ircd.exe of this file is reported as backdoor Trojan by Symantec Antivirus. Do not use this!!
  2. Beware IRCd. Get it from original location or here.

I will only explain the IRC Server installation on Windows platform since I believe the Linux/Unix users are likely did not require any explanation. To install “beware IRCd”, follow these steps:

  1. download the binary file
  2. extract it to a folder (e.q. C:BIRCD)
  3. edit the ircd.conf
  4. edit birc.ini (if BIRCD will be installed as Windows Service)
  5. to start BIRCD by double-click the bircd.exe. You will see that nothing is happen, but the program is actually already running. Check you Task Manager to confirm.
  6. to install bird as Windows Service, start command prompt, change directory to BIRCD installation folder (e.q. C:BIRCD) and enter “bircd install” without quote.
  7. to start the service enter “net start bewareircd” on the command prompt. To stop the service type “net stop bewareircd”
  8. to uninstall the service enter “bircd uninstall”

The configuration files are quite self-explained. Please read through example.conf to understand the settings that can be used in ircd.conf. As the bircd.ini, there are comments above each value of the configuration.

2. Setting up the Internet Relay Chat (IRC) Client

Client that will be used here must be able to be integrated into the existing Web Application. Java Applet should suit this requirement best. Many IRC Client Applet available freely and commercially on the internet. Just Google for IRC Applet to get the list of available applet.

Of all Applet that is available on the Internet, we fall for PJIRC. PJIRC is an open source, free, simple and highly configurable. The following steps will help you to install the PJIRC:

  1. Download the binary of PJIRC from the original or here
  2. on the server, put all the files into a folder (e.q. /IRC)
  3. Modify the page that will host the Applet.

On our server, we created an ASPX (or HTML or JSP or CFM, depends on your Web Application) and called it irc.aspx. We add these lines

<html>
<% 'Initiate any variables %>
<!-- #include virtual="/link_to_your_header_files_or_session_handlers" -->
<body>
<hr>
<applet code="IRCApplet.class" archive="irc.jar,pixx.jar"
width="1000" height="700">

<param name="CABINETS" value="irc.cab,securedirc.cab,pixx.cab">
<param name="pixx:nicklistwidth" value="250">

<param name="nick" value="<%=session("_user_unique_id")%>">
<!-- obtain the nick from Session -->

<param name="alternatenick" value="<%=session("_user_unique_id")%>???">
<!-- in case somebody login using your nick -->

<param name="fullname" value="<%=session("_user_full_name")%>">
<!-- obtain the full name from Session -->

<param name="host" value="_address_of_your_irc_server">
<param name="port" value="6667">
<param name="gui" value="pixx">
<param name="pixx:lngextension" value="txt">
<param name="config:N" value="true">
<param name="lngextension" value="txt">
<param name="quitmessage" value="PJIRC forever!">

<param name="command1" value="/join #Channel1">
<!-- Command that automatically executed once the client connected -->

<param name="asl" value="true">
<param name="useinfo" value="true">

<param name="pixx:nickfield" value="false">
<!-- hide the text box to change the nick -->

<param name="pixx:showstatus" value="false">
<!-- hide the status window -->

<param name="style:bitmapsmileys" value="true">
<param name="style:smiley1" value=":) img/sourire.gif">
<param name="style:smiley2" value=":-) img/sourire.gif">
<param name="style:smiley3" value=":-D img/content.gif">
<param name="style:smiley4" value=":d img/content.gif">
<param name="style:smiley5" value=":-O img/OH-2.gif">
<param name="style:smiley6" value=":o img/OH-1.gif">
<param name="style:smiley7" value=":-P img/langue.gif">
<param name="style:smiley8" value=":p img/langue.gif">
<param name="style:smiley9" value=";-) img/clin-oeuil.gif">
<param name="style:smiley10" value=";) img/clin-oeuil.gif">
<param name="style:smiley11" value=":-( img/triste.gif">
<param name="style:smiley12" value=":( img/triste.gif">
<param name="style:smiley13" value=":-| img/OH-3.gif">
<param name="style:smiley14" value=":| img/OH-3.gif">
<param name="style:smiley15" value=":'( img/pleure.gif">
<param name="style:smiley16" value=":$ img/rouge.gif">
<param name="style:smiley17" value=":-$ img/rouge.gif">
<param name="style:smiley18" value="(H) img/cool.gif">
<param name="style:smiley19" value="(h) img/cool.gif">
<param name="style:smiley20" value=":-@ img/enerve1.gif">
<param name="style:smiley21" value=":@ img/enerve2.gif">
<param name="style:smiley22" value=":-S img/roll-eyes.gif">
<param name="style:smiley23" value=":s img/roll-eyes.gif">
<param name="style:backgroundimage" value="true">
<param name="style:backgroundimage1" value="all all 0 background.gif">
<param name="style:sourcefontrule1" value="all all Serif 12">
<param name="style:floatingasl" value="true">
<param name="pixx:timestamp" value="true">
<param name="pixx:highlight" value="true">
<param name="pixx:highlightnick" value="true">
<param name="pixx:styleselector" value="true">
<param name="pixx:setfontonstyle" value="true">
<param name="authorizedcommandlist" value="none+join">
</applet><hr></body></html>

Good luck with your implementation!

About Hardono

Hi, I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.