Technabled

SplinterNet Allows P2P Microblogging over Bluetooth

2013-01-27T13:24:00.000+05:30

SplinterNet is a new project that allows P2P microblogging over bluetooth to avoid government censorship. It's currently in beta and available only as an Android application. This server-less messaging is completely anonymous to prevent government retaliation. While you can send a SplinterNet message to your buddy via bluetooth, one can also post the message to the internet as well if one has access to internet. A post can contain text and image. Each screen has a "panic button" to quickly get out of the screen. Messages can be marked as important, too. Important posts are synced first. Website: https://github.com/megamattron/SplinterNetLicense: Open Source

QuickTip: How To Prevent Google Analytics From Tracking Your Visits in Wordpress

2011-12-04T08:03:00.001+05:30

Google Analytics is the web's most favorite tracking application used by millions. They are also rolling out real-time analytics. But if you're the admin of a site and you're testing several features of a site, you probably won't want to a track your visits. Here's how you can do that in Wordpress. Google Analytics' tracking code is inserted inside the <head> tag. So, you can restrict this insertion using the following codes in your theme's header.php file:


<?php
if(!current_user_can('edit_users')):
?>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX-X']);
  _gaq.push(['_setDomainName', 'domain.tld']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<?php endif; ?>

This is pretty simple: it checks whether the logged in user is admin. If not, it inserts the tracking codes. You can find more about Roles and Permissions in Wordpress. Note: Do change UA-XXXXXX-X and domain.tld with correct values.

Freebie: Social Port WordPress Plugin

2011-09-16T06:43:00.000+05:30

SocialPort is a social-media Wordpress plugin that lets readers easy access to social-media bookmarking sites. It's just like bookmarking buttons — but what makes it stand out is that it adds a fixed port containing all the links. No matter how lengthy your page is, SocialPort sticks to the page. To make it unobtrusive, I have added an option for the readers to hide the port. This happens to be my first ever WP plugin! So, it's probably simpler in the way it works.

Demo Download

Installation

The ZIP file contains social-port directory. Extract the directory and upload the entire directory to your plugins directory in wordpress installation. (The plugins directory is inside wp-content/ directory) Now, in your WordPress Dashboard, go to Plugins. You'd find Social Port appearing among the list of plugins. Just activate it clicking the link.

Admin Section

Once Social-port is installed, you can access the admin section inside your plugins menu in WordPress Dashboard.

The admin section comes with a host of options to control how Social Port acts

1. SocialPort comes in three vibrant colors. You can choose from Orange, Black and Blue.
2. You can decide on what text you'd like to show beside the buttons.
3. You can link the RSS button to your Feedburner feed address. You can leave it blank if you want to link to the default feed address.
4. The toggler can be positioned either at Bottom Right or at Bottom Left.
5. You can let readers open a new tab/window if they click the links. Leave it unchecked to open links in the same window/tab.

Removing Links

Social Port comes with links to 7 popular social-sharing sites. If you want to remove buttons of any of them, you can do so by changing the socialport.tpl file. You can find it inside the tpls directory.

The buttons are stacked this way:

<!--Twitter Button Start-->
<div class='social-port-button twitter'>
	<a href="http://twitter.com/home/?status=[+title+]+[+permalink+]" title='Share this on Twitter' [+target_window+]>Share on Twitter</a>
</div>
<!-- Twitter Button End -->


<!-- Stumbleupon Button Start -->
<div class='social-port-button stumbleupon'>
	<a href='http://stumbleupon.com/submit?url=[+permalink+]&title=[+title+]' title='Share this on StumbleUpon' [+target_window+]>Share on Stumbleupon</a>
</div>
<!-- Stumbleupon Button End -->

<!-- Facebook Button Start -->
<div class='social-port-button facebook'>
	<a href='http://facebook.com/share.php?u=[+permalink+]' title='Share with your friends on Facebook' [+target_window+]>Share on Facebook</a>
</div>
<!-- Facebook Button End -->

<!-- Digg Button Start -->
<div class='social-port-button digg'>
	<a href='http://digg.com/submit?phase=2&url=[+permalink+]&title=[+title+]' title='Share this on Digg' [+target_window+]>Share on Digg</a>
</div>
<!-- Digg Button End -->

<!-- Delicious Button Start -->
<div class='social-port-button delicious'>
	<a href='http://del.icio.us/post?url=[+permalink+]&title=[+title+]' title='Save this on Delicious' [+target_window+]>Share on Delicious</a>
</div>
<!-- Delicious Button End -->

<!-- Reddit Button Start -->
<div class='social-port-button reddit'>
	<a href='http://www.reddit.com/submit?url=[+permalink+]' title='Share this on Reddit' [+target_window+]>Share on Reddit</a>
</div>
<!-- Reddit Button End -->

<!-- LinkedIn Button Start -->
<div class='social-port-button linkedin'>
	<a href='http://www.linkedin.com/shareArticle?mini=true&url=[+permalink+]&title=[+title+]' title='Share this on Linkedin' [+target_window+]>Share on LinkedIn</a>
</div>
<!-- LinkedIn Button End -->

<!-- Feed Button Start -->
<div class='social-port-button feed'>
	<a href='[+feed_url+]' title='Grab the feed'>Grab the feed</a>
</div>
<!-- Feed Button End -->

So, for instance, if you'd like to remove the StumbleUpon button, you can remove the following lines:

<!-- Stumbleupon Button Start -->
<div class='social-port-button stumbleupon'>
	<a href='http://stumbleupon.com/submit?url=[+permalink+]&title=[+title+]' title='Share this on StumbleUpon' [+target_window+]>Share on Stumbleupon</a>
</div>
<!-- Stumbleupon Button End -->

Sources, Credits and Support

The icons are from here. Please use the comment section for issues related to this plugin. While I cannot guarantee full support, I would try my best to help you. Cheers!

HOW-TO: AJAX Search Suggestions in Input Fields

2011-08-23T21:41:00.002+05:30

Today we are going to create AJAX search suggestions inside input text fields. This is different from AJAX Auto-suggest or AJAX Live Search. The idea is simple — we are going to show the user suggestive terms as (s)he types. When the user hits the enter key, the suggestion is sent as the query. This feature was there in Google's search-box before they launched Google Instant search. (I recently added this nice feature on PulsePro's Admin Panel.) Let's build it together!

Demo Download

What we need

All we need is PHP 5 and a simple database table to search. For the purpose of this tutorial, let us create table called world. You can find the SQL for the table here at MySQL's site or download the source files of the tutorial. (If you're super beginner with MySQL, here's how you can set this up.) Note that the database is pretty big so it may take some time to execute the SQL commands.
There are three tables inside the world database. We only need the city table for this tutorial. The structure is like the following:

We are going to let the users search the city names. So, the Name field is our hero!

CSS Files and Structure

By the time we end this tutorial, the directory structure would be like this:

In index.php file, we add the following lines:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Search Suggest in Textfield</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='searchSuggest.js'></script>
<link rel='stylesheet' href='style.css'></link>
</head>
<body>
<div id='wrapper'>
<form action="http://google.com/" method='get'>
	<div class="infoWrapper">
		<div class="infoTitle">Search Cities</div>
		<div class="infoContent">
			<input type="text" id="redText" disabled="disabled" autocomplete="off" value="" class='text long'/>
			<input type="text" autocomplete="off" id="search" value="" name="q" class='text long search'/>
		</div>
	</div>
	<div class="infoWrapper">
		<div class="infoTitle"> </div>
		<div class="infoContent">
			<input type="submit" value='Google Search' id='search_button' />
		</div>
	</div>
</form>
</div>
</body>
</html>

This is fairly simple file. The only thing that needs attention is the presence of a disabled input element. We are going to place this disabled input field behind the text input where the user actually types. Also note that we have turned off autocomplete. This is to prevent any unwanted text suggestions that the browser may show.
But how on earth could we possibly put the disabled text field behind active text input? Well, the following CSS (inside style.css) will do the magic.

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

body {
font-size: 14px;
line-height:1.3em;
text-align:center;
font-family:Arial, sans-serif;
}

a, a:visited {
outline:none;
}

.clear {
clear:both;
}

#wrapper {
width:960px;
margin:0 auto;
text-align:left;
}

/**
Generic Form styles
**/
.infoWrapper {
	clear:both;
	margin-bottom:10px;
}

.infoTitle {
	color:#808080;
	float:left;
	width:230px;
	text-align:right;
	margin-right:5px;
	line-height:29px;
}

.infoContent {
	padding-left:130px;
	text-align: left;
}

.text{
    border-color: #CCCCCC #C3C3C3 #DDDDDD;
    border-style: solid;
    border-width: 1px;
    font-size: 14px;
    margin-right: 4px;
    padding: 5px;
}

.text.long {
	width:350px;
}

/**
Form Elements
**/
#redText, #search {
	background: none repeat scroll 0 0 transparent;
	padding-left: 5px;
	padding-right:17px;
	position: absolute;
	z-index: 100;
	text-transform: lowercase;
	line-height:1.3em;
}

#redText {
	z-index:99;
	color:red;
}

#search_button {
	margin-top:10px;
}

The first few lines (up to line 23) are to reset browser specific styles. (It's a good practice to use these styles in almost all HTML files.) Then, there are some generic form styles to prettify our form. What needs attention is here:

#redText, #search {
	background: transparent;
	padding-left: 5px;
	padding-right:17px;
	position: absolute;
	z-index: 100;
	text-transform: lowercase;
	line-height:1.3em;
}

#redText {
	z-index:99;
	color:red;
}

redText is the id of the disabled input and search is the id of active input field. We have positioned both absolutely. This makes one overlap on the other. Next, we set the z-index of disabled input less than the active input. This brings the active input to the front. The other property to notice is that we are forcing the user to type in lowercase (text-transform: lowercase). It's not a good practice but this makes things easier for us developers (at least for this tutorial).

Server Side Data Handling

Now, we are going to work with ajax.php.

<?php
//connect to mysql and select db
mysql_connect('YOUR_HOSTNAME', 'YOUR_USERNAME', 'YOUR_PASSWORD') or die("Cannot connect to database!");
mysql_select_db('world') or die("Cannot select database!");

$result = array();
$search_text = urldecode(filter_var(trim($_POST['q']))); // $_POST['q'] is the search string which user types. It is sent via ajax
$q = "SELECT * FROM City WHERE `Name` LIKE '{$search_text}%'";
$r = mysql_query($q);
if(mysql_num_rows($r)>0){
	$row = mysql_fetch_assoc($r);
	$result['suggestion'] = $row['Name'];
}
echo json_encode($result);
?>

Here we first connect to MySQL and select the world database. (Make sure you change YOUR_HOSTNAME, YOUR_USERNAME and YOUR_PASSWORD with proper credentials.) Then we create an empty array $result. We also santize the search string with filter_var. Next we query the City table with:

SELECT * FROM City WHERE `Name` LIKE '{$search_text}%'

This SQL statement finds the rows whose Name field starts with the search string. In case of several matches, we just need the first match. So we find the first match and set the suggestion with:

	$row = mysql_fetch_assoc($r);
	$result['suggestion'] = $row['Name'];

Finally, we encode the array as a JSON output.

JavaScript

Next we move to searchSuggest.js and put the following code inside it:

$(function(){
	$("#search").keyup(function(e){
		$this = $(this);
		$searchBtn = $('#search_button');
		search_text = $this.val();
		$('#redText').val('');
		if(search_text){
			$("#redText").css({"background":"#FFF url('images/spinner.gif') right center no-repeat"});
			$.ajax({
				url: "ajax.php",
				type: "post",
				dataType: "json",
				data: "q="+encodeURIComponent($this.val()),
				error: function(){
					// pass
				},
				success: function(obj){
					$("#redText").css({"background-image":"none"});
					if('suggestion' in obj) {
						if(obj.suggestion!=null){
							$('#redText').val(obj.suggestion);
							if(e.keyCode === 39){ // right arrow key pressed
								$('#redText').val('');
								$this.val(obj.suggestion);
							} else if(e.keyCode === 13) { // enter pressed
								$("form").submit();
							}
						}
					}
				}
			});
		}
	});
	
	$("form").submit(function(e){
		e.preventDefault();
		suggestion = $("#redText").val();
		if(suggestion!=''){
			q = suggestion;
			$("#search").val(suggestion);
		} else {
			q = $("#search").val();
		}
		location.href = "http://google.com/#q="+q;
	});
});

Lot of code. Let's break this down into smaller parts. First, when the user types into the text-field, we clear out the disabled text-field (#redText) where we are going to place the suggestions. Then, as the user types and as we make an ajax request, we show an animated loading image at the right side of the input field, with the following line:

$("#redText").css({"background":"#FFF url('images/spinner.gif') right center no-repeat"});

Then, we make ajax request to ajax.php, which we already created in the last step. Note that we didn't do anything if we fail to make ajax call (the error property of ajax call). This is because we don't want to interrupt the user while typing. When we receive ajax response, we first hide the animated background. Then, we check if there is at all any suggestion sent via ajax (i.e. if there is any City name matching the typed characters). The following codes are important here:

if('suggestion' in obj) {
	if(obj.suggestion!=null){
		$('#redText').val(obj.suggestion);
		if(e.keyCode === 39){ // right arrow key pressed
			$('#redText').val('');
			$this.val(obj.suggestion);
		} else if(e.keyCode === 13) { // enter pressed
			$("form").submit();
		}
	}
}

If suggestion exists, we set the value of the disabled input text (redText) to the suggestion. Next, we go a bit further and do something more. If the user presses the right arrow key, we set the value of the active text field to the suggestion. Again, if the user presses Enter key, we submit the form.
So, what happens if user submits the form?

$("form").submit(function(e){
		e.preventDefault();
		suggestion = $("#redText").val();
		if(suggestion!=''){
			q = suggestion;
			$("#search").val(suggestion);
		} else {
			q = $("#search").val();
		}
		location.href = "http://google.com/#q="+q;
	});

We first check if there is any suggestion. If there is, we set the value of the active text field to the suggestion and set the search query (q). If there is no suggestion, search query is the same as the text user typed in. Then, we take the user to the Google search page for the search query.
Of course, if your site is http://example.com and your search results page is http://example.com/search, the last step would be something like:

location.href = "http://example.com/search/?q="+q;

And that's all! Hope you enjoyed the tutorial. Don't forget to check out other tutorials and subscribe to the feed!

PulsePro Vote Component with Admin Panel

2011-08-17T15:39:00.004+05:30

It's been almost a month since I released a premium version of PulseLite — the open source PHP AJAX Voting component. It has got plenty of features. The documentation lets you integrate this component with your existing web-site. If you are building a web-application (or has an existing one), PulsePro is the perfect choice to let your users interact with your application. What makes PulsePro stand out from other vote-components is its ability to let users cancel votes — just like Reddit, YouTube, Facebook Like, Google +1, StackOverflow among many other popular web-applications.

Here are some of the features PulsePro comes with:

Easy to install.
Secure and XSS-proof.
Five different styles to match your web-application.
Prevents multiple voting.
Cross-browser compliant.
Comes with an Admin Panel that lists top voted items and more.
Ban IP addresses.
Enable/Disable voting on certain items.

If you have a web-site or web-application, you may want to let your readers/users vote on items. Not only that, you may want to check how your posts/items are performing, which are the most popular ones, which are the least. The admin area that comes with this component is perfect for this purpose. If some items are performing bad, you know where to improve. In short, PulsePro lets you check the pulse of your application!

Demo

Freebie: Clean AJAX Contact Form

2011-07-01T07:31:00.000+05:30

Building on top of the AJAX Contact Form and modifying one of Wufoo's elegant forms available at the gallery, I made a more secure, easy-to-install AJAX Contact Form with more features. It's available for download and takes just a couple of minutes to configure and get it running. Perfect for your website — whether personal or professional.

Demo Download

Features

AJAX Form Validation
XSS-proof
Super easy to install. Just edit a configuration file and upload.
Open Source. Fully customisable.
HTML5 Features
Cross-browser compatible
No database required. PHP 5.2+

Installation

Download the zip file and unpack. Edit the config.php file. You'd need API keys from reCAPTCHA. Under My Sites, create a new site and check the field that says Enable this key on all domains (global key). Note the public and private keys. Edit the PRIV_KEY and PUB_KEY values in config.php. Also, edit the email-address and subject line. Upload the files to your server and it's ready! (Also, replace images/cflogo.png with your logo.)

Mail Format

When someone fills in the contact form and sends message using this form, you'd receive a mail with the following information:

Sender's Name
Sender's Email
The body of the message
IP Address of the sender
Time and Date when the message was sent

Troubleshooting

If you do not recieve mails, it's probably the server settings. Ask your server administrator.

Customizations

If you need any customization, you can mail me for a quote.

How to Create an AJAX Contact Form with reCAPTCHA

2011-06-28T10:46:00.006+05:30

Today we are going to create a nifty contact form powered by AJAX and reCAPTCHA. reCAPTCHA, now acquired by Google, was a project by Carnegie Mellon University that aims to stop bots from spamming websites. reCAPTCHA serves more than 200 million captchas everyday. It is almost impossible that you have not been challenged to type those distorted wavy words.

Did you know? reCAPTCHA words are case-insensitive. In most cases, while typing the words, we find it hard to capitalize certain characters. Well, we can just get away without capitalizing. The words entered by humans are used to digitize books. The words are from scanned old books. You can learn more here.

Download Demo

Update: A simple yet powerful AJAX contact form that is easy to install, is available for download. You can read about it here.

Get The Keys

We would need API keys from reCAPTCHA to show captchas. You can sign in with your Google account at reCAPTCHA and get a pair of API keys after adding a domain. (It is not necessary to own a domain, just check the the field that says "Enable this key on all domains (global key)" and the keys will work on all domains.) The first key is a public key, served via javascript and the second one is a private key to handle server-side requests. Also, download the reCAPTCHA PHP library.

Layout

Once we are ready with the keys and the library, let's begin building the form. The form we are going to create will be simple and easy to navigate. Here is how the layout is made:

First, we create an index.php file and put the following lines of code inside it.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Contact Form With reCaptcha</title>
<style type='text/css'> 
body {
font-size: 14px;
line-height:1.3em;
text-align:center;
}
 
#wrapper {
width:600px;
margin:0 auto;
text-align:left;
padding:6px;
}

.message {
 text-align:left;
 width:100%;
 padding:15px 22px;
 display:none;
}

.loader {
 background:url("images/ajax-loader.gif") no-repeat center left;
}

.success {
 background:url("images/success.png") no-repeat center left;
}

.error {
 background:url("images/error.png") no-repeat center left;
}

.infoWrapper {
 clear:both;
 margin-top:10px;
}

.infoTitle {
 color:#808080;
 float:left;
 width:110px;
 text-align:right;
}

.infoContent {
 padding-left:130px;
 text-align: left;
}

label {
 cursor:pointer;
}

.input-text {
 border:1px solid #808080;
}

.long {
 width:450px;
}

.tall {
 height:150px;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<div id='wrapper'>

<h4>Contact Us</h4>
<div class='message'>

</div>

<form name='contact' id='contact'>
 <div class="infoWrapper">
  <div class="infoTitle">
   <label for='name'>Name</label>
  </div>
  <div class="infoContent">
   <input type="text" name='name' id='title' class='input-text long' />
  </div>
 </div>
 <div class="infoWrapper">
  <div class="infoTitle">
   <label for='email'>Email</label>
  </div>
  <div class="infoContent">
   <input type="text" name='email' id='title' class='input-text long' />
  </div>
 </div>
 <div class="infoWrapper">
  <div class="infoTitle">
   <label for="message">Message</label>
  </div>
  <div class="infoContent">
   <textarea name='message' id='note' class='input-text long tall'></textarea>
  </div>
 </div>
 <div class="infoWrapper">
  <div class="infoTitle">
   <label for="">Are you human?</label>
  </div>
  <div class="infoContent">
   <!-- reCAPTCHA code goes here -->
  </div>
 </div>
 <div class="infoWrapper">
  <div class="infoTitle"></div>
  <div class="infoContent">
   <input type='submit' value='Send Message'/>
  </div>
 </div>
</form>
</div>
</body>
</html>

Now, that's a lot of code that needs to be explained.

The first few CSS styles inside the <style> tag are pretty self-explanatory. The message class is shown at the top of the form when it is submitted. The error, success, and loader classes are to identify the kind of message shown. We will add the classnames via jQuery.
Each section inside the form is wrapped inside infoWrapper class. The labels are the wrapped in infoTitle class and each input field in infoContent class. The other classes (input-text, long and tall) are to prettify the form-elements.
We have also added jQuery javascript library and a functions.js file (we would later create).
We have added an empty div with message class. The text will be filled in and determined via AJAX.
The form, as explained earlier, is simple and minimal in its approach.
Note that we have commented the section where we are going to put the reCAPTCHA code.

Integrate reCAPTCHA

Now that we have the form, it's time to integrate reCAPTCHA. We add the following lines of code at the top of the index.php file:

<?php
include_once("recaptchalib.php");
define("PUB_KEY", "YOUR PUBLIC KEY HERE");
?>

recaptchalib.php is the PHP library. Of course, you need to replace "YOUR PUBLIC KEY HERE" with your actual public key. Next, we add the following codes inside the form where the reCAPTCHA codes should be (the commented section, remember?)

<?php echo recaptcha_get_html(PUB_KEY); ?>

Now, if you reload the page, reCAPTCHA words should be there. Next we are going to handle the form response via ajax.

Server Side

We create an ajax.php file and inside it, we put the following lines of code:

<?php
require_once('recaptchalib.php');
define("PRIV_KEY", "YOUR PRIVATE KEY HERE");

$name = filter_var($_POST['name']);
$message = filter_var($_POST['message']);
$email = filter_var($_POST['email']);

if(in_array('', array($name, $message, $email))) {
//one (or more) of the required fields is empty
$result = "field_error";
} else {
 $resp = recaptcha_check_answer (PRIV_KEY, $_SERVER["REMOTE_ADDR"], $_POST["recaptcha_challenge_field"], $_POST["recaptcha_response_field"]);
 if (!$resp->is_valid) {
     //Captcha was entered incorrectly
  $result = "captcha_error";
   } else {
     //Captcha was entered correctly
     $result = "success";
     //You can enter your mail functions here. It's like:
     // mail("yourmail@domain.com", "Email Subject", $message);
 }
}

echo $result;
?>

Let's break it down.

We included the recaptchalib.php library and the private key.
We sanitize the form data with filter_var
We check if any of the form data is empty with in_array. If any of them is indeed empty, we set the value of $result variable to be field_error
If none of the fields are empty, we check the answer for the reCAPTCHA words with recaptcha_check_answer. This function is defined inside the recaptchalib.php library.
The return value of recaptcha_check_answer is a PHP object. The object has a $is_valid variable value which is true if the words are typed correctly. So, we check whether the response is valid or not. If it's not valid, we set $result to captcha_error, and if it's valid $result is success. (After this point, you can mail the message to your mail address or save it to a database, as per your requirement.)
And finally we output $result

So, ajax.php outputs any of the three values — (1) field_error (when one or more fields is/are empty), (2) captcha_error (when typed words don't match with the captcha) and (3) success (voila).

jQuery Functions

We now create functions.js file. And inside it we put the following lines of code:

$(function(){
 $("#contact").submit(function(){
  $(".message").removeClass("success").removeClass("error").addClass("loader").html("Sending message").fadeIn("slow");
  $.ajax({
   type: "POST",
   url: "ajax.php",
   data: $(this).serialize(),
   dataType: 'text',
   success: function(msg){
    switch(msg) {
     case "field_error": // one or more fields is/are empty
      $(".message").removeClass("loader").addClass("error");
      $(".message").html("Please fill in all the required fields.");
      break;
     case "captcha_error": // captcha wasn't typed correctly
      $(".message").removeClass("loader").addClass("error");
      $(".message").html("Please type the words correctly and try again!");
      break;
     case "success": // all good
      $(".message").removeClass("loader").addClass("success");
      $(".message").html("Your message has been sent. You'll soon hear from us!");
      break;
     default: // Hmm. The default case. You never know.
      alert("Something is wrong. Please try again.");
    }
   }
  });
  Recaptcha.reload();
  return false;
 });
});

When the form is submitted, the above javascript removes success and error classes from the message section and adds the loader class to show that the message is being sent. While this is being shown to the user, an AJAX call is made that sends the form data to our ajax.php file. The response from ajax.php is then filtered with a switch. In each cases, the loader class is removed from the message section and appropriate class is added alongwith message texts. And whatever the case is, we always reload the captcha with Recaptcha.reload(). This function is provided in the javascript served via recaptcha_get_html PHP function.

If you're working with reCAPTCHA (whether on this contact form or some commenting system), you can use Recaptcha.reload() to reload the captcha without reloading the form. Helpful for form validation.

(Update: A simple yet powerful AJAX contact form that is easy to install, is available for download. You can read about it here.)
And that's it! This is just the basics of how things work. So go ahead customize and let us know in the comments. :-)

Highlight Rows of Table Using jQuery

2011-05-05T12:34:00.000+05:30

It’s been couple of months since I made a jQuery plug-in that lets you highlight rows of a tale. This feature is similar to GMail’s “Select Mails” option. The plugin has two components — you can trigger the plugin to select each row of a table, or you can fire the plugin on a single check-box to select all the rows of the table. You can try the demo here. It’s on sale on CodeCanyon for $3. All documentation and demo files are available for download.

Demo

Install Multiple Applications in One Go with Ninite

2011-05-03T11:21:00.000+05:30

The worst part about installing a new operating system on a hard-drive is installing the required applications once the OS is installed and functional. Not only you have to download each of the application executables, you would have to click through the installation procedure. If you’re configuring a shared computer, the task is even bigger, since more applications need to be installed to cater to every-one's requirement.

However, you can take a shortcut — by using Ninite. It’s a cross-platform application that installs several popular applications in one go. You don’t have to click through the installation wizard and un-check useless components of an application — Ninite does it for you.

You can visit the Ninite website and choose which applications you want to install in your system. Once the choice is made, hit the “Get Installer” button and Ninite will send you a tiny installer (~250KiB). If you run the installer, all the applications you previously chose, will be installed one by one. All you can do is sit back and enjoy (or walk away).

The available applications are some of the best free and open source applications, including Firefox, Chrome, Audacity, VLC, OpenOffice among many others.

Ninite always installs the latest version of the application, no matter when you downloaded the original Ninite-installer. Among one of its many features, Ninite never installs Ad-ware on your machine.

Even if the applications are already installed in your machine, you can simply run the Ninite-installer to update all the applications. So, you can use it as a mass-updater, too.

It detects the PC’s language and fetches the installation files in the same language. So you don’t have to worry about choosing the right language for the applications.

There is also a premium version of Ninite that lets you choose applications right inside the Ninite-installer. It also gives access to some nifty command-line features, otherwise unavailable on the free version.

Manage Your Distractions and Get Things Done in your IM

2011-04-03T21:31:00.001+05:30

So, you have a lot to do everyday. You start your day by making a list of things you have to do on that day. All through the day, your mind comes across many ideas (or tasks) which need to be done. But you manage to forget them because of distractions and for other reasons. What if you can keep track of your ideas and get things done? While Evernote is a great way to take notes and to-do’s lists, here is a simpler way.

GTD Stack is an instant message bot that keeps track of your ideas and to-do’s. All you have to do is to add gtdstack@appspot.com to your GTalk Friendlist and you’re done. It’s surprisingly simple and minimal. Just ask the bot “How to add a task?” and you get help right there. Here are some of the most used commands:

p <project name> adds a new project (if project not created ) / switches to project (if project is already created)
a <task> adds a task to the current project.
l lists all the tasks from the current project
L lists all the tasks across all projects.
g <task#> switches to as the current task
d marks the current task as done (and deletes the task)

Note that the commands are case-sensitive.

The bot is created by the brilliantly talented Harshad Sharma. It’s created on Google’s AppEngine platform. The source-code is available on BitBucket. In an email, he pointed out the following, regarding case-sensitivity of the commands:

Case sensitivity is used for a very practical purpose, though I understand it may be a little painful for newbies, I'll urge them to adapt to it... This app has a very low learning curve for basic use, and it gradually gets steep as you want more and more form the app — I think its fair. A flat learning curve is achievable, but the interface becomes less usable once you've reached a power user status - the case with most GTD apps.

He’s also working on email-to-add tasks. For the moment if you enter the command email, the bot sends an email to your chat ID with all the tasks.
You can follow @gtdstack on Twitter for updates.

Create Up-Down Voting in Your Web-application with Pulse Lite

2011-02-17T07:02:00.015+05:30

It’s been more than two years since I posted a simple tutorial on Thumbs Up Thumbs Down Voting with PHP, MySQL and jQuery. That post receives the second most page-views on this blog. People created voting scripts on it. More and more talks happened on its security. Some even mailed me. And admittedly, it was least secure. Refresh the page and vote again! But then again, it was just to show how things work and not meant for production at all.

Over the past few weekends, I was working on a PHP Script that’s easy to integrate and somewhat more secure. Pulse Lite is a free and open-source thumbs-up thumbs-down ajax voting script written in PHP, using MySQL database. The requirements are minimal — PHP 5.2 or above, and MySQL. You can integrate it with your existing web-application in a matter of minutes.

Demo Download

Features

Easy to integrate!
Free and open-source!
Requirements: PHP 5.2+ and MySQL
Easy to customise!
Let’s you choose the format of the vote results!
Does not mess with your data! Only a single table contains the votes and other data.
Ready for your next project!
New in v2: Now, with two new styles — YouTube-styled and Reddit-styled buttons!
Github repository is ready to be forked!

UPDATE: A premium version of PulseLite — PulsePro — is now available! Here's a comparison of what you get!

Security

The script uses a two-fold security measurement — it logs the IP of the user and sets a cookie. So whenever a user tries to vote on an item, the script checks the IP and the cookie. If they exist in the database (IP) and on users machine (cookie), the script stops the user from voting.
This is not bulletproof, though. The user can use a different IP address and clear the cookie in order to vote again. And apparently, there is no bulletproof security measurement for such a situation. The best possible case is when a user is logged in and votes on an item. We can then lock user’s ID and stop voting next time s/he tries. A premium version is under work which will have more features. Stay in touch!

Installation

Download the zip file (link is at the top). Unzip and run the SQL file included in it.
Edit pulse.config.php file inside the main Pulse directory. Fill in your database credentials. Also, fill in PULSE_DIR with the absolute path of the Pulse directory (i.e. the path of the Pulse directory inside your server)
Edit /assets/js/pulse.core.js file. Edit the value of u (i.e. the line that starts with var u). Set the value of u to the same value as PULSE_DIR
Include Pulse.vote.class.php to the file(s) where you want to show pulse. Create an instance of Pulse.
```
include("Pulse/Pulse.vote.class.php");
$pulse = new Pulse();
```
Inside the head tag, add these lines to include necessary JS and CSS files.
```
<?php echo Pulse::css(); ?>
<?php echo Pulse::javascript(); ?>
```
Inside the loop of the items (which are to be voted), add this line.
```
<?php echo $pulse->voteHTML($item_id); ?>
```
Here $item_id is the id of the item which is to be voted. Add the above line wherever you want to show the vote buttons
You can specify the format in which the results are to be shown. Just after you create the $pulse instance, add this line.
```
$pulse->setFormat("{up} like it, {down} don't");
```
Here {up} will be replaced by the number of upvotes and {down} with that of downvotes. You can also use {balance} for the difference between upvotes and downvotes.

Support

While this is an open-source project, ~~I cannot guarantee providing support for the installation~~ you can send me a mail in case you need any installation and customization, for a quote. All necessary installation guide and database structure are included with the source. An extensive sample installation can be found here for a better understanding.

Would you find any issues, feel free to discuss in the comment section. I hope you would enjoy using it as much as I did building it.

Create Your Own Cartoon Avatars for Free

2011-01-30T21:17:00.002+05:30

You must have come across many online avatars that resemble the person, but with a twist — it’s a cartoon and not the original photo of the person. It looks cool and — even more — it lets you stay anonymous while showing the world the same features that you have in reality. Here’s how you can create your own cartoon avatars for free.

Enter FaceYourManga.com. It’s a simple web-application that lets you create your cartoon avatars for free. You can choose from a variety of features — face, nose, mouth, hair, beard, glasses, even tattoos and piercing!

Once you’re done creating the avatar, you have to enter your email in order to get the download link. You can even buy and print the image in high-resolution digital format for €1.50.

Tip: If you don’t want to share your email with web-applications that claims to share download links via email, you can use 10 Minute Mail. Once you enter this site, it gives you a unique email ID valid for only 10 minutes. It is accessible only by you. Mails are automatically loaded. So you don’t need to refresh the page. If you don’t receive the mail within 10 minutes, you can extend the time for another 10 minutes.

Enable or Disable Form Elements with jQuery Plugin

2011-01-24T15:20:00.004+05:30

Over the last weekend I developed a nifty jQuery form plug-in, which lets you interact with various form elements based on user inputs. The item is up for sale at CodeCanyon for $3. You can check out a demo here.

Consider the following situation. You have a form where user updates his/her profile. If the user has a website, he/she can enter the URL field of the form. But he/she does not have a website (or does not want to share), the URL field is disabled. So, you want to enable that field based on user input.

While you can achieve the same by writing some amount of JavaScript for each such field, this plug-in makes it a breeze. It takes only two parameters and does the same for you in just one line of code. :-)

Demo

Capslock Hack: Use Capslock to Search the Web and More

2011-01-13T09:05:00.004+05:30

On a standard US keyboard layout, Capslock is probably the least used key. Most people use the shift key to type in uppercase letters. Google’s own netbook, the Cr-48 has replaced the capslock key with a dedicated “Search” key, enabling users to search the web just by hitting the button. I made some quick coding on Autohotkey to get the same functionality on Firefox and Google Chrome.

It does three things:

If no web-browser instance is active, it starts the Windows Explorer search.
If Google Chrome is active, it opens a new tab and lets you search the web.
If Firefox is active, it puts the cursor to the search box on top right.

You can use any of the following two methods to use the functionality on your Windows PC
1. Install AutoHotkey and on your favourite text-editor paste the following lines.

; Hit Capslock to search
Capslock::
SetTitleMatchMode 2
IfWinNotActive, Google Chrome or Firefox
Send, {F3}
IfWinActive, Google Chrome
Send, ^t
Send, ^k
IfWinActive, Firefox
Send, ^k
Return

Then, save it with .ahk extension. Just double click the file (after you have installed AutoHotkey) and your capslock is remapped to the new search button.
2. If the lines of code look daunting and you don’t want to install AutoHotkey, at all, I have good news for you. Just download the zip file at the end of this post and fire up the “capslock_as_search.exe” file. And there you go.

Bonus

Although it’s a personal choice, I find it great to have the backspace key around my left hand. “Try it, use it for a week, you'll never turn back” (@hiway) Just in case if anyone finds it useful here is the code:

; Hit Capslock to backspace
Capslock::Backspace

As earlier, if you don’t want to use and install AutoHotkey, you can just download the zip file at the end of the post and fire up “capslock_as_backspace.exe”
If you’re on Linux system, this post may help you.

Download

How to Download Songs from Last FM

2011-01-07T05:11:00.001+05:30

LastFM is the Facebook of music. You can discover and listen to new music, find “real” people who listen to the same kind of music as you do. You can even “scrobble” songs (much like a Tweet, except that you update with the song you’re listening to).

What if you can download the MP3s that you’re playing there? Although, LastFM does offer free songs from time to time, you can’t download songs from radios, play-lists and recommended play-list. Here are three of the best applications that let you download songs right from LastFM’s server.

TheLastRipper

TheLastRipper records songs from LastFM’s radios and brings them to your hard-drive. It also adds tags and downloads album arts for each song. The MP3 files are organised in the following fashion: Artist > Album > “SongNumber - track name” (you can customize this pattern too). This means that songs are organized in a deep folder structure. You can even tune into a LastFM radio simply by entering the URL.

LastFM Downloader

This tiny little application doesn’t need any installation. Just fire it up and start downloading. Last FM Downloader only supports tuning in via URL. You can restrict the number of songs you want to download. Downloaded songs are organised in deep folder structure. Since you can only download after you tune in through URL, you might have to play around with the structure of LastFM URLs. Not recommended for average computer users.

LastSharp

LastSharp is probably the best downloader. It downloads a play-list of 30 tracks. You can select which of these songs you want to download, unlike LastRipper and LFDownloader which continue to download. It lets you choose which of the artists’ songs you want to download, leaving aside the others. The songs are organised in deep folder layout which can be customised. It also includes a built-in audio player to play downloaded songs. One of the interesting features is that it doesn’t download songs that are already downloaded, even if the play-list repeats the songs or a different play-list has the same songs.

Here’s comparison of the features.

Disclaimer: This blog and its author(s) do not condone software piracy. The above post is for information only and should not be taken as a promotion of copyright infringement.

AbhiTech is Now Technabled!

2011-01-06T06:18:00.002+05:30

It’s been 5 years since this blog started. First it was by the name “Cyberbuff’s Blog” and later by “AbhiTech”. It was crying for a makeover. So, I thought about buying new domain and giving it a professional “look.” So here we are.

Although the look remains the same, a lot has changed with this update.

Apart from getting a new web-address, Technabled now has a logo that’s a mash-up of the power button and the Latin T.
Et Cetera, a Tumblog, is now a part of Technabled. Et Cetera is updated almost everyday with interesting links from around the web. Do subscribe to the feed to keep connected!
Twitter profile for Technabled offers tips, tricks on daily basis. Do follow!
Facebook’s fan-page now has a “vanity” url -- http://facebook.com/technabled You can tag our page by adding @technabled in your updates. “Like” our fan-page to get updates on Facebook!
If you want to contact me, please do so at abhisek@technabled.com I would love to hear from you.

The content remains the same -- technology. Enjoy your stay here! If you any suggestion, criticism (or any other feedback) to share, please do so in the comments section!

India's $35 Tablet PC

2010-07-24T07:24:00.003+05:30

The minimum amount of money an iPad can cost you is $499. But if you don't bother about the high-end features iPad provides and you just want to browse the net, then forking out $499 is not a good idea. Well, you can get a touch tablet 'PC' for less than $50. India's HRD ministry has unveiled a prototype.
HRD Minister Mr. Kapil Sibal has unveiled a prototype of a touch tablet that costs only $35 and can be used to browse webpages, word processing, and even video conferencing. The technicalities of the device are unknown but it doesn't use hard-disk. Instead it uses memory cards — much like mobile phones. It runs on a battery but it is solar power option too.

The price will be even lower for students for whom the Government is ready to subsidise even more. The cost of this tablet for a student will be around $20.
The reponse from the private sector has been lukewarm since the profitability of the device is being questioned.
[Via BBC South-Asia]

5 Common Misconceptions about Evernote

2010-07-09T06:31:00.001+05:30

Evernote is probably the best and the most popular note-taking application on the web. Evernote recently reached 3 million users which is a great news for Evernote fanboys (and fangirls). But even after so much success, people still have misconceptions about the application. From security woes to limited functionalities, some people write it off for various reasons. This post is about some of those commonly held myths. Feel free to add your comments.

Misconception 1: Evernote is a note taking application. Very little possibilities. It's not for everyone.

Possibilities with Evernote are enormous. Every once in a while Evernote publishes Tips on how to use Evernote more effectively. From using it for planning your house to store your gym's schedule, you can do a lot with Evernote. If you're still not conviced, consider reading the following two articles:

Misconception 2: You cannot share your notes with any one. Your notes are caged!

Evernote lets you share entire 'notebooks'. Here are detailed instructions how to do so.

Misconception 3: Your notes and documents are not secure.
EverNote makes a back-up of your notes in at least 5 disks. So data-loss is virtually impossible. Still EverNote has a well chalked out privacy policy which ensures your notes are safe.

Misconception 4: For free users, EverNote provides 40 MB sync bandwidth every month. This is too little.

Sync bandwidth is the amount of data you send to EverNote and not the actual amount of data your notes takes in their drives. With 40 MB sync bandwidth, you can make 20,000 typed notes, 270 web clips, 400 Camera Phone images. That's much more than you need. Still in case, you ran out of bandwidth, you can go premium for $5 a month ot $45 a year. Premium accounts get 500 MB sync bandwidth a month, along with other features.

Misconception 5: There's no Symbian client for Evernote.

There is one EverNote client for Symbian-based smart-phones, although not officially supported by Evernote. It works on all phones based on S60 5th Edition.

6 Striking Features on New Digg

2010-07-01T15:32:00.004+05:30

Digg has launched an invite-only preview of its newest user-interface designs that it will be launching for the public later this year. Apart from little changes here and there, these are some of the striking new features that would surely make it more social and usable.
1. Twitter style links: Profiles of each user will be accessbile through Twitter style URLs. i.e. digg.com/username

2. You can follow users. Just like Twitter. Once you sign in, you would be presented with a list of popular profiles on Digg whom you might like to follow. Updates from those you follow is available on the My News page. That's the same page as Twitter timeline.

3. Connect Social Networks: Joining the likes of most social networks, Digg will offer you to connect to Facebook, Twitter and Google to add new people whom you already know.

Once connected, you can see a list of people from the same network. You can follow them right from that page. It's that simple!

4. Simplified link submission: In just a couple of clicks, you can submit links to Digg. You can submit links right from the My News page. Just after you enter the URL, the title and the embedded images are loaded on the fly. All you have to do is to enter a description and hit the button. No more horrible captchas. It's simpler than ever before.

You can even comment on the newly submitted URL right from there!

5. Auto-submit content: Now, you can auto-submit content to Digg from any feed item. You don't have to visit Digg to submit a link everytime you make a new post. Just add the feed to Digg and everytime you post, it will auto-publish the content.

6. Twitter-style Load more widget: You can stay on the same page and keep borwsing through Digg's interesting links. All you have to do is to click on the Load More link once you're done reading everything on that page. With this, Digg has done away with pagination which is irritating for some users.

Free Calls from Skype to Qualifying Countries for the World Cup

2010-06-25T06:33:00.002+05:30

Skype, the most popular VoIP service provider, is offering a month of free calls from Skype to any number around the world, to celebrate 2010 Fifa World Cup. This offer is valid for 30 countries which are qualified for the World Cup 2010. You can check the announcement here. Out of these 30 countries, Skype offers unlimited calls to landline numbers in some of the countries (including the US, Australia, France, Germany among many other countries). But Skype charges a nominal fee of 1 Euro for all this plans. Payment can be made through any of the three options Skype offers.

11 PHP Voting Scripts and Tutorials

2010-06-13T06:38:00.000+05:30

Ever since I wrote the tutorial on Reddit-style Voting With PHP, MySQL and jQuery, I get around 300 visitors everyday with keywords like "php voting", "jquery votes", "jquery vote up down", "php vote tutorial", "votes php mysql" and many other keywords. So I thought about writing a round-up of voting scripts and tutorials using PHP as the server-side language. Here are the tutorials and scripts that might be of your use. If you think I missed anything, do let me know in the comment section. You can also have a look at the round-up section for more such round-ups. :-)

Scripts

1. ColorRating: A well-documented, easy to use voting script. Higly configurable and easy to integrate with your database. It uses jQuery for a nice animated effect.

2. PHP Voting by Richard Silvers: A "fairly" simple PHP voting script. It allows users to vote and view the total results of the vote.

3.Star Rating Widget: The Star Rating widget is a plugin for the jQuery javascript library that creates a non-obstrusive star rating control based on a set of radio buttons or select option.

Commercial Solutions

1. Ajax Feature Request and Voting ($14): It's simple and a lot like Dropbox's votebox page.

2. ThumbsUp ($17): This is probably the best commercial script that is available. It comes with a slew of options — in various shapes and sizes. AJAXed!

Tutorials

1. Voting system with jQuery, Ajax and PHP: A very detailed tutorial on Dzone like voting system with jQuery, Ajax and PHP. This script helps you to display user votes on blog post.

2. A Simple PHP Polling/Voting System: This article will illustrate how to create a very simple, clean polling or voting system using PHP 5.0 and the DOMDocument object model. This allows the polling system to read and write polling results to XML, instead of say, a MySQL database like many conventional polling systems.

3. Creating a simple file based polling script: This tutorial will show you how to create a simple, file based polling system where you can easily setup new polls. No database is required for this script and you only have to maintain one config file.
4. Creating a Dynamic Poll with jQuery and PHP: This tutorial shows how to create a simple polling system that doesn't need a page-refresh to show the results.

5. How to Build a Poll System with PHP and MySQL [Demo]: This is pretty simple tutorial that explains how to polling with PHP and MySQL works. It offers the source-code, too.

6. Sort & Vote – A jQuery Poll: This is a very detailed tutorial on an innovative concept of polling with jQuery. The end result lets users drag items in order of preference and then submit it for polling!

Bonus

Very Simple Rating System - AJAX via jQuery, JSON: I guess, it's in Russian. Digg-like voting using jQuery, JSON.

Record Skype Calls for Free with iFreeRecorder

2010-06-05T20:06:00.001+05:30

Skype is an award-winning IM platform that is hugely popular for making calls to other Skype users and phones across the world. A lot of the companies regularly buy Skype Credits to make calls to their clients. And it's much cheaper to make calls from Skype than from usual phones since it uses Voice Over Internet Protocol (VoIP). If you use it for the purpose of making calls, you may want to record calls that you made just to keep track them. iFreeRecorder is an application that does the job and that, too, with many options to choose from. iFreeRecorder uses Skype API to record calls.
Once you intall iFreeRecorder (Skype must be installed first, of course), you'd have to give access to use Skype's API.

Once you allow access to Skype's API, you're ready to go.

iFreeRecorder comes with a bunch of options — from MP3 quality selection to auto-record calls.

It also offers a history option that keeps track of all your recorded calls. You can also record conference calls!
iFreeRecorder is an innovative and very useful tool. It comes as a freeware but if you find it useful, do consider donating.

Code Faster HTML with Zen Coding

2010-05-06T17:50:00.002+05:30

Do you code in HTML? Does the sight of lines of HTML makes you sick? Do you want to speed up your workflow? If "Yes!" is the answer to any of these questions, then you must try Zen Coding — a powerful tool to write lines of HTML (and CSS) in just a few letters. Zen Coding uses simple abbreviations (which you can hardly forget) to expand them into valid HTML syntax. The best part of it is its robust integration with almost every popular IDE.

How It Works

Once you install Zen Coding plug-in to your favorite text-editor, you are ready to go. For example, type the following in your text-editor:

div#wrapper>div#right+div#left

Now, hit CTRL+E and see the magic:

<div id="wrapper">
<div id="right"></div>
<div id="left"></div>
</div>

The short-codes are so self-explanatory that you hardly need any time to catch how they work. Zen Coding also supports expanding CSS short-codes. You can find a cheatsheet of all the available short codes in the download section. Geeks, you can even write your own custom short-codes and expansions!

Supported IDEs

Zen Coding fully supports a bunch of popular text-editors including Notepad++, Textmate, Coda, Komodo, Aptana/Eclipse, GEdit, Dreamweaver, Emacs, Vim. You can even include Zen Coding features in <textarea> fields in your browser.

How to Add Facebook's Like Button to Your Site

2010-04-22T07:17:00.004+05:30

Facebook recently launched the "Like" button feature, in a bid to gain more access to sites. This new feature enables users to share content with only one single click. The links to the pages will appear on users' profiles and on a friends' timelines. Facebook also changed the word "Fan" (for pages) to "Like". Facebook Devs say, "the average user clicks "Like" on nine pieces of content each month." So "vox populi, vox dei"! Here are some ways you can integrate Facebook's like button to your blog.

For Blogger

Put the following code where you want to show the button.

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=true&width=450&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:70px'/>

For 'Classic' Blogger

Put the following code where you want to show the button. (Update: This code is updated and works perfectly with Blogger. Thanks, Kristina!)

<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&layout=button_count&show_faces=true&width=75&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:75px; height:20px"></iframe>

For Wordpress

Put the following code where you want to show the button.

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&layout=button_count&show_faces=true&width=75&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:75px; height:20px"></iframe>

This is a really awesome feature Facebook has come up with. With a little tweaking, you can easily come up with what Facebook Blog shows in the sidebar (see the screenshot below).

You can read more about the API here.

Google's Experiment with Twitter: FollowFinder

2010-04-15T05:33:00.001+05:30

Google is testing a new service called FollowFinder to find similar users on Twitter. The product is currently in beta — you can try it in Google Labs. After the launch of real-time search results, this is probably Google's first experiment with Twitter. FollowFinder runs on Google's AppEngine platform. In their own words,

"Follow Finder analyzes public social graph information (following and follower lists) on Twitter to find people you might want to follow."

FollowFinder gives you two lists of people — the first one is based on people you follow and the second one is based on the people who have same followers as you have. You don't have to log-in to Google or Twitter to use FollowFinder — just enter any Twitter username and find similar followers. You can also follow people right from FollowFinder — there's a button below every Twitter user. It feels more like Twitter than inside Google. Even Twitter’ Hovercards works inside FollowFinder.
Google's latest offerings have focused more on Twitter than Google Buzz. It is not clear whether these new product launches are an admission that Google Buzz is a failure.