More Tech Tips!

Topsy Tip: Another Retweet Button to Embed Anywhere!

2009-11-04T00:01:00.033Z

Topsy has just released a Wordpress plugin that gives you another retweet button. But, what if you can only work with a JavaScript widget? here is a small hack..

As you can see, they got 2 buttons..

A Tall(big) button

<script type="text/javascript" src="http://button.topsy.com/widget/retweet-big?nick=[twitter_name]&url=[post_url]"></script>

next, replace [twitter_name] with your Twitter username.
and [post_url] with your post URL.

And a Wide(small) button

<script type="text/javascript" src="http://button.topsy.com/widget/retweet-small?nick=[twitter_name]&url=[post_url]"></script>

Advantages of Topsy Retweet Button

Topsy is a Real time search and discovery engine that was launched in last May. and unlike TweetMeme retweet button. Topsy holds the data about tweets of your link forever!

Topsy offers free tweet analytics about your link & your site that currently TweetMeme will charge you for it! [ See analytics of my popular Twitter Friends widget]

It also shows any badges earned for your URL in TopLinks.(TOP 100, TOP 1k, TOP 5K ). TopLinks are collections of the top 100, 1000, and 5000 new links tweeted each day by influential people on Twitter.

Shrinking that Fat Delicious Tagometer Badge!

2009-11-01T11:00:00.059Z

I needed to use the tall Delicious save button, but I found that it wasn't tall at all.. it was short & fat :)

So, I had to shrink it a little by hiding some parts. And, since Delicious was smart enough to implement their button using AJAX. It is easy to customize the button using CSS.
Most of the other networks implement their buttons using iFrames which you can't modify anything inside of it.

Will use the same Javascript code of the tall Tagometer:

<script type="text/javascript">
   if (typeof window.Delicious == "undefined") window.Delicious = {};
   Delicious.BLOGBADGE_DEFAULT_CLASS = 'delicious-blogbadge-tall';
   Delicious.BLOGBADGE_GRAPH_SHOW = false;
   Delicious.BLOGBADGE_TAGS_SHOW = false;
</script>
<script src="http://static.delicious.com/js/d2-blogbadge.js"></script>

And insert this CSS before the JavaScript code preferably in the head of the page:

<style type="text/css">
   /* less width! */
   .delicious-blogbadge-tall
   {
      width:62px;
   }
   /* less border and font-size */
   .delicious-blogbadge
   {
      border-width:1px !important;
      font-size:9px !important;
      padding:2px !important;
   }
   .delicious-blogbadge .save-to-link
   {
      padding-left:17px !important;
   }
   /* boldify and center the count  */
   .delicious-blogbadge .url-link .post-count
   {
      display:block;
      font-size:20px !important;
      padding:5px 1px;
      text-align:center;
   }
   /* less padding around the count */
   .delicious-blogbadge-tall .url-link
   {
      padding:1px !important;
   }
   /* hiding useless parts */
   .delicious-blogbadge .save-to-link-label span
   ,.delicious-blogbadge .save-to-link-label strong
   ,.delicious-blogbadge .post-count-label-after
   {
      display:none
   }
</style>

Another important hack that you will not find in Delicious tagometer page, is to set the URL manually. that is useful when you are displaying multiple buttons in the same page.
You can find about that old hack at [Adding Del.icio.us to Wordpress Blogs]

Twitter Friends & Followers Widget - A jQuery Plugin!

2009-10-22T01:01:00.013Z

There is a Facebook fans widget, Google friends widget, what about a Twitter friends widget?!
Here is a jQuery plugin that you can embed anywhere to display pictures of your Twitter followers or friends (whom you follow) and their latest tweets if you like.

By featuring your Twitter friends or followers on your blog, you will encourage others to become friends too..

View these Demos..

Demo 4 | Demo 3 | Demo 2 | Demo 1

Each demo page contains HTML & CSS & JS you need to use... CSS code is essential for this widget looking, but will not focus on it here.

Demo 1: Simple Followers List ►
By Default widget will fetch your latest 100 followers and append each picture of the 1st 20 of them with a fade transition, then the 2nd 20 pictures, then 3rd 20 and so on..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $('#friends').twitterFriends({
         debug:1
         ,username:'Mike_More'
      });
   });
</script>

<div id="friends"></div>

Demo 2: Your Profile & Followers List ►
Now, to show your Twitter profile information -your picture, profile link, followers count- we will use the (header) option. which may contain any HTML code with these optional variables:
_tp_ : Twitter profile Link.
_ti_ : Twitter picture.
_fo_ : followers count.
_fr_ : friends count.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script 
type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>



<div class="twitter-friends" options="{

   username:'Mike_More'
   ,header:'<a href=\'_tp_\'><img src=\'_ti_\'/></a><h2>_fo_ Awesome Follwers!</h2>'
   ,user_animate:'width'
   ,users:50
   ,user_image:32
}"></div>

To install this widget:
1. Embed CSS code from demo page then include jQuery JS file and widget JS file.
2. Add a div with a "twitter-friends" class.
3. Don't forget to set (username) option with your Twitter username, which is the only essential option!

Also Note that:
- Unlike typcial JS call in demo 1, any Div's with a "twitter-friends" class will be automatically widgetized!
- any single quote (') inside the header value must be escaped with (\')
- Used the 'width' for picture animation instead of default fade animation.
- Changed the default visible users count to 50, Scaled down each pictures to 32x32, and the width of container so the 50 pictures would be divided into 4 rows equally.

Demo 3: Simple Friends List ►
As in demo 1 except (friends) option was set 1 to switch to friends mode.
You can see that widget is very flexible and can fit in different layouts.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script 
type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>



<div class="twitter-friends" options="{
   friends:1
   ,username:'Mike_More'
}"></div>

Demo 4: Your Profile & Friends & Friends Tweets ►
Another optional part in this widget is Friends tweets. after friends pictures were added, their latest tweets will start animate one after another. when you enable tweets by setting (tweet) option to 1 each friend icon will also show his/her tweet as a tooltip.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script 
type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>


<div class="twitter-friends" options="{
   username:'Mike_More'
   ,friends:1
   ,tweet:1
   ,header:'<a href=\'_tp_\' title=\'follow me\'><img src=\'_ti_\'/></a><h2>_fr_ Friends / _fo_ Followers</h2>'
   ,loop:1
   ,users:50
   ,user_animate:'height'
}"></div>

you can also see that we used the (header) option to show number of Friends & Followers.
and (loop) option was set to 1 to loop users pictures animation.

Widget Highlights:

Show your latest Twitter Friends and Followers with custom animation.
With your own words; Display your profile and total count of your friends and followers.
Display your friends or followers latest tweets.
Instead of linking a picture to friend's twitter page; You can link it to his/her home page. So, They would know that your are linking to them (by referrals).
Don't worry about your SEO with the quality of all these outbound links as they are loaded by Javascript and wouldn't be visible to a search engine crawler.
Widget is very flexible and can easily fit in different layouts by adjusting the number of visible pictures and its dimension.
Many pictures & tweets transition options like opacity, width, height.
Each part of the tweet like Avatar, links, Hashtags.. has its own CSS class so it can be styled easily.
Show or hide some parts of the tweet like avatar, author name, date, etc...
Use a typical JS call or auto-load div elements that have "twitter-friends" class.
Widget adds a small "i" letter that links to the widget page. You can remove it by setting (info) option to empty string (''), but I'll appreciate it if you attribute/link-back to me elsewhere on your website.

Go to plugin page for more details on plugin options, request features or submit bugs.

Realtime Related Stream Bar: A Collecta-powered jQuery plugin

2009-10-06T01:00:00.036Z

This is a jQuery plugin to create a bar of real-time stream of information related to your post powered by Collecta search engine. Collecta monitors the streams of news sites, popular blogs and social media. So it can show you results as they happen. There are five content categories in Collecta - updates, stories, comments, photos, and videos.

Check these Demos..

Each one links to the demo page where you can see HTML & CSS & JS you need to use... CSS code is important but it is almost the same across those different samples, so I'm not going to focus on it here.

Demo 1: Typical Real-time Search ►
Post tags will be extracted automatically and used to do a typical realtime search to return related streams..

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://realtime-related-stream-bar.googlecode.com/files/jquery.relatedstream-1.0.min.js"></script>



<div class="related-stream">loading..</div>

Use CSS in demo file then include jQuery and plugin JS and add a div with a "related-stream" class and it will be auto-loaded with default options!

Demo 2: Real-time Search by All Tags ►
By default, plugin will search by OR-ing those tags to return results with any of the tags. but you can force it to return results that contain all tags.
you may also limit number of the used tags to avoid empty resultset when Collecta can't find any results that have all tags!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script 
type="text/javascript" src="http://realtime-related-stream-bar.googlecode.com/files/jquery.relatedstream-1.0.min.js"></script>



<div class="related-stream" options="{

   debug:1

   ,or_tags:0

   ,max_tags:2

   ,animate:'height'

}">loading..</div>

you can see that (or_tags) was set to 0 to disable. and (max_tags) to 2. also animation is done by the height!

Demo 3: Real-time Search without Photos or Videos ►
By default, Search will return results from all content categories. to exclude photos and videos will set (get_photo) and (get_video) to 0. which will leave you with updates, stories and comments.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script 
type="text/javascript" src="http://realtime-related-stream-bar.googlecode.com/files/jquery.relatedstream-1.0.min.js"></script>



<div class="related-stream" options="{

   debug:1

   ,get_photo:0

   ,get_video:0

   ,animate:'lineHeight'

   ,default_avatar:'http://groups.google.com/group/collecta-developer/icon'

}">loading..</div>

you can see that line-height is used for animation. and (default_avatar) is set with some image URL to show default avatar when no one is present in search result.

Demo 4: Custom Search ►
Not related not realtime search, just searching a fixed query using a typical Javascript call.
(realtime) was set to 0 to stop refreshing search automatically. and Increased (n) which is the number of results to return.
And set (query) to search for jQuery or AJAX.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://realtime-related-stream-bar.googlecode.com/files/jquery.relatedstream-1.0.min.js"></script>

<script type="text/javascript">  


   $(document).ready(function(){

      $('#rrs').relatedStream({

         debug:1

         ,realtime:0

         ,query:'jQuery OR AJAX'

         ,n:20

      });

   });

</script>



<div id="rrs">loading..</div>

Features:
Allow me to summarize the features of this plugin.

Show realtime related stream of information based on your post tags.
Collecta provides streams of information from a wide variety of sources. you can choose from 5 categories of content:
- Updates: Tweets, Dents, and other status update messages common on social sites.
- Stories: blog posts and news articles.
- Comments: comments for blog posts. but it is expected to include photo and video comments as well.
- Photos.
- Videos.
Search by tags in OR or AND operators.
You can also search using a custom query (Fixed query or based on user input).
Many transition options like opacity, height, font-size.
Each part of the result -avatar, author name, link- has its own class for easy style customization.
Show or hide some parts of the results like avatar, author name, date.
Use a typical JS call or auto-load div elements that have "related-stream" class.

Notes:
The Collecta API is very promising, but it is currently beta. So, things might not go as planned in this early stage.

Searching in updates doesn't return twitter tweets, just Identi.ca dents (and any service related to Status.Net). but the API is supposed to include Twitter later.
Beta API has an initial limit of 5000 requests per hour. So, things might get a little sluggish if many of you Digg this. So, please don't.. No, not really ;) Digg it and Retweet it if you like.
It is free API. so, you are required to keep that small Collecta badge as is.

Project
Go to project page for more details on plugin options, request features or submit bugs :(

Related Work
Lately I've been interested in related information and real-time search . So, this is the 4th plugin in that category:

Realtime Related Tweets Bar (2 weeks ago)
Rebuilding Google Blog Bar; jQuery-ed Version (Jun 2009)
A Smarter Related Posts widget (Apr 2009)

Realtime Related Tweets Bar: Another jQuery Plugin

2009-09-24T01:03:00.042Z

With all the buzz lately about Twitter real-time search. Why don't you add a real-time tweets bar related to your posts from your twitter timeline or from anybody or even limit it by a geocode coordinates!

Check out These Demos..
Each one links to the demo page where you can see HTML & CSS & JS you need to use... CSS code is important but it is almost the same across those different samples, so I'm not going to focus on it here.

Demo 1: Typical Real-time related Search ►
This sample will extract tags that already exists in the page and do a typical realtime related search..

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" 
type="text/javascript"></script>



<div class="related-tweets">loading..</div>

Use CSS in demo file then include jQuery and plugin JS and add a div with a "related-tweets" class and it will be auto-loaded with default options!

Demo 2: Real-time Search Limited to Some Users ►
Few options were changed here:
Limiting tweets by users like @TechCrunch and @mashable only.
Returning only tweets that have links.
Increasing entry transition time of each tweet to 500ms.
Animating text font-size instead of the default opacity animation.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" 
type="text/javascript"></script>



<div class="related-tweets" options="{

   debug:true

   ,from_users:'TechCrunch,mashable'

   ,links_only:1

   ,animate:'fontSize'

   ,enter_time:500

}">loading..</div>

Div now has a new attribute (options) that contains comma delimited list of options. (a trailing comma is fatal)

Demo 3: Realtime Search Limited by Geocode of 'Mountain View, CA'►
Returns tweets by users located within a given radius of the given latitude/longitude.

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" 
type="text/javascript"></script>



<div class="related-tweets" options="{

   debug:true

   ,geocode:'37.400465,-122.073003,25km'

}">loading..</div>

Just added a geocode on the from of "latitude,longitude,radius".
To convert an address to a geocode try this and don't forget to add the radius in mi(miles) or km(kilometers)!

Demo 4: Realtime Search by All Tags ►
By default, plugin will search twitter by OR-ing those tags to return tweets with any of the tags. but you can force the search to return tweets that contain all tags.
you may also limit number of the used tags to avoid empty result set when twitter can't find tweets that have all tags on current page!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" 
type="text/javascript"></script>



<div class="related-tweets" options="{

   debug:true

   ,animate:'height'

   ,or_tags:0

   ,max_tags:2

}">loading..</div>

you can see that (or_tags) was set to 0 to disable. and (max_tags) to 2. also animation is done by the height!

Demo 5: Just Your Twitter Timeline ►
This is a -not related not realtime- search, just your twitter feed. and using a typical Javascript call.
'status' was set to 1 to ignore tags.
'realtime' was set to 0 to stop realtime search and perform search once. and Increased 'n' which is the number of tweets to return.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js"></script>

<script type="text/javascript">  


   $(document).ready(function(){

      $('#rrt').relatedTweets({

         debug:true

         ,from_users:'Mike_More'

         ,status:1

         ,realtime:0

         ,n:20

         ,show_avatar:0

         ,show_author:0

      });

   });

</script>



<div id="rrt">loading..</div>

Since It is just your tweets. you might wanna hide avatar and author name by setting 'show_avatar' and 'show_author' to 0!

Features:
Now, You've seen most of the plugin features but let me summarize it..

Show realtime related tweets based on your post tags.
Show your twitter timeline; related to your post or not.
Return only tweets with links or return all.
Limit tweets by 1 or more users. (from/to/mention users!)
Limit tweets by a location geocode and a radius.
Search by tags in Or-ing or And-ing mode.
Many tweets' transition options like opacity, height, font-size.
Each part of the tweet like Avatar, links, Hashtags.. has its own class so you can customize its style.
Show or hide some parts of the tweet like avatar, author name, date.
Use a typical JS call or auto-load div elements that have "related-tweets" class.

Project Pages
For more details on plugin options, request features or submit bugs :(

* Original tweeties icon by Chris Wallace

Blogger said "Show your face!". Great, but..

2009-09-17T22:35:00.038Z

Google Blogger just Added another feature to show commenter avatar! So again. this is great, but if you have a customized template the avatars won't show up. So how to fix that..

How To Fix:

To enable profile images in your blog's comments, go to Settings | Comments.
If you still don't see avatars. Go to Layout > Edit HTML :.

Click "Download Full Template" to backup your template.
Check "Expand Widget Templates" to show full template.
Look-up <b:if cond='data:comment.authorUrl'> and insert the following code right before it:
<b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='35px' width='35px'/> </b:if> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if>

After Google Blogger 10th anniversary.. It started to present new features like:

Jump Breaks to show Post summaries on index page.
Tag-Cloud widgets : Partly cloudy, chance of labels
New Post Editor: An overview of the new post editor.

But I'm waiting most for Pages & File hosting space.. :)

Blogger said "You Might As Well Jump"! Great, but..

2009-09-09T23:49:00.011Z

Google Blogger has added new feature, an easy way to show posts summaries on your blog index page! But if you still don't see the "read more" link like I did! Google knows why, But I had to dig into it a little bit more..

If you didn't read [You Might As Well Jump!] from Blogger Buzz. It is pretty straight-forward:

You can insert a "Jump Break" by clicking on "Insert Jump Break" button on the toolbar of the NEW post editor.

If you don't have the NEW post editor: go to Settings > Basic > set 'Select post editor' to 'Update editor'
Or just type "" where you want to position the jump break.

To customize "Read more" text: click Layout and then Edit the Blog Posts widget.

After doing that, You can see that index page shows only posts summaries.. great, but..

You don't see the "read more" link yet?
Very normal, it is just a new feature and your blog template will mostly need this tweak.. Google just kept it under cover @ Creating 'After the jump' summaries :

Open your blog's Layout | Edit HTML tab, and then click the Expand Widget Templates checkbox.
Scan your HTML for the following snippet <data:post.body/>
Paste the following snippet directly below it:

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

</div>

</b:if >

After Google Blogger 10th anniversary.. It started to present new features like:
- Tag-Cloud widgets : Partly cloudy, chance of labels

- New Post Editor: An overview of the new post editor

and other minor stuff.. But I'm still waiting for 2 major features as I shouted at [@Google: you got Pages, Sites and Blogspot... why?!], which are:
- Blog Pages!
- File space for CSS, Javascript files as in Google Page Creator.

Well, I'm waiting Google..

@Google: you got Pages, Sites and Blogspot... why?!

2009-08-28T20:12:00.015Z

After Google Blogger 10th anniversary.. Google Blogger promises that many of our dreams as Bloggers will come true so soon.. by dreams I mean "Product Ideas for Blogger" which Google has launched on last April to collect users votes & feature requests on blogger.

Google Blogger actually has started by offering a Tag-Cloud widget..
I've already made a Tag-Cloud widget to address the issue but a native solution from blogger will certainly be better :(

You should know that.. don't even think of skipping the following part :)

In August 23, 1999, Blogger was launched by Pyra Labs. As one of the earliest dedicated blog-publishing tools, it is credited for helping popularize the format.
In February 2003, Pyra Labs was acquired by Google. The acquisition allowed premium features (for which Pyra had charged) to become free.
On August 14, 2006, Blogger launched its latest redesign version in beta. In December 2006, this new version of Blogger was taken out of beta.

In 2006 Google introduced Page Creator. As of August 2008, Google pages had over 3 million users.
In September 2008, Google announced that it would not accept new sign-ups to Page Creator, instead encouraging users to use Google Sites.

Google Sites was launched on February 2008. based on the wiki-like software "JotSpot" that was acquired by Google on October 2006!
As of May 21, 2008, Google Sites became available for free separately from Google Apps, and without the need for a domain.

What I'm trying to say..
Google Blogger was a very successful acquisition. Google Blogger is the best free blogging platform out there.. I love it.. so please focus on developing it!

A Major advantage of Google Page Creator was the free 100MB file hosting. and that is high feature request on "Product Ideas for Blogger" to allow users to upload Javascript and CSS to their blogs.. Google already offers 1GB of free image hosting on Picasa! so how hard it gonna be?

Another advantage of Page creator is creating pages :) People also requested that to be added to blogger..

After responding to this 2 particular wishes, It would be easy for Google Blogger to completely replace Page creator.. also Google sites will not offer any extra features! Google sites will have no place in the picture.. Period

I've been thinking about this for a while.. and blogging about it gives me a relief what about you? what do you think?

Paging Listbox; Another jQuery Plugin

2009-07-12T23:11:00.010Z

Few months ago I posted a Javascript class on how to Implement a paging listbox using jQuery. which has drawn a lot of traffic and few questions lately so I thought it would be more convenient to rewrite the code as jQuery plugin and make few enhancements plus providing a complete sample code in VB.Net and C#.

Enhancements:

Easier usage, You only need to insert a div with the class "paging-listbox" and settings inside "options" attribute to automatically have the paging listbox loaded inside that div. still you can load the listbox with regular Javascript call.
Added support for right-to-left layout.
You can pass additional parameters to source page via AJAX. for example a category ID that user selects from another form field and should be used to query records by on the source page.
Few visual enhancements.

Implementation Steps

First, download minified JavaScript of latest version from project page.
Upload plugin Javascript file to your site. replace the link "jquery.paginglistbox-1.0.js" with the full URL you got.
*No need to host jQuery Javascript on your own.. Google hosts jQuery for you!
Include the following CSS Code somewhere in your page usually inside Head element.
Insert Code as described in the following Typical usage

CSS Code
<style type="text/css"> /* container layer of listbox */ .pl-layer{ border:gray 1px solid; margin:0; } /* arrow button */ .pl-button{ border:gray 1px solid; background-color:#333333; color:white; padding:.5px; font:100% arial; margin:0; width:18px; } /* keyword input */ .pl-key{ margin:0; font:100% arial; border:gray 1px solid; } </style>

Typical Usage
You will only need to include the 2 JavaScript's (jQuery and plugin) once; even if you have more than one listbox.
You can defer Javascript downloading in the browser by placing the JavaScript's by the end of your web page.
Options must be separated by a comma, but a trailing comma is fatal.
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.paginglistbox-1.0.js"></script>  <div class="paging-listbox" options="{ source:'listbox.aspx' ,id:'Field2' ,value:'product' }"> loading.. </div>for more usage examples download sample code..!

Custom Usage
Load plugin content by Javascript call..
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.paginglistbox-1.0.js"></script> <script type="text/javascript"> // on document ready $(document).ready(function(){ // Creating listbox by javascript call $('#listbox').pagingListbox({ source:'listbox.aspx' ,id:'Field1' ,value:'product' }); }); </script>

Check Project page for detailed documentation; Follow project changes, request features or submit bugs :(

Plugin files

Plugin Documentation

Posts Thumbs for WordPress; The Smart & Easy way

2009-07-04T07:48:00.005Z

Have you spent much time adding posts thumbnails using custom fields.. or -like me- spent much time trying many plugins that either not working well or very limited.

I was always not convinced with "Read more" built-in option in WordPress. As it is very unlikely to use the starting portion of your post as a teaser or summary.

Many people use custom fields for doing it which is somehow complicated. Especially if you are building a Wordpress Blog for a client; you would want to make it easy for him.

I've came across a very smart and easy plugin that will associate thumbnails to each post on your WordPress blog:
It is Custom Field Images

Here some of its features:

The plugin will intelligently utilize WordPress built-in media library. and that comes with many advantages..
You don't have to upload images again to attach thumbnail for each post.
On media library window you have a button "Insert CFI" to instruct the plugin to attach the selected image to current post. plus the image title you already entered for that image. (Which is a very SEO thing to do!)
My favorite feature is: Post Thumbnail is not saved by its URL instead by the Image ID , So in home page I can use the medium sized images and somewhere else -like Posts Reel- I can use the thumb sized images!
Very simple installation is required to replace the code that output whole post content with the post excerpt. and you configure the plugin to insert the thumb in excerpt. That is it
The plugin comes with a widget to display posts thumbs selected by any query you like (Recent 5 or Some Category Posts)
Plugin can extract thumbnails from images already in your posts content.
Still, If you have custom layout somewhere else. All you need is to place this line in the Loop
<?php custom_field_image('', 'size=medium&align=left'); ?>
Which will display medium sized images and left aligned!

More important than the plugin itself, is the developer Behind it. A dedicated developer that amazed me with his expertise and his fast response to bug reports or feature requests.

Go, get latest version from Plugin Homepage , Version 2.0 was just released last night!

Rebuilding The Google Blog Bar; jQuery-ed Version

2009-06-18T22:01:00.008Z

My first jQuery Plugin.. A 4KB jQuery plugin instead of a 118KB Google Blog Bar!!

I have shown before how to use Google Blog Bar as related posts widget, But when I actually tried to use it on my site, I didn't like all these JavaScript/CSS files that I've to include.
And since I already use jQuery -and who doesn't- I decided to rebuild the Blog Bar from scratch.

Of course, I'll be using the RESTful interface of the AJAX Search API that returns JSON encoded results. So I didn't scratch too much :)

Quick Definitions..
Google Blog Bar is a Google AJAX Search API application that lets you easily add page-controlled blog search results to your web pages or blog.

AJAX Search API is the easiest way to incorporate a Google search box on your site. You can incorporate results from Web Search, News Search, and Blog Search into your blog or web site with just a few lines of JavaScript.

Advantages Of My jQuery-ed Google Blog Bar:

Much lighter: Using Google Blog Bar, you will have to include 3 Javascript files (2 files Actually , but fist one dynamically loads the third ):
- Google AJAX API Loader file which is 15KB
- And AJAX Search API file which is 72KB
- Google Blog Bar file which is 31KB
- Plus 2 CSS files that you can go without them and weighs 26KB total
So, Total of Javascript files is 118KB vs. My 4KB Blog Bar!
Of course, I will not count jQuery 55KB, cause -as I said- it is an essential include.
More Control: Google Blog Bar will do repeated JSON queries to get more results that I didn't need and can't be disabled.
It is jQuery-ed, Which is the most important :) One can add extra pretty jQuery effects..
Works as related posts widget: When no query expression was set , By Default plugin use current page tags to create search expression by ORing those tags.

Implementation Steps

First, download minified JavaScript of latest plugin version from project page http://code.google.com/p/jquery-ed-google-blog-bar.
Sign-up for an AJAX Search API Key for your website You must have a Google Account to obtain a Google API key, and your API key is tied directly to your Google Account. You can generate multiple API keys for your account if you have multiple web sites.
Set your key in the default options list where it says key:'YOUR-KEY'
Upload plugin Javascript file to your site. If you are on Blogger try a free file hosting that provides direct linking like FileDen. replace the link "jquery.googleblogbar-1.0.min.js" with the full direct URL you got.
*Direct Linking: No redirection to another URL happens when you open link in a browser.
*No need to host jQuery Javascript on your own.. Google hosts jQuery for you!
Include the following CSS Code somewhere in your page usually inside Head element.
Insert Code as described in the following Typical usage
And the most technically important :) Give me some Digg/Dzone love or a link back attribution.

CSS Code
The following CSS code will show a typical Blog Bar as seen in the footer below.
<style type="text/css"> /* container */ div.my-blog-bar{ position:relative; } /* inner div */ div.mbb-inner{ border:silver 1px solid; padding:4px 12px 8px; margin:0 78px 0 0; position:relative; overflow:hidden; } /* bar title */ div.mbb-inner h2{ float:left; font-size:12px; margin:0 4px 0 0; line-height:1.4em; } /* ul list */ div.mbb-inner ul{ float:left; padding:0 0 0 0; margin:0 0 0 0; } div.mbb-inner li{ margin:0 0 0 0; line-height:1.4em; list-style-type:none; } /** post link **/ div.mbb-inner li a{ color:navy; } /** author name and date **/ span.mbb-by{ color:gray; } /** excerpt and blog url **/ .mbb-content{ } .mbb-url{ color:green; } /** powered by google **/ div.mbb-branding{ margin-top:0; position:absolute; right:0; top:0; width:75px; } div.mbb-branding-text{ color:gray; font-size:10px; } a.mbb-branding-link img{ border-width:0; } </style>

Typical Usage
To show a horizontal blog bar.. place this div where you like, set options attribute and they get auto. loaded!
You will only need to include the 2 JavaScript's (jQuery and my plugin) once; even if you have more than one div.
You can defer Javascript downloading in the browser by placing the JavaScript's by the end of your page.
Options must be separated by a comma, but a trailing comma is fatal.
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="jquery.googleblogbar-1.0.min.js" type="text/javascript"></script>   <div class="my-blog-bar" options="{title:'More Tech Tips!' , blogURL:'moretechtips.net'}">loading..</div> <div style="clear:both"></div>  <div class="my-blog-bar">loading..</div> <div style="clear:both"></div>

Custom Usage
Load plugin content by javascript call.. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="jquery.googleblogbar-1.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('div.some-other-class').myBlogBar({ key:'YOUR-KEY' ,title:'Blogsphere' ,q:'Google' ,hl:'en' }); }); </script> <div class="some-other-class">loading...</div>

Check Project page for detailed documentation; Follow project changes, request features or submit bugs :(

If you liked the plugin, Would you please vote for it on plugin page at jQuery site.

RESTful Tip: Setting Site Restriction in AJAX Search API

2009-06-18T18:30:00.006Z

The Google AJAX Search API provides simple web objects that perform inline searches over a number of Google services (Web Search, Local Search, Video Search, Blog Search, News Search, Book Search, Image Search, and Patent Search).

It is an old news that: The API exposes a raw RESTful interface that returns JSON encoded results so it would be easily processed by most languages and runtimes.

Although API JavaScript objects allow you to set site restrictions, On RESTful Interface nothing was said on how to do so using the Standard URL Arguments..!

Enough intro.. How to fix that?
You would normally create HTTP request and send the Standard URL Arguments. Particularly the search expression 'q' can be something like 'Google'.
What you need to do is to change it to
'Google site:moretechtips.net' in case you are doing a web search,
and
'Google blogurl:moretechtips.net' in case of a Blog Search..
and
'Google source:bbc' in case of a news Search..

Check my 4KB jQuery plugin using RESTful Interface of AJAX Search API to replace the 118KB Google Blog Bar!

Google AJAX APIs => Related Posts Widget Powered by Google

2009-05-15T00:27:00.023Z

Previously, I proposed a related posts widget for Blogger based on Blogger Data API .
This time will do simple adjustments on 2 Google AJAX Search API controls to work as related posts widgets. which should work on any blog as opposed to the previous method which was limited to Blogspot blogs only.

What is the Google AJAX Search API?

The Google AJAX Search API lets you put Google Search in your web pages with JavaScript. You can embed a simple, dynamic search box and display search results in your own web pages or use the results in innovative, programmatic ways :)

Google AJAX Search API Offers 2 handy search controls:
First take a look on both before we modify them..

Simple Search Box
Integrate Web Search, News Search, and Blog Search into your web site, and easily format the results to fit your site's style. You can also display results from your Google Custom Search Engine.

Blog Bar
Put a dynamic Google Blog bar on your web pages. Just enter the searches you want to power the blog bar, and the AJAX Search API does the rest. We support two different form factors — a thin horizontal strip and a wider vertical bar — so it's easy to incorporate dynamic blog content into the layout of your site.

Adjustments:

I will extract tags of current post from anchor (A) elements with the attribute [ rel=tag ] , and use them to execute a blog search.
Will also check that the current page is a post page by matching to a URL pattern.
Using CSS: will hide the search form of the Simple Search Box, also the Paging links and Posts snippets, then will attach the "powered by Google" branding to the widget bottom.

Advantages using Google AJAX Search API over Blogger Data API

Very generic; You are not limited to blogspot blogs, You can use this on other blogging software such as Wordpress, And if you like you can show related posts from other blogs as well.
Blogger Data API didn't support to search by all tags onetime. I had to aggregate each tag feed and calculate posts relevancy. This time we can query all search results once by ORing all tags.

The Adjusted Simple Search Box

<!-- CSS Part -->

<style type="text/css">

   /* bold the section header */

   .gsc-title { font-weight : bold; }

   /* Hide Search box. You can leave the search box shown to check that Tags were extracted correctly */

   form.gsc-search-box { display:none; } 

   /* Hide and the paging box */

   div.gsc-cursor-box { display:none; } 

   /* Hide result sinppet! */

   .gs-snippet { display:none; }

   /* Hide result url if you are restricting it to your blog */

   .gs-visibleUrl {display:none; }

</style>



<!-- Javascript Part -->

<script src="http://www.google.com/uds/jsapi?key=YOUR-KEY" type="text/javascript"></script>

<script type="text/javascript">



//<![CDATA[



// Load Search API Js v1

google.load('search', '1');



function DummyClipSearchResult(result) {}

function OnLoad() {

   if(!isPost()) return; // If not a post page

   var tags = getTags();

   if(tags.length==0) return; // If no tags found



   // Create a search control

   var searchControl = new google.search.SearchControl();

   // attaches the "powered by Google" branding into that element

   google.search.Search.getBranding(document.getElementById('branding'));



   // site restricted blog search

   var blogSearch = new google.search.BlogSearch();

   blogSearch.setUserDefinedLabel('Related Posts');

   blogSearch.setSiteRestriction('http://www.moretechtips.net');



   // Results are displayed as fully as possible within the object

   var options = new google.search.SearcherOptions();

   options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

   searchControl.addSearcher(blogSearch,options); 



   // tell the searcher to draw itself and tell it where to attach

   searchControl.draw(document.getElementById('searchcontrol'));



   // execute search on tags list by logically ORing

   searchControl.execute(tags.join(' | '));

}



// extract tags from A elements that has attribute rel=tag

function getTags() {

   var tags = [];

   var a = document.getElementsByTagName('a'); // get all A elements

   for(var i=0; i<a.length; i++) {

      var rel = a[i].getAttribute('rel');  // check rel='tag' 

      if (!rel || !a[i].firstChild) continue; 

      var tag = a[i].firstChild.data;

      if (!tag) continue; 

      tag= tag.replace(/\n/g,'').replace(/^\s\s*/,'').replace(/\s\s*$/,''); //some cleaning

       if (rel.toLowerCase()=='tag' && tag) tags[tags.length] = tag;

   }

   return tags;

}

// This fucntion check if the current page is a post to execlude index & archive pages

// It looks for a blogspot post pattern like '/2009/01/post-title.html' 

// If you'r on Wordpress Change line #4 to: if(!p.match(/^\/\d{4}\/\d{2}\/\d{2}\/[\w\-\_]+\//)) return false;

function isPost() {

   // fixed array of posts you might wanna execulde like 'contact' post

   var x = ['/2009/01/contact.html']; 

   var p = location.pathname;

   if(!p.match(/^\/\d{4}\/\d{2}\/[\w\-\_]+\.html/)) return false;

   for(var i=0; i<=x.length; i++) if(p==x[i]) return false;

   return true;

}

// setup on load call back

google.setOnLoadCallback(OnLoad, true);

//]]>

</script>



<!-- HTML Part : where widget is attached-->

<div id="searchcontrol"></div>

<div id="branding"></div>

The Adjusted Blog Bar

<!--

// The Following div element will end up holding the actual blogbar.

// You can place this anywhere on your page.

-->

<div id="blogBar-bar">

<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>

</div>



<!-- Ajax Search Api and Stylesheet

// Note: If you are already using the AJAX Search API, then do not include it or its stylesheet again

-->



<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-blbw&key=YOUR-KEY" type="text/javascript"></script>



<style type="text/css">

@import url("http://www.google.com/uds/css/gsearch.css");

</style>



<!-- Blog Bar Code and Stylesheet -->

<script src="http://www.google.com/uds/solutions/blogbar/gsblogbar.js?mode=new" type="text/javascript"></script>

<style type="text/css">

@import url("http://www.google.com/uds/solutions/blogbar/gsblogbar.css");



/* Customize the title [Related Posts] */

.horizontal_gsblb .titleBox_gsblb {

   display:block;

   float:left;

   font-size:100%;

   padding:4px 4px 0 0;

}

/* Hide the Tags list; You can undo this to check that Tags were extracted correctly */

.horizontal_gsblb div.statusBox_gsblb{ display:none; }

</style>



<script type="text/javascript">

function LoadBlogBar() {

   if(!isPost()) return; // If not a post page

   var tags = getTags();

   if(tags.length==0) return; // If no tags found



   var blogBar;

   var options = {

      largeResultSet : false,

      title : 'Related Posts',

      horizontal : true,

      orderBy : GSearch.ORDER_BY_DATE,

      // restrict by you site

      siteRestriction : 'http://www.moretechtips.net',

      autoExecuteList : {

         executeList : [tags.join(' | ')] // execute search on tags list by logically ORing

      }

   }

   blogBar = new GSblogBar(document.getElementById('blogBar-bar'), options);

}



// extract tags from A elements that has attribute rel=tag

function getTags() {

   var tags = [];

   var a = document.getElementsByTagName('a'); // get all A elements

   for(var i=0; i<a.length; i++) {

      var rel = a[i].getAttribute('rel');  // check rel='tag' 

      if (!rel || !a[i].firstChild) continue; 

      var tag = a[i].firstChild.data;

      if (!tag) continue; 

      tag= tag.replace(/\n/g,'').replace(/^\s\s*/,'').replace(/\s\s*$/,''); //some cleaning

      if (rel.toLowerCase()=='tag' && tag) tags[tags.length] = tag;

   }

   return tags;

}

// This fucntion check if the current page is a post to execlude index & archive pages

// It looks for a blogspot post pattern like '/2009/01/post-title.html' 

// If you'r on Wordpress Change line #4 to: if(!p.match(/^\/\d{4}\/\d{2}\/\d{2}\/[\w\-\_]+\//)) return false;

function isPost() {

   // fixed array of posts you might wanna execulde like 'contact' post

   var x = ['/2009/01/contact.html']; 

   var p = location.pathname;

   if(!p.match(/^\/\d{4}\/\d{2}\/[\w\-\_]+\.html/)) return false;

   for(var i=0; i<=x.length; i++) if(p==x[i]) return false;

   return true;

}



// arrange for this function to be called during body.onload

GSearch.setOnLoadCallback(LoadBlogBar);



</script>

To implement this on your blog:

Make sure that your blog exists in Google Blog Search like My Blog, Note that you can see results from your blog only.
If you are not there then you are doing something wrong in your blog!
Sign-up for an AJAX Search API Key for your website You must have a Google Account to obtain a Google API key, and your API key is tied directly to your Google Account. You can generate multiple API keys for your account if you have multiple web sites.
Replace my key with yours where you see [key=YOUR-KEY... ] at the included Js file of the Google API Loader JS.

Of course you can have the controls display related posts from any blog by removing the site restriction.
Or you can set it to "dzone.com" to get fresh related links from everywhere.

AJAX Search API also offers search results as JSON if you wish to use it with a language other than JavaScript..

Update
When I actually tried to use the blog bar on my site, I didn't like all these JavaScript/CSS files that I've to include.
And since I already use jQuery -and who doesn't- I decided to Rebuild the Google blog bar from scratch.

Code behind : A Smarter Related Posts widget for Blogger

2009-04-04T17:56:00.015Z

On this post I gonna walk you through the code behind my new widget [A Smarter Related Posts widget for Blogger].

If you just want to install the widget on your blog, go to A Smarter Related Posts widget for Blogger.

To see the widget in action, Scroll down to the end of this post. also hover on links to see relevancy score.

Google Data APIs provide a simple standard protocol for reading Blogger content in the form of feeds. and jQuery makes it very easy to work with.

These REST-style APIs are based on the Atom Publishing Protocol (AtomPub), using the standard Atom syndication format to represent data and HTTP to handle communication. The Google Data API protocol also extends AtomPub for processing queries, authentication, batch requests, and providing alternate output formats (JSON, RSS).

Many Google services support the Google Data API protocol. This time I will work with the Blogger Data API to aggregate blog feeds in JSON format. And will also use jQuery to handle JSON feeds of each related tag to build the related posts widget.

First go to Project page to download the JavaScript file.

Now, I'll describe how that widget works in order of execution (which looks like the reverse order of functions definitions)

1- you call the class and pass your options, Class constructor sets default options and use jQuery extend method to overwrite it with user preferences.

var op = { ...
   'blogURL':''
};
op = $.extend({}, op, userOp);

2- Check if user didn't specify a container selector then it create placeholder div by document.write to place it where script was called

if (!op.containerSelector) {
   document.write('<div id="related-posts" />');
   op.containerSelector = '#related-posts';
}

3- Attach initialization function to on window-load event or on document-ready

if(op.onLoad) $(window).load(initRelatedPosts);
else $(document).ready(initRelatedPosts);

4- 'initRelatedPosts' is called on window-load or on document-ready and checks if user specified a container selector to append placeholder div to it.

if(op.containerSelector != '#related-posts'){
   var container = $(op.containerSelector);
   if (container.length!=1) return;
   div = $('<div id="related-posts"/>').appendTo(container);
}

5- Find tags anchors in the body of current post if it wasn't preset by user. by selecting all links with attribute rel='tag'.

op.tags = [];
$('a[rel="tag"]:lt('+op.maxTags+')').each(function () {
   var tag= $.trim($(this).text().replace(/\n/g,''));
   if($.inArray(tag,op.tags)==-1) op.tags[op.tags.length]=tag;
})

6- Append Recent Posts title or Related Posts title in H2 element.
7- Appned Loading text if any.
8- Append ul with CSS class of loading if user provided one.
9- Get JSON feeds for recent posts

$.ajax({url:op.blogURL+'/feeds/posts/summary/'
   ,data:{'max-results':op.maxPostsPerTag,'alt':'json-in-script'}
   ,success:tagLoaded
   ,dataType:'jsonp'
   ,cache:true })

10- Or get JSON feeds for each tag. you can notice that it calls the summary feeds cause we don't need waste bandwidth on getting full feeds since all is needed is post title and URL.
Query string contains variables like: Category=Tag, max-results=maxPostsPerTag. for more info on available parameters check protocol reference.

for(var t=0; t<op.tags.length;t++) 
   $.ajax({url:op.blogURL+'/feeds/posts/summary/'
   ,data:{'category':op.tags[t],'max-results':op.maxPostsPerTag,'alt':'json-in-script'}
   ,success:tagLoaded
   ,dataType:'jsonp'
   ,cache:true })

After reading the reference you may ask yourself; we could pass all tags with 'or' and return all related posts one shot. But Blogger doesn't support this yet ): although it is in the API protocol reference! So I have to aggregate each tag feed and calculate score of each post based on number of common tags.

11- 'tagLoaded' function is called on load of every JSON feed. Then it loops entries to add links to the list by calling addPost function.

for (var i=0; i<json.feed.entry.length; i++) {
   var entry = json.feed.entry[i];
   var url='';
   for (var k=0; k<entry.link.length; k++) {
      if(entry.link[k].rel=='alternate') {
         url = entry.link[k].href;
         break;
      }
   }
   var title = entry.title.$t;
   if(location.href.toLowerCase()!= url.toLowerCase()) addPost(url,title);
}

and when all tags are loaded it remove loading text and loading class on ul.

12- 'addPost' function loops links list to find if link doesn't exist to add it. otherwise if link was found in some position:
- first increments link's score; Score is saved in an arbitrary attribute 'score' on each link.
- Loop links above it and compare their scores. so if the above links have lower score then current link is inserted before them.

var list = $('li',ul);
for(var i=0; i<list.length; i++) {
   var a= $('a', list.eq(i) );
   var sc = getScore(a);
   //Post exists ?
   if(a.attr('href')==url) {
      //Yes : Then increment score
      setScore(a,++sc);
      //Re-order : compare with prevoius li items
      for(var j=i-1; j>=0; j--){
         // find the item with higher score than current
         var jA= $('a', list.eq(j) );
         if (getScore(jA)>sc) {
            // re-order if only there are items in the middle to appear before
            if(i-j>1) list.eq(j).after(list.eq(i));
            return;
         }
      };
      // If no higher item then this one should go first
      if(i>0) list.eq(0).before(list.eq(i));
      return;
   }
}
//Add new post
ul.append('<li><a href="'+url+'" title="'+(op.relevantTip? op.relevantTip.replace('\d',1):'')+'">'+title+'</a></li>');

13- getScore function is used to get score from the arbitrary attribute 'score' on a link.
14- setScore function is used to set score on a link. also sets relevancy tip if required, for example '5 relevant tags!'.
And set link class based on relevancy if required to, for example 'related-post5'.

that's it. Hope that article was helpful for you on working with jQuery manipulation and aggregation of Blogger JSON feeds.

jQuery + GData API = A Smarter Related Posts widget for Blogger

2009-04-04T17:11:00.014Z

Displaying a related posts is a smart way for keeping your site visitors around. and you may have seen other Related Posts Widgets out there.. but this one will be Easier and Smarter.

check features list:

Easier : since All of the work is(has to be) done on the client side, You will not need to modify your template at all. widget will read post tags that blogger already display with each post.
Smarter : Cause This widget will list the top related 5(or more) posts sorted by relevancy!
Top relevant posts are the posts that have more tags in common with the current post.
More Optimized: Will only use summary feeds instead of querying default feeds that return full contents!
This widget also can work as a recent posts widget when there is no tags to aggregate.
Can be also used to get related posts from another blogspot blog. And in that case you don't have to run it on a blogspot!
A fixed list of tags can be used to aggregate.
It can display loading text or icon until widget is loaded.
Related posts list can be styled based on relevancy!
You can specify either to load widget on document ready or on window load.
Widget will be attached to container specified or it will be placed where you made the JavaScript call.

To see the widget in action, Scroll down to the end of this post. also hover on links to see relevancy tip.

This is the complete options table
Every variable is optional. exclude it to have default value.

Option	Description	Default value
blogURL	Other Blog URL or leave empty to aggregate yours	''
maxTags	max tags to look for on the page	5
maxPostsPerTag	max posts to be aggregated per tag	5
maxPosts	Specify a max. to remove extra posts that are least relevant or set to 0 to keep them.	5
containerSelector	jQuery Selector to find a container to append widget at the end of it, Use 'div.post-body' to have widget appended at the end of your post body. or leave empty so widget is placed where you called it	''
tags	don't specify any and tags are read from page content. or specify a fixed list to aggregate like ['jQuery','JSON']. also setting it to empty array [] will make it work as recent widget all the time.	null means not fixed
loadingText	Text to be displayed until widget is loaded. for example 'loading..'	'' means no loading text
loadingClass	CSS class will be set on list until widget is loaded which you can use to style the list with an AJAX icon on the background[ajaxload.info]. for example 'related-posts-loading'	'' means no CSS class
relatedTitle	H2 Title to be used for related posts widget. To disable title output set this to empty.	'Related Posts'
recentTitle	H2 Title to be used for recent posts widget when there are no tags on the page. Set this to empty and widget is canceled.	'Recent Posts'
postScoreClass	A CSS class prefix to be used to style posts based on relevancy. If you set to 'related-link' and maxTags=5 then related links can have classes like ('related-link1' to 'related-link5')	'' so feature is disabled
onLoad	true would insert widget on window load and after all page content(like images) is loaded. or false and widget is loaded after document is ready(before images)	false
relevantTip	For demo purpose you can show each post relevancy as a tool tip. set to '\d relevant tags!' and '\d' is replaced with number of tags in common.	''

If you want to understand code behind this widget, check [Code behind : A Smarter Related Posts widget for Blogger].

Typical Usage #1
To display related links at the end of every post. copy this code into a new HTML/Javascript widget and place at the bottom of the post or at the footer in the page elements section.
Widget uses jQuery v1.3.2, If you already included jQuery into your blog. no need to do it again.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'loadingText':'loading...'
});</script>

[containerSelector : 'div.post-body'] is the default container selector of your post body as output by blogger. which means find 'div' tag with class="post-body" if you unlikely modified it; find your new selector.
* Note that:
- ~~you should host widget javascript file on your own~~, Google code has no problem hosting the project javascript files.
- You may also try Fileden as it is only file hosting I know that would give you a direct-link (A Must for javascript to work) ~~or you can just upload it to your Google pages~~(phasing out).
But keep the jQuery URL as is, since Google hosts jQuery(and others) very very well.

Typical Usage #2
To show related links at the side column. copy this code into a new HTML/Javascript widget and place at the side in the page elements section.
Again, If you already included jQuery into your blog. no need to do it again.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'loadingText':'loading...'
});</script>

Style Widget with CSS
You wouldn't need any CSS unless you need extra customization.

<style type="text/css">
   /* Widget Div */
   #related-posts{
      /* Add your styles */
   }
   /* Widget H2 heading */
   #related-posts h2{
      /* Add your styles */
   }
   /* Widget UL list */
   #related-posts ul{
      /* Add your styles */
   }
   /* Widget loading text */
   #related-posts-loadingtext{
      color:green;
   }
   /* Widget loading class set on UL until it is loaded */
   /* you will need set the option: 'loadingClass':'related-posts-loading' */
   .related-posts-loading {
      /* Ajax Icon as background */
      background:transparent url(Load.gif) no-repeat right top;
   }
   /* Style links based on relevacny */
   /* you will need set the option: 'postScoreClass':'related-post' */
   .related-post1{ font-size:90%}
   .related-post2{ font-size:90%}
   .related-post3{ font-size:100%}
   .related-post4{ font-size:110%}
   .related-post5{ font-size:120%}
</style>

Check Project page for more information.. to follow project changes or request features or submit bugs.

Standardizing Social Bookmarking Widgets

2009-03-28T20:16:00.021Z

This is a second post about Social bookmarking widgets.. Where I provide a better way to integrate them in your pages and also asking for your feedback on my proposed standardization specifications :)

Scroll down to the end of this post to see widgets in action..

After I posted the previous [Creating Uniform Social Bookmarking Widgets], I faced some issues that are worth mentioning and polling too.

a) First, you should know how some of those social widgets work using Iframes [Digg, Dzone, Reddit, Retweet]:

You paste some JavaScript variables and include a remote JavaScript file.
Browser loads that remote JavaScript file and run it.
JavaScript file creates an Iframe that opens a remote web page inside it.
That web page may load other HTML/JavaScript/CSS/Images to build the widget for you.

Sounds creepy, right? So, As a Solution/hack I'll skip the first 2 steps and creates those Iframes with this simple function or you can easily do it on server-side.

b) The remote JavaScript file, create the Iframe by document.write which is not the best thing to do. and on my previous post I also used document.write to create their HTML/Java script code. And that was ok for Firefox and Chrome but it caused troubles to IE & Opera known as delayed JavaScript execution.

c) Another thing worth mention is that Propeller widget code is based on DOM manipulation. You place a HTML link to your URL that get manipulated by the remote JavaScript file to load another JavaScript & CSS file(s) and append some Div's & Form elements to build the widget. The good thing about this is: it gives you control on styling the widget as opposed to the Iframes method which you can't style HTML inside it.
So Iframe or JavaScript DOM manipulation?.. A Good way to answer that is to do a poll.. and as expected the crowd wisdom is correct, here are people votes:
26 (66%) Yes, as Javascript
07 (17%) I don't care!
03 (07%) Yes, as Iframes
03 (07%) Should stay as it is

The Question that this is all about:
Should Social Bookmarking come up with a standard for widgets that comply with some kind of rules like the following or it is not worth mentioning ?

a) Specs of Iframes method (Digg,Dzone,Reddit,Retweet):

Defined set of Sizes should be provided like 'Tall' and 'Wide' and should be easily customized [colors,borders,..] with the ability to work without images.
Should Provide Iframe code instead of having extra round trips to load a remote JavaScript that isn't really needed.
Parameters will be passed as query string without the need of any other JavaScript variables.
Widget should be smart enough to allow you to bookmark when the link is new or vote otherwise.
Optimize browser connections. why using many JS/CSS files inside the Iframe?

If it had to be JS, Then JS should...
b) Specs of JavaScript DOM manipulation method (Propeller)

No use of document.write (Yahoo Buzz : out of the game)
Can be included at the end of the document or at the head . Then it appends its content to some container referred by some selector.
Parameters could be passed as JavaScript variables or as query string.
Content elements should be defined with classes so we can style it.
They all use some JS library. Then they should make different versions that work with the most popular ones. So If it is jQuery library, you would include jQuery once in document head. fortunately Propeller doesn't load jQuery again if it is already included in you page.
One JS file only. No need to load other JS/CSS

Here is the JavaScript function that will display the widgets of both methods.
Widgets of method #1 are added as Iframes.
For widgets of method #2 : some HTML is added and optional variables are set, then an external JavaScript file is loaded dynamically.

<script type="text/javascript">

   function standardSocialWidgets() {

      var Place = document.getElementById("SocialWidgetsPlace");

      if(!Place) return;

     

      var title = document.title;

      var titleE = encodeURIComponent(title);

      var url = location.href;

      var urlE = encodeURIComponent(url);

     

      /* Social widgets : you can re order it or remove some, but watch for comma */

      /* HTML : is html to be appended to div, Vars are widget JS variables, Js : widget remote JS to load  */

      var widgets = [

         {'name':'Dzone','html':'<iframe src="http://widgets.dzone.com/links/widgets/zoneit.html?t=1&url='+urlE+'&title='+titleE+'" scrolling="no" frameborder="0"></iframe>'}

         ,{'name':'Reddit','html':'<iframe src="http://www.reddit.com/button_content?t=2&width=52&url='+urlE+'&title='+titleE+'&bgcolor=FFF&newwindow=1" scrolling="no" frameborder="0"></iframe>'}

         ,{'name':'Digg','html':'<iframe src="http://digg.com/tools/diggthis.php?u='+urlE+'&t='+titleE+'&w=new&k=%23ffffff" scrolling="no" frameborder="0"></iframe>'}

         ,{'name':'Retweet','html':'<iframe src="http://api.tweetmeme.com/widget.js?url='+urlE+'&style=normal" scrolling="no" frameborder="0"></iframe>'}

         ,{'name':'Propeller',

           'html':'<a class="propeller-story" title="'+title+'" href="'+url+'">'+title+'</a>'

           ,'vars': {'propellerVoteWidgetFormat':'medium'}

           ,'js':'http://propeller.com/public/js/vote.js'}

      ];

     

      for(var i=0; i<widgets.length; i++) {

         var clss = 'SocialWidget';

         if(i==0) clss = 'FirstSocialWidget';

         else if(i==widgets.length-1) clss = 'LastSocialWidget';

         // Append HTML

         Place.innerHTML=Place.innerHTML + 

                     '<div class="'+widgets[i].name+'Widget '+clss+'">'+ widgets[i].html +'</div>';

         // Set optional Vars 

         if(widgets[i].vars) for(k in widgets[i].vars) window[k]=widgets[i].vars[k];

         // load optional Js file and attach to head 

         if(widgets[i].js) {

            var head = document.getElementsByTagName("head")[0];

            var js = document.createElement("script");

            js.src = widgets[i].js;

            head.appendChild(js);

         }

      }

   }

   // Call >function on load , so it would load last 

   window.onload = function(){

      standardSocialWidgets();

   }

   // Or!! Call function on document ready if you using jQuery ,Who does not ?

   $(document).ready(function(){

      standardSocialWidgets();

   })

</script>

This time I tested it on FF3.0.7, IE 7.0 and Chrome 0.4

And CSS to style widgets

<style type="text/css">

   /* Style widgets place holder */

   #SocialWidgetsPlace{

      margin:0 auto 0 auto;

      width:350px;

   }

   /* Style Iframes */

   #SocialWidgetsPlace iframe{

      width:52px;

      height:80px;

      overflow:hidden;

   }

   /* Style widgets */

   .SocialWidget,.FirstSocialWidget,.LastSocialWidget{

      margin:0; 

      padding:2px; 

      float:left; 

      background-color:white; 

      width:56px; 

      height:84px;

      border-top:silver 1px solid; 

      border-bottom:gray 2px outset; 

      border-right:silver 1px dotted;

      text-align:center; 

      overflow:hidden;

   }

   .FirstSocialWidget{ border-left:silver 1px solid}

   .LastSocialWidget{ border-right:silver 1px solid}

   /* Customize Propeller widget */

   .PropellerWidget .p-frame,.PropellerWidget form,.propeller-widget{ width:52px !important; padding:0 !important;}

   .PropellerWidget .p-header{ display:none}

   .PropellerWidget .p-action-vote{ padding:1px !important; }

   .DzoneWidget{}

   .RedditWidget{}

   .DiggWidget{}

   .RetweetWidget{}

</style>

And HTML of the place holder to be put where you want widgets to be inserted

<div id='SocialWidgetsPlace'></div>

<!-- Clear Floating -->

<div style='clear:both'></div>

That's it!

Create Uniform Social Bookmarking Widgets

2009-03-28T00:05:00.010Z

We all like social networks but no-network is perfect! each network gives us a different JavaScript code with different parameters to install a different looking widget on each article.. Now I need and will do something about it.

To do something uniform: I'll have to pick one common style across those widgets.. The most popular style around is the 'Tall' one and it also looks like web 2.0.

I picked some social networks -like Dzone, Reddit, Digg, Propeller, Yahoo Buzz and Retweet- based on:
1- Has a 'Tall' widget
2- Popular
3- Smart enough to allow you to bookmark new links or vote on existing ones just by providing your URL not their permanent link.

This script will take current page title and URL and create a list of those uniform widgets.
JavaScript function to place at header or anywhere before calling it

<script type="text/javascript">

   // Generate Social Widgets 27 Mar 2009

   //   Author: Mike @ MoreTechTips.net

   function generateSocialWidgets() {

      var title = document.title;

      var url = location.href;

      // Social widgets : you can re order    it or remove some, but watch for commas

      var widgets = [

         {'name':'Digg'

          ,'js':'<script type="text/javascript">' +

               'digg_url="'+url+'";' +

               'digg_title="'+title+'";' +

               'digg_bgcolor="#ffffff";' +

               '<\/script>' +

               '<script src="http://digg.com/tools/diggthis.js" type="text/javascript"><\/script>'}

         ,{'name':'Dzone'

          ,'js':'<script type="text/javascript">' +

               'var dzone_url="'+url+'";'+

               'var dzone_title="'+title+'";'+

               'var dzone_style="1";' +

               '<\/script>' +

               '<script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"><\/script>'}

         ,{'name':'Propeller'

          ,'js':'<a class="propeller-story"' +

               ' title="'+title+'"' +

               ' href="'+url+'">'+title+'</a>'+

               '<script type="text/javascript">' +

               'propellerVoteWidgetFormat="medium";' +

               '<\/script>' +

               '<script type="text/javascript" src="http://propeller.com/public/js/vote.js"><\/script>'}

          ,{'name':'Reddit'

          ,'js':'<script type="text/javascript">' +

               'reddit_url="'+url+'";' +

               'reddit_title="'+title+'";' +

               'reddit_bgcolor="FFFBDC";' +

               'reddit_bordercolor="EAD5A1";' +

               'reddit_newwindow="1";' +

               '<\/script>' +

               '<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"><\/script>'}

         ,{'name':'Yahoo'

          ,'js':'<script type="text/javascript">' +

               'yahooBuzzArticleHeadline="'+title+'";' +

               'yahooBuzzArticleId="'+url+'";' +

               'yahooBuzzArticleType="text";' +

               '<\/script>' +

               '<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js"    badgetype="square"><\/script>'}

         ,{'name':'Retweet'

          ,'js':'<script type="text/javascript">' +

               'tweetmeme_url="'+url+'";' +

               '<\/script>' +

                '<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"><\/script>'}

      ];

      for(vari=0; i<widgets.length; i++) {

         var clss= 'SocialWidget';

         if(i==0)clss = 'FirstSocialWidget';

         else     if(i==widgets.length-1) clss = 'LastSocialWidget';

         document.write('<div    class="'+widgets[i].name+'Widget '+clss+'">'+widgets[i].js+'</div>');

      }

   }

</script>

CSS to style the created div's and widgets inside of it

<style type="text/css">

   #SocialWidgetsPlace {

      margin:0 auto 0 auto;

      width:350px

   }

   .SocialWidget,.FirstSocialWidget,.LastSocialWidget{

      margin:0px;

      padding:1px;

      float:left;

      background-color:white;

      width:54px;

      height:82px;

      border-top:silver 1px solid;

      border-bottom:gray 2px outset;

      border-right:silver 1px dotted;

      text-align:center;

      overflow:hidden;

   }

   .FirstSocialWidget{

      border-left:silver 1px solid;

   }

   .LastSocialWidget{

      border-right:silver 1px solid;

   }

   

   .PropellerWidget .p-frame{ width:52px}

   .PropellerWidget .p-header{ display:none}

   .PropellerWidget .p-action-vote{ padding:1px !important; }

   .DzoneWidget{}

   .RedditWidget{}

   .DiggWidget{}

   .RetweetWidget{}

   .YahooWidget{}

</style>

As you can see, you can give different styles for first & last widgets or a certain network widget.

Finally, place this JavaScript function call where you would like to show the widgets

<div id="SocialWidgetsPlace">

   <script type="text/javascript">

      generateSocialWidgets()

   </script>

   <div style='clear:both'></div>

</div>

Note that bookmarking-only buttons are still fine, To generate them like the ones I have on the right side. check [Add Top 20 Social Bookmarks To Your Page ].
The Advantage of widgets is that it simplifies voting process for the user. instead of going back to social network site and vote, you give him a fully functional button at the end of the article.

Important Update!: I fixed this code in another post [Standardizing Social Bookmarking Widgets], cause IE & Opera had troubles with it known as delayed JavaScript execution..

jQuery Manipulation: Clear tags are getting cloudy!

2009-03-14T15:06:00.005Z

for those who want or can only use JavaScript to convert regular tags list into a Tag-Cloud. jQuery and regular expressions are here to help.
Why Tag-Cloud? It is better looking and more meaningful.

Update:
Since Aug. 25, 2009: blogger now offers a built-in Tag-cloud. So you won't need this code for that job. still, jQuery manipulation is cool :)

Check demo :
click Reset to see tags original output.
click Get Cloudy 1 to convert it to Tag-Cloud without frequencies.
or click Get Cloudy 2 to convert it to Tag-Cloud with frequencies.

Code uses jQuery to manipulate and style those LI tags according to their frequencies, and regular expressions to extract the frequency contained in parentheses ().

Here is JavaScript code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

   function getTagsCloudy(placeHolderID,scale,percentClassPrefix,keepFreq,overwriteCSS){

      var list = $('#'+placeHolderID+' li');

      // overwrite CSS

      list.css(overwriteCSS);

      

      var max=0, min=0;

      //First pass : calc max and min 

      list.each(function (i) {

         //extract and parse frequency 

         freq = getTagFrequency($(this));

         //Calc max and min

         if (freq>max) max= freq;

         if (freq<min || min==0) min= freq;

      });

      

      //Second pass : calc percent

      list.each(function (i) {

         //extract and parse frequency 

         freq = getTagFrequency($(this));

         // Remove tags frequency ? 

         if (!keepFreq) $(this).html($(this).html().replace(/\n/g,'').replace(/\(\s*\d+\s*\)/g, '') );

         //Calc percentage 

         var percent = Math.ceil( ((freq-min+1)/(max-min+1)) * scale ); 

         $(this).attr('class',percentClassPrefix+percent);

      });

   }

   function getTagFrequency(x) {

      var matchs= x.text().replace(/\n/g,'').match(/\s*\d+\s*/g);

      if (!matchs) return 0;

      var freq = parseInt(matchs[matchs.length -1]);

      return freq>0? freq : 0;

   }

   

   // Calling it on document ready

   $(document).ready(function(){

      getTagsCloudy('Label12',10,'cloud-percent',false,{

         'border':'none 0',

         'padding':'2px 2px 1px 1px',

         'margin':'0 0 0 0',

         'list-style-type':'none',

         'float':'left',

         'display':'inline',

         'white-space':'nowrap'

      }); 

   });

</script>

you pass to the function :
1- The place holder ID of container div/widget.
2- Scale; for example 10 : then you need to make CSS classes from 1 to 10.
3- percentClassPrefix: like 'cloud-percent', then you need to prefix CSS Classes names with 'cloud-percent'
4- keepFreq : true to keep the frequencies or false to remove it.
5- overwriteCSS: Options/associative array to overwrite styles set or inherited on regular tags list. How to figure that out, use Firbug. Bottom line you want to remove list bullets and extra margins or padding or border and add some floating.

Here is CSS code

<style title="text/css">

   /* If you use 10 scale, then you need classes from 1-10 */

   li.cloud-percent1 { font-size:70% } 

   li.cloud-percent2 { font-size:80% } 

   li.cloud-percent3 { font-size:80% } 

   li.cloud-percent4 { font-size:90% } 

   li.cloud-percent5 { font-size:100% } 

   /* you can bold higher frequency tags or color them  */

   li.cloud-percent6 { font-size:110%; font-weight:100;} 

   li.cloud-percent6 { font-size:110%; font-weight:100;} 

   li.cloud-percent7 { font-size:120%; font-weight:200;} 

   li.cloud-percent8 { font-size:130%; font-weight:300;} 

   li.cloud-percent9 { font-size:140%; font-weight:400;}

   li.cloud-percent10{ font-size:150%; font-weight:500;} 

   /* neded To make container div expand with the content layout changes */

   .Label div {Overflow:Auto}

</style>

If you use 10 scale, then you need classes from 1-10, and as you see you can control how they are styled.
You can bold higher frequency tags or color them, you can even hide minimum frequency tags by setting [display:none;] on the first class.

And the HTML code of Tags/Labels:
See how they were originally output by Blogspot. And you don't need to change it.
Tags list should look like it.. which is the default output of Blogger..

<div class="widget Label" id="Label100">

<h2>Tags</h2>

<div class='widget-content'>

   <ul>

      <li><a href='http://www.moretechtips.net/search/label/ADO.Net'>ADO.Net</a>(7)</li>

      <li><a href='http://www.moretechtips.net/search/label/AJAX'>AJAX</a>(2)</li>

      <li><a href='http://www.moretechtips.net/search/label/ASP'>ASP</a>(11)</li>

      <li><a href='http://www.moretechtips.net/search/label/ASP.Net'>ASP.Net</a>(15)</li>

      <li><a href='http://www.moretechtips.net/search/label/DAL'>DAL</a>(7)</li>

      <li><a href='http://www.moretechtips.net/search/label/IIS'>IIS</a>(6)</li>

      <li><a href='http://www.moretechtips.net/search/label/javascript'>javascript</a>(5)</li>

      <li><a href='http://www.moretechtips.net/search/label/jQuery'>jQuery</a>(3)</li>

      <li><a href='http://www.moretechtips.net/search/label/OOP'>OOP</a>(5)</li>

      <li><a href='http://www.moretechtips.net/search/label/Paging'>Paging</a>(9)</li>

      <li><a href='http://www.moretechtips.net/search/label/performance'>performance</a>(7)</li>

      <li><a href='http://www.moretechtips.net/search/label/Regular%20expressions'>Regular expressions</a>(3)</li>

      <li><a href='http://www.moretechtips.net/search/label/SEO'>SEO</a>(4)</li>

      <li><a href='http://www.moretechtips.net/search/label/SQL%20Server'>SQL Server</a>(6)</li>

      <li><a href='http://www.moretechtips.net/search/label/Unicode'>Unicode</a>(4)</li>

      <li><a href='http://www.moretechtips.net/search/label/VB.Net'>VB.Net</a> (7)</li>

      <li><a href='http://www.moretechtips.net/search/label/XML'>XML</a> (3)</li>

   </ul>

</div>

</div>

In Other words : <li> <a href="some link"> Label name </a> (5) </li> . Of Course extra line-breaks or spaces are ignored.

that's it..! let it get cloudy..

Blogspot experience; How to simplify template changing

2009-03-13T13:34:00.016Z

I had a recent experience with changing my blogger template.. Now it is time to share some tricks to simplify things with next one trying to change it.. cause you should do it especially if you are still working with those 800x600 built-in blogger templates.

To start editing your template: go to Layout > Edit HTML > check 'Expand Widget Templates'.

Backup your original template..
And Page elements content (HTML/JavaScript).. Cause you'll need it!
Look for a template that inspires you
you can try eblogtemplates.com or just google it.. you should know that most users are using 1024x768 screens or bigger..
Try it first on a temporary blog..
It is easy to create another free blog on blogspot and try the new template on it first.. and when satisfied copy the full template back to your original blog
Use Text Editor to simplify editing template code
It is better to edit template file in external Apps like EMEditor, Notepad++ instead of editing inside the browser text area. With syntax coloring and code folding.. your job will be much easier
Use Ads blocker or comment Adsense code while you still editing
cause refershing pages frequently can get you banned [100 AdSense Tips]
Change widget IDs in the new templates
New templates will come with some widgets your already have and some new.. You should set the Old widgets IDs in the new template by the their IDs in the old template.
If you get errors you might need to set the new widgets IDs with higher numbers [How to fix bx-XXXX Errors]
Remove extra widgets
Templates authors might put their adsense code in the templates for demo purpose.. and other extra widgets.. remove it!
Some parts are missing ?
You might find some parts missing.. specially the new Blogspot features like the inline comment form.. To fix it : [How to add a comment form beneath your blog posts].
Other missing parts... check your original template code for missing part.
Don't depend on Blogger Monetize options
Sometimes it shows Ads with dimensions that aren't suitable to the place holder.. Create your Ad units and get Ad code and place it yourself in HTML/JavaScript widgets.
You are not done yet
Add your special logo and customize colors of the template so it would stand out..
Under construction message
finally, While you changing the template at your real blog you might want to give users an under construction message until you done. Cause you might get unexpected errors or un-comment those adsense codes we commented before. Code below will create a big black layer over your page.
  <h1 ondblclick='this.style.display="none"' style='margin:0; top:0; left:0; z-index:5; position:absolute; width:100%; height:1000%; padding:30px; background-color:black; color:white; text-align:center'> Few design changes,<br/>please check back in 10 minutes </h1>

I hope I encouraged you to start changing your template..

Blogger SEO Tip: Use Post Labels as Meta Keywords

2009-03-12T23:44:00.011Z

Meta keywords are very important to do better SEO for your blog.. And you should know that Search engines look for different description and keywords for each page of your site. If you put the same thing across all pages of your site, search engines may regard this as spam.

I saw lots of examples on how to add meta title/description based on the post title for Blogger/Blogspot. but I couldn't find one for using labels/Tags as meta keywords for each post.

After searching I found [Changing the Blogger Title Tag] which describes how to use the post title as the header. although now that could be done by less code like this

<!-- Post/Archive Page -->

<b:if cond='data:blog.pageType != &quot;index&quot;'>

   <title><data:blog.pageName/></title>

<!-- Index Page -->

<b:else/>

   <title><data:blog.pageTitle/></title>

</b:if>

So instead of using "data:blog.pageTitle" you use "data:blog.pageName" for post & archive pages. Otherwise, for pages like index/label pages "data:blog.pageTitle" will do the job.

But as far as I see at the very brief Blogger documentation. This is the only way to use labels as meta keywords..
Enough talking.. Here is the code to do it.. which you should place instead of the Head tag..!
The Code is commented and it also outputs the Title and Meta Description tags(using Post title) for your convenience..

<!--::::::::::: Block1: Output post meta keywords -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

   <b:section id='meta1' showaddelement='no'>

   <!-- widget must be a of Type = 'blog' to have posts data exposed, and must have a unique id -->

   <!-- Empty Includables(functions) to output nothing, You must keep them ): -->

   <b:widget id='Blog2' locked='no' type='Blog'>

      <b:includable id='nextprev'/>

      <b:includable id='backlinks' var='post'/>

      <b:includable id='post' var='post' />

      <b:includable id='status-message'/>

      <b:includable id='comment-form' var='post'/>

      <b:includable id='backlinkDeleteIcon' var='backlink'/>

      <b:includable id='postQuickEdit' var='post'/>

      <b:includable id='commentDeleteIcon' var='comment'/>

      <b:includable id='feedLinks'/>

      <b:includable id='feedLinksBody' var='links'/>

      <b:includable id='comments' var='post'/>

      <b:includable id='main' var='top'><!-- Main Function of Any widget comes with ID 'main' -->

         <!-- Loop Page Posts (only 1 in a post page )-->

         <b:loop values='data:posts' var='post'>

            <b:if cond='data:post.labels'>

               <!-- If the post has labels, make Meta keywords by looping lables -->

               &lt;meta name=&quot;keywords&quot; content=&quot;<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>&quot; /&gt;

            </b:if>

         </b:loop>

      </b:includable>

   </b:widget>

   </b:section>

</b:if>

<!--::::::::::: Block1 END -->



<head> <!-- THE HEAD -->



<!-- must include(called) here to output other head sub elements -->

<b:include data='blog' name='all-head-content'/>



<!--::::::::::: Block2: Output Index Title,keywords,decription and Post Title,description  -->

<!-- Post/Archive Page -->

<b:if cond='data:blog.pageType != &quot;index&quot;'>

   <title><data:blog.pageName/></title>

    <meta name='description' expr:content='data:blog.pageName' />

<!-- Index Page -->   

<b:else/>

   <title><data:blog.pageTitle/></title>

   <meta name='keywords' content='your,blog,keywords!!' />

   <meta name='description' content='your blog description!!' />

</b:if>

<!--::::::::::: Block2 END -->

Some Issues you should be aware of ):
1- XHTML validation will give your warnings about these issues :

Meta Keywords tag Appears before the Head tag.
Why we have to put that code before the head tag? you have to ask ):
well.. You can't place a widget outside of a section, you can't place a section inside head tag. and Post lables must be called inside of 'Blog' widget.
Meta Keywords will be surrounded with Div tags which should not appear there.
why? Cause Widget and sections Tags are auto. converted to div tags by Blogger..!

2- Some Meta tags analyzers will warn you that they don't see meta keywords (Cause it was outside of the head).. But Most search engines would be able to find your meta keywords..
As you can see that's why I'm separating the code into 2 blocks:
first one outside the Head tag to output Post Meta keywrds.
Second one inside the Head Tag to output Title and meta description of all pages and meta keywords for index page; without the need of a widget. And in case an engine didn't like those meta keywords, you still have the title and description where they should be.

3- After Adding that code , you will get errors when trying to do anything in the 'Page elements' and clicking save. the Only solution is cut Block1 from the template & save, do what you need in 'page elements' & save. paste Block1 back in the template.
It is the only way, until Blogspot pay attention to the issue!

To edit your Blogspot template

Go to Layout > Edit HTML > Check 'Expand Widget Templates', and don't forget to save a backup before you do anything..
Don't forget to remove those comments.
Replace those Static Blog meta tags content with real ones.

Update #1
I've adjusted the code to show a title in archive page that is different than index page title. as requested by Silver Bullet.

Update #2
I corrected the code to show different title in label pages. It's considered as an 'index' page but it has a different title. So, we should give it a different title! thanks to GunGz.

jQuery Fun: Greeting Your Site Referrals

2009-02-13T21:47:00.026Z

This is a complete javascript example to detect your site visitors referrer and greeting them with a message based on their referrer url.
For example, when a dzone user clicks on your link from dzone site, they get a message to remind them to vote up your site.

If you didn't see the message already, click here to see a greeting box..
Or Try pressing 'enter' on the Browser address bar to see the no-referrer message.
Or click here to google this post title then click on my site link to get referred back here and see the googler message.

The code consists of few CSS to style the message box and uses jQuery to show up the message box and array of regular expressions to define each referrer URL pattern and the corresponded message.

<html>
<head>
<title>jQuery Fun: Greeting Your Site Referrals</title>
<style type="text/css">
   /* Style your Message Div */
   #WelcomePlaceHolder{
      /* Keep hidden until called by javascript */
      display:none;
      Border:silver 2px solid;
      width:240px;
      height:125px;
      /* some space for BG image */
      padding:2px 2px 2px 100px;
      background:url('http://www.01gif.com/base/les_gifs_personnage_humains/hommes/hommes002.gif') no-repeat left center;
      font-size:25px;
      color:#333333;
      margin:5px;
   }
   /* Style Close Button */
   A.CloseButton {
      font-size:11px;
      font-weight:bolder;
      color:black;
      border:silver 2px solid;
      text-decoration:none;
      float:right;
      padding:2px;
   }
   A.CloseButton:hover {
      border:gray 2px outset;
      text-decoration:none;
   }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//Add urls regular expressions and your message(any HTML Code) to the array
var msgs = [
//null url : to show a message for direct traffic (no referer, some one who remember your site url!)
{'url':null,                           'msg':'I am glad you remember my site URL, enjoy your stay'}
//My url! : show message for referrals from your own site or null so you do not annoy them
,{'url':/^http:\/\/(\w+\.)?moretechtips\.net/,     'msg':null}
//Other urls
,{'url':/^http:\/\/(\w+\.)?google\.com/,      'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/,         'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/,         'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/,      'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
//You must keep it at the end of the list as it will match any non empty referrer
,{'url':/^http:\/\//,               'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
   var div = $('#WelcomePlaceHolder');
   //if Div was not placed means , not to show message
   if (!div.length) return;
   var ref = document.referrer.toLowerCase();
   var msg = findMatch(ref);
   // if not null msg found
   if(msg) {
      //Add Close Button and Show up message
      div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
         //Hide On click close Button
         $('.CloseButton',div).click(function(){ div.hide() })
      });
   } 
}
function findMatch(ref) {
   for(var i=0; i<msgs.length; i++)
      if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
         return msgs[i].msg;
   return null;
}

// Call the Referrer Detector function on document ready
$(DetectReferrer);
</script>
</head>
<body>
<div id="WelcomePlaceHolder"></div>
</body>
</html>

Note that patterns array includes 4 type of patterns (in lowercase):

Null Pattern, to add a message for direct traffic visitors (no-referrer)
Your Site Pattern, to match when people referred by your site links. and i kept the message 'null' so i don't annoy the visitors.
Generic pattern to match any referrer you didn't specify a message for, and it must come at the end of the array as it will match any non-empty referrer url.
The rest are Sites Patterns.
for example [/^http:\/\/(\w+\.)?google\.com/] will match referrer urls that:
[^] Start with
[http:\/\/] means 'http://'
[(\w+\.)?] Any -optional- sub domain
[google\.com] match 'google.com'

Also note that, you should put the place holder div (ID='WelcomePlaceHolder') where the message should appear, and if you didn't put it there no message will come up.

If you need to review regular expressions, check this good reference [RegExp Object Reference]

jQuery & Ajax Fun: Implementing a Paging Listbox

2009-01-30T21:18:00.033Z

Many times in web forms we need to provide a listbox with lots of elements, A good solution is to filter and page these elements to speedup page loading and optimize DB/Network usage..

Update! I've rewritten the code as jQuery plugin, made few enhancements and provided a complete sample code in VB.Net and C#. check-out the new plugin of Paging Listbox.

This is a complete implementation of a paging listbox using jQuery on client side and ASP.Net on server side. and should look like this..

The form web page, which also contains the JavaScript class to build the select box, of course don't forget to download the jQuery library.

<html>
<head>
<title>jQuery & Ajax Fun: Implementing a Paging Listbox</title>
<script type="text/javascript" src="JS/jquery-1.3.min.js"></script>
<script type="text/javascript">
function AjaxListBox() {
   this.source = '';
   this.divID= '';
   this.keyID= '';
   this.buttonID= '';
   this.lastKey= '';
   this.startup= true;
   this.minWidth=0;
   this.position = {'top':0,'left':0};
   var self = this;
   this.init= function() {
      $(document).ready(function(){
         //calc position and min-width for listbox
         self.minWidth = $('#'+self.keyID).width()+ $('#'+self.buttonID).width()+4;
         self.position = $('#'+self.keyID).position();
         self.position.top= self.position.top + $('#'+self.keyID).height()+2;
         // Position and hide div 
         $('#'+self.divID).css({'display':'none','border':'gray 1px solid','position':'absolute','z-index':5,'top':self.position.top,'left':self.position.left});
         // bind onclick handler for 'toggle' button
         $('#'+self.buttonID).bind('click',null,self.toggle);
         // bind onkeydown handler for 'Key' textinput and call find function
         $('#'+self.keyID).bind('keydown',null,self.keydown);
         //load list
         self.load();
      });
   }
   this.load= function(key,pi) {
      if(key==null ||key=='undefined') key='';
      if(pi==null ||pi=='undefined') pi='';
      //Save key to use when move through pages
      this.lastKey= key; 
      
      $('#'+this.divID).html('please wait..');
      $.get(this.source,{'key':key,'pi': pi},this.loaded,'html' );
   }
   this.loaded = function(data,txtStatus) {
      //Set Inner html with response of Ajax request
      $('#'+self.divID).html(data);
      $('#'+self.divID+' > select').css({'border-width':'0'});
      //Add handler for onchange to reload when another page is requested
      $('#'+self.divID+' > select').bind('change',null,self.change);
      //Add handler for onblur to hide box
      $('#'+self.divID+' > select').bind('blur',null,self.hide);

      if (self.startup) self.startup=false;
      else self.show();
   }
   this.change = function() {
      //Get Value of Select Box
      var v = $('#'+self.divID+' > select').val();
      //To do paging the value must be like 'pi=2' which means go to page 2
      if (/^pi=\d+$/i.test(v)) {
         var pi= v.replace(/pi=/i,'');
         self.load(self.lastKey,pi);
      }   
   }
   this.toggle = function(e) {
      if ($('#'+self.divID).css('display')=='none') self.show();
      else  self.hide();
   }
   this.show = function(e){
      $('#'+self.divID).show();
      //Insure width is more than min-width
      var w = $('#'+self.divID+' > select').width();
      if (w>0 && w<self.minWidth) $('#'+self.divID+' > select').width(self.minWidth);
   }
   this.hide = function(e){ 
      $('#'+self.divID).hide();
   }
   this.find = function() {
      //text to search for
      self.load($('#'+self.keyID).val());
   }
   this.keydown = function(e) {
      // this will catch pressing enter and call find function
      var intKey = e.keyCode;
      if(intKey == 13) { 
         self.find();
         //and prevent submitting the form that contain this input box
         return false;
      }   
   }
}
</script>
<style type="text/css">
   * {
      font:12px arial 
   }
   .AjaxListBoxKey {
      border:gray 1px solid;
      width:120px;
   }
   .AjaxListBoxKeyBTN{
      border:silver 1px solid;
      background-color:#333333;
      color:white;
      padding:.5px;
      font:12px arial;
   }
</style>
</head>
<body>
   <form id="form1" action="" method="post">
      Select Product
      <input id="key" name="key" type="text" class="AjaxListBoxKey" /><input type="button" id="find" class="AjaxListBoxKeyBTN" value="&#9660;" />
      <div id="box"></div>
      <script type="text/javascript">
         var box = new AjaxListBox();
         box.source = "listbox.aspx";
         box.divID = "box";
         box.keyID = "key";
         box.buttonID= "find";
         box.init();
      </script>
    </form> 
</body>
</html>

The server side page(whatever the language is!) is requested to handle query string parameters (pi: PageIndex, key: Search keyword) and response with just a list box(no other tags!) that contains the matched elements at the requested page index, plus 2 extra elements to go to previous and next pages indexes with value like 'pi=3' which means go to page 3. Of course you can select the PageSize and listbox size that works for you.

Here is server side page "listbox.aspx"

<%@ Page Language="VB" %>
<script runat="server" language="VB">
   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
      Dim key As String = Request.QueryString("key") & ""
      Dim PageIndex As Integer = 1
      Try
         PageIndex = Integer.Parse(Request.QueryString("PI"))
      Catch ex As Exception
         PageIndex = 1
      End Try

      Dim ps As New Products
      ps.PageSize = 5
      ps.PageIndex = PageIndex
      ps.SelectItems(Product.ProductStatus.Active, key)
      Response.Write(ps.PagingBox("ProductID", 0, , , 5))
      ps = Nothing
   End Sub
</script>

On Listbox.aspx I'm using my favorite[Traditional yet Powerful : Data Access Layer for ASP.Net] to access the products Table after adding the following function to the collection class to build the listbox.

Public Function PagingBox(ByVal FieldID As String, ByVal SelectedID As Integer, Optional ByVal FieldClass As String = "", Optional ByVal Onchange As String = "", Optional ByVal size As Integer = 0) As String
   Dim ret As New StringBuilder("<select name=""" & FieldID & """ id=""" & FieldID & """")
   If FieldClass > "" Then ret.Append(" FieldClass=""" & FieldClass & """")
   If Onchange > "" Then ret.Append(" Onchange=""" & Onchange & """")
   If size > 0 Then ret.Append(" size=""" & size + 2 & """")
   ret.Append(">")

   If Me.Count = 0 Then
      ret.Append("<option value="""">-- No Results! --</option>")
   End If

   If PageIndex > 1 Then
      ret.Append("<option value=""pi=" & (PageIndex - 1) & """>" & _
               "-- to Page " & (PageIndex - 1) & " of " & PageCount & " --</option>")
   End If
   For i As Integer = 0 To Me.Count - 1
      Dim P As Product = Item(i)
      ret.Append("<option value=""" & P.ID & """")
      If P.ID = SelectedID Then ret.Append(" selected")
      ret.Append(">" & P.Name & "</option>")
   Next

   If PageIndex < PageCount And PageIndex > 0 Then
      ret.Append("<option value=""pi=" & (PageIndex + 1) & """>" & _
               "-- to Page " & (PageIndex + 1) & " of " & PageCount & " --</option>")
   End If

   ret.Append("</select>")
   Return ret.ToString
End Function

Many greetings to jQuery folks..

Creating Data Access Layer for A Multi-Language ASP.Net Application

2009-01-17T08:37:00.012Z

After i posted [Traditional yet Powerful : Data Access Layer for ASP.Net].. it is time to extend it to support a multi-language ASP.Net Application..

To support many languages.. Products table should be split into 2 tables. one for basic information and the other for language-dependent fields. here is the SQL Create script:

CREATE TABLE [dbo].[Products](
   [ID] [int]  PRIMARY KEY IDENTITY(1,1) NOT NULL,
   [Status] [tinyint] NOT NULL DEFAULT (0),
   [Price] [decimal](18,0) NOT NULL DEFAULT (0),
)

CREATE TABLE [dbo].[ProductsDetails](
   [ID] [int] NOT NULL DEFAULT (0),
   [Lang] [varchar](2) NOT NULL DEFAULT (''),
   [Name] [nvarchar](50) NOT NULL DEFAULT (''),
   [Description] [nvarchar](500) NOT NULL DEFAULT (''),
   CONSTRAINT [PK_ProductsDetails] PRIMARY KEY CLUSTERED 
   (
      [ID] ASC,
      [Lang] ASC
   )
)

You should notice that multi-language text fields are now saved in nvarchar instead of varchar to support Unicode.

Now, DAL classes need few changes and adding another 2 classes
The Entity Class for Products

Imports System.Data
Imports System.Data.Common
Imports Microsoft.VisualBasic

Public Class Product
   Public Enum ProductStatus
      None = 0
      Active = 1
      Inactive = 2
   End Enum

   Public ID As Integer
   Public Price As Decimal
   Public Status As ProductStatus
   ''' <summary>Detail Collection of this product</summary>
   Public Details As ProductsDetails
   ''' <summary> if GetLang=Nothing (default) no Detail Records is queried 
   ''' if GetLang="EN" then Detail(EN) is queried and added to the details Collection and you can refer to it by .Detail property
   ''' if GetLang="" then All Details records are queried and add to details collection and you can refer to each of them by .Detail(Lang) property 
   ''' </summary>
   Public GetLang As String = Nothing

   Public Sub New(Optional ByVal ProductID As Integer = 0)
      SelectItem(ProductID)
   End Sub

   Public Sub New(ByVal ProductLang As String, Optional ByVal ProductID As Integer = 0)
      GetLang = ProductLang
      SelectItem(ProductID)
   End Sub

   ''' <summary>Initialize Product Fields</summary>
   Public Sub Initialize()
      ID = 0
      Price = 0
      Status = ProductStatus.Active
      If Details Is Nothing Then
         Details = New ProductsDetails
      Else
         Details.Clear()
      End If
   End Sub

   ''' <summary>Return a Detail Object based on Lang param. If Lang was not specified return first Detail Object found</summary>
   Public ReadOnly Property Detail(Optional ByVal Lang As String = "") As ProductDetail
      Get
         If Details.Count = 0 Then Return Nothing
         If Lang = "" Then Return Details(0)
         For i As Integer = 0 To Details.Count - 1
            If Details(i).Lang.ToUpper = Lang.ToUpper Then
               Return Details(i)
            End If
         Next
         Return Nothing
      End Get
   End Property

   Friend Sub Populate(ByRef dr As DbDataReader)
      Populate(CType(dr, Object))
   End Sub
   Friend Sub Populate(ByRef dr As DataRow)
      Populate(CType(dr, Object))
   End Sub
   Private Sub Populate(ByRef dr As Object)
      ID = CInt(dr("ID"))
      Price = CDec(dr("Price"))
      Status = CByte(dr("Status"))
   End Sub

   ''' <summary>Select Product by ID</summary>
   Public Sub SelectItem(ByVal ProductID As Integer)
      Call Initialize()

      If ProductID = 0 Then Exit Sub

      Dim cmd As New GenericCommand("SQLConn")
      Dim rdr As DbDataReader
      'Select Query
      cmd.CommandText = "Select Top 1 Products.* "
      If GetLang > "" Then cmd.CommandText += ",Lang,Name,Description"
      'from
      cmd.CommandText += " from Products"
      If GetLang > "" Then cmd.CommandText += ",ProductsDetails"
      'where
      cmd.CommandText += " Where Products.ID=@ID"
      If GetLang > "" Then cmd.CommandText += " and ProductsDetails.ID=Products.ID and Lang=@Lang"
      cmd.AddParam("@ID", ProductID)
      If GetLang > "" Then cmd.AddParam("@Lang", GetLang)

      rdr = cmd.ExecuteReader()
      If rdr.Read() Then
         Populate(rdr)
         If GetLang > "" Then
            '' Add Detail
            Dim det As New ProductDetail
            det.Populate(rdr)
            Details.Add(det)
            det = Nothing
         End If
      End If
      rdr.Close()
      rdr = Nothing
      cmd = Nothing

      If GetLang = "" And GetLang IsNot Nothing And ID > 0 Then
         Details.SelectItems(ID)
      End If
   End Sub

   ''' <summary>Insert new Product and get new ID</summary>
   Public Sub InsertItem()
      If ID <> 0 Then Exit Sub

      Dim cmd As New GenericCommand("SQLConn")
      cmd.CommandText = "Insert Into Products (Price,Status) Values (@Price,@Status)"
      cmd.AddParam("@Price", Price)
      cmd.AddParam("@Status", Status)
      ID = CInt(cmd.ExecuteIdentity())
      cmd = Nothing

      'Insert Details if any
      For i As Integer = 0 To Details.Count - 1
         'first: set new ID on details objects
         Details(i).ID = ID
         Details(i).UpdateOrInsertItem()
      Next
   End Sub

   ''' <summary>Update Product</summary>
   Public Sub UpdateItem()
      If ID = 0 Then Exit Sub

      Dim cmd As New GenericCommand("SQLConn")
      cmd.CommandText = "Update Products set Price=@Price,Status=@Status where ID=@ID"
      cmd.AddParam("@Price", Price)
      cmd.AddParam("@Status", Status)
      cmd.AddParam("@ID", ID)
      cmd.ExecuteNonQuery()
      cmd = Nothing

      'Update Details if any
      For i As Integer = 0 To Details.Count - 1
         Details(i).UpdateOrInsertItem()
      Next
   End Sub

   ''' <summary>Delete This product</summary>
   Sub DeleteItem()
      If ID = 0 Then Exit Sub

      Dim cmd As New GenericCommand("SQLConn")
      cmd.CommandText = "DELETE FROM Products WHERE ID=@ID"
      'will assume that you set relationship between the 2 tables with 'cascade delete' to delete Details records when product is deleted
      ' or delete them by adding another query "DELETE FROM ProductsDetails WHERE ID=@ID"
      cmd.AddParam("@ID", ID)
      cmd.ExecuteNonQuery()
      cmd = Nothing

      Call Initialize()
   End Sub

   Protected Overrides Sub Finalize()
      Details = Nothing
      MyBase.Finalize()
   End Sub
End Class

The Entity Class for Products Details

Public Class ProductDetail
   Public ID As Integer
   Public Lang As String
   Public Name As String
   Public Description As String

   Public Sub New()
      Initialize()
   End Sub

   Public Sub New(ByVal ProductID As Integer, ByVal ProductLang As String)
      SelectItem(ProductID, ProductLang)
   End Sub

   ''' <summary>Initialize Fields</summary>
   Public Sub Initialize()
      ID = 0
      Lang = ""
      Name = ""
      Description = ""
   End Sub

   ''' <summary>Select Details by ID and Lang</summary>
   Public Sub SelectItem(ByVal ProductID As Integer, ByVal ProductLang As String)
      Call Initialize()

      If ProductID = 0 Or ProductLang = "" Then Exit Sub

      Dim cmd As New GenericCommand("SQLConn")
      Dim rdr As DbDataReader
      cmd.CommandText = "Select Top 1 * from ProductsDetails Where ID=@ID and Lang=@Lang"
      cmd.AddParam("@ID", ProductID)
      cmd.AddParam("@Lang", ProductLang)
      rdr = cmd.ExecuteReader()
      If rdr.Read() Then
         Populate(rdr)
      End If
      rdr.Close()
      rdr = Nothing
      cmd = Nothing
   End Sub

   Friend Sub Populate(ByRef dr As DbDataReader)
      Populate(CType(dr, Object))
   End Sub
   Friend Sub Populate(ByRef dr As DataRow)
      Populate(CType(dr, Object))
   End Sub
   Private Sub Populate(ByRef dr As Object)
      ID = CInt(dr("ID"))
      Lang = dr("Lang")
      Name = dr("Name")
      Description = dr("Description")
   End Sub

   ''' <summary>Update Detail or Insert Detail if not there</summary>
   Public Sub UpdateOrInsertItem()
      If ID = 0 Or Lang = "" Then Exit Sub

      Dim cmd As New GenericCommand("SQLConn")
      cmd.CommandText = "Update ProductsDetails set Name=@Name,Description=@Description where ID=@ID and Lang=@Lang"
      cmd.AddParam("@Name", Name)
      cmd.AddParam("@Description", Description)
      cmd.AddParam("@ID", ID)
      cmd.AddParam("@Lang", Lang)
      'Try to update
      If cmd.ExecuteNonQuery() = 0 Then
         'if affected rows=0 cause Detail record is not there , then Insert:
         cmd.CommandText = "Insert Into ProductsDetails (ID,Lang,Name,Description) Values (@ID,@Lang,@Name,@Description)"
         cmd.ExecuteNonQuery()
      End If
      cmd = Nothing
   End Sub

   ''' <summary>Delete This Detail</summary>
   Sub DeleteItem()
      If ID = 0 Or Lang = "" Then Exit Sub

      Dim cmd As New GenericCommand("SQLConn")
      cmd.CommandText = "DELETE FROM ProductsDetails WHERE ID=@ID and Lang=@Lang"
      cmd.AddParam("@ID", ID)
      cmd.AddParam("@Lang", Lang)
      cmd.ExecuteNonQuery()
      cmd = Nothing

      Call Initialize()
   End Sub
End Class

and The Entity Collection Class for Products

Public Class Products
   Inherits CollectionBase

   ''' <summary>PageSize=0 means no paging</summary>
   Public PageSize As Integer
   ''' <summary>PageIndex=0 means no paging</summary>
   Public PageIndex As Integer
   Private mPageCount As Integer
   ''' <summary>To Get Top records if larger than 0</summary>
   Public TopRecords As Integer
   Public GetLang As String = Nothing

   Public Sub New(Optional ByVal Lang As String = Nothing)
      Call Initialize()
      PageSize = 0
      PageIndex = 0
      TopRecords = 0
      GetLang = Lang
   End Sub

   ''' <summary>Initialize collection</summary>
   Public Sub Initialize()
      mPageCount = 0
      List.Clear()
   End Sub

   Public ReadOnly Property PageCount() As Integer
      Get
         Return mPageCount
      End Get
   End Property

   ''' <summary>Gets or sets the element at the specified zero-based index</summary>
   Default Public Property Item(ByVal Index As Integer) As Product
      Get
         Return List.Item(Index)
      End Get
      Set(ByVal value As Product)
         List.Item(Index) = value
      End Set
   End Property

   ''' <summary>Adds an object to the end of the Collection</summary>
   Public Function Add(ByVal Obj As Product) As Integer
      Return List.Add(Obj)
   End Function

   ''' <summary>Select Products by Status, More Search Params can be added..</summary>
   Public Sub SelectItems(Optional ByVal Status As Product.ProductStatus = Product.ProductStatus.None)
      Call Initialize()

      Dim Top As String = ""
      If TopRecords > 0 Then Top = " TOP " & TopRecords & " "
      If PageSize > 0 And PageIndex > 0 Then Top = " TOP " & (PageIndex * PageSize) & " "

      Dim Cmd As New GenericCommand("SQLConn")
      Cmd.PageSize = PageSize
      Cmd.PageIndex = PageIndex
      'Count Query
      Cmd.CountCommandText = "SELECT COUNT(*) from Products"
      'Select Query
      Cmd.CommandText = "SELECT " & Top & " Products.* "
      If GetLang > "" Then Cmd.CommandText += ",Lang,Name,Description"
      Cmd.CommandText += " from Products"
      'Detials Table ?
      If GetLang > "" Then
         Cmd.CountCommandText += ",ProductsDetails"
         Cmd.CommandText += ",ProductsDetails"
      End If
      'Where
      Cmd.CountCommandText += " Where 0=0"
      Cmd.CommandText += " Where 0=0"
      'Tables inner join ?
      If GetLang > "" Then
         Cmd.CountCommandText += " and ProductsDetails.ID=Products.ID and Lang=@Lang"
         Cmd.CommandText += " and ProductsDetails.ID=Products.ID and Lang=@Lang"
         Cmd.AddParam("@Lang", GetLang)
      End If
      'Status?
      If Status > 0 Then
         Cmd.CountCommandText += " and Status=@Status"
         Cmd.CommandText += " and Status=@Status"
         Cmd.AddParam("@Status", Status)
      End If

      Dim DT As DataTable = Cmd.ExecuteDataTable("Products")
      mPageCount = Cmd.PageCount

      Dim p As Product
      For Each row As DataRow In DT.Rows
         p = New Product()
         p.Populate(row)
         If GetLang > "" Then
            p.Details = New ProductsDetails
            Dim d As New ProductDetail
            d.Populate(row)
            p.Details.Add(d)
            d = Nothing
         End If
         Add(p)
         p = Nothing
      Next
      DT = Nothing
      Cmd = Nothing
   End Sub

   Protected Overrides Sub Finalize()
      MyBase.Finalize()
   End Sub
End Class

and The Entity Collection Class for ProductsDetails

Public Class ProductsDetails
   Inherits CollectionBase
   ''' <summary>PageSize=0 means no paging</summary>
   Public PageSize As Integer
   ''' <summary>PageIndex=0 means no paging</summary>
   Public PageIndex As Integer
   Private mPageCount As Integer
   ''' <summary>To Get Top records if larger than 0</summary>
   Public TopRecords As Integer

   Public Sub New()
      Call Initialize()
      PageSize = 0
      PageIndex = 0
      TopRecords = 0
   End Sub

   ''' <summary>Initialize collection</summary>
   Public Sub Initialize()
      mPageCount = 0
      List.Clear()
   End Sub

   Public ReadOnly Property PageCount() As Integer
      Get
         Return mPageCount
      End Get
   End Property

   ''' <summary>Gets or sets the element at the specified zero-based index</summary>
   Default Public Property Item(ByVal Index As Integer) As ProductDetail
      Get
         Return List.Item(Index)
      End Get
      Set(ByVal value As ProductDetail)
         List.Item(Index) = value
      End Set
   End Property

   ''' <summary>Adds an object to the end of the Collection</summary>
   Public Function Add(ByVal Obj As ProductDetail) As Integer
      Return List.Add(Obj)
   End Function

   ''' <summary>Select Products Details by ID or Lang</summary>
   Public Sub SelectItems(Optional ByVal ID As Integer = 0, Optional ByVal Lang As String = "")
      Call Initialize()

      Dim Tbl As DataTable
      Dim Top As String = ""
      If TopRecords > 0 Then Top = " TOP " & TopRecords & " "
      If PageSize > 0 And PageIndex > 0 Then Top = " TOP " & (PageIndex * PageSize) & " "

      Dim Cmd As New GenericCommand("SQLConn")
      Cmd.PageSize = PageSize
      Cmd.PageIndex = PageIndex
      Cmd.CountCommandText = "SELECT COUNT(*) FROM ProductsDetails where 0=0"
      Cmd.CommandText = "SELECT " & Top & " * FROM ProductsDetails where 0=0"
      If ID > 0 Then
         Cmd.CountCommandText += " and ID=@ID"
         Cmd.CommandText += " and ID=@ID"
         Cmd.AddParam("@ID", ID)
      End If
      If Lang > "" Then
         Cmd.CountCommandText += " and Lang=@Lang"
         Cmd.CommandText += " where Lang=@Lang"
         Cmd.AddParam("@Lang", Lang)
      End If
      Tbl = Cmd.ExecuteDataTable("ProductsDetails")
      mPageCount = Cmd.PageCount

      Dim d As ProductDetail
      For Each Row As DataRow In Tbl.Rows
         d = New ProductDetail()
         d.Populate(Row)
         Add(d)
         d = Nothing
      Next
      Tbl = Nothing
      Cmd = Nothing
   End Sub

   Protected Overrides Sub Finalize()
      MyBase.Finalize()
   End Sub
End Class

A sample of usage to select a product and one Language detail:

Dim P As New Product("EN", 100)
Response.Write("ID=" & P.ID)
Response.Write("Status=" & P.Status)
Response.Write("Lang=" & P.Detail.Lang)
Response.Write("Name=" & P.Detail.Name)
Response.Write("Description=" & P.Detail.Description)
P = Nothing

A sample to select a product and all Language details:

Dim P As New Product("", 100)
Response.Write("ID=" & P.ID)
Response.Write("Status=" & P.Status)
Response.Write("Name=" & P.Detail("EN").Name)
Response.Write("Name=" & P.Detail("RU").Name)
P = Nothing

A sample to insert new product

Dim p As New Product
p.Price = 1000

Dim pd As New ProductDetail
pd.Lang = "EN"
pd.Name = "Product 1"
p.Details.Add(pd)

pd = New ProductDetail
pd.Lang = "RU"
pd.Name = "Продукт 1"
p.Details.Add(pd)

p.InsertItem()

Response.Write("id=" & p.ID)
p = Nothing
pd = Nothing

And a Sample of usage to select list of products and one language detail with paging

Dim Ps As New Products("RU")
Ps.PageSize = 10
Ps.PageIndex = 2
Ps.SelectItems()
For i As Integer = 0 To Ps.Count - 1
   Dim p As Product = Ps(i)
   Response.Write("ID=" & p.ID)
   Response.Write("Name=" & p.Detail.Name)
   Response.Write("<hr>")
   p = Nothing
Next
WriteLn("PageCount=" & Ps.PageCount)
Ps = Nothing

As Before, DAL uses a very helpful generic Command class to [Write Less & Generic Data Access Code in ADO.NET 2.0].

That is it! Hope that was helpful, Also if you have a better approach to this design pattern I would be glad to hear your ideas..

Contact

2009-01-01T01:01:00.008Z

Use the following form to contact me, and I'll reply to you asap..

Need a free SEO advice or have technical question.. shoot.

If the contact form is not working with you.. send your email to: mike [at] moretechtips.net

Traditional yet Powerful : Data Access Layer for ASP.Net

2008-12-12T00:22:00.004Z

Since I posted [Data Access Layer for Classic ASP], I've been trying to find time to post the ASP.Net version too..

This is a complete example of creating Data Access Layer(DAL) using the traditional yet powerful "Object to Relational mapping model" or "Custom Entity Classes" that support Paging too..

Many people talk about using the Datasets method for creating a DAL as in [Tutorial 1: Creating a Data Access Layer] and how it is fast to generate.
but for me the Traditional 'Object to Relational mapping' model seems more simpler to work with and to extend, and about the slow creation time issue: as a developer you know that creating these classes for the 2nd time things gets more faster, most of its code is cut+paste-friendly and there are software that would generate it for you too..
They would also say that datasets method is data-source independent (no DBMS), not just database independent, well my proposed DAL is surely database independent and what are the chances that your application will move away from a DBMS? well,ZERO. and still those classes can encapsulate anything you want, even if data is saved in csv files.

The 'Object to Relational mapping' model consists of :
Entity Class - represents a single record or row from a database resultset.
Entity Collection Class - contains a collection of entity objects or a tabular list of data from a resultset.

Add to that, DAL uses a very helpful generic Command class i posted before to [Write Less & Generic Data Access Code in ADO.NET 2.0].

As an example of DAL, we'll use a simple Table of 'Products', here is the SQL Create script:

CREATE TABLE [Products] (
   [ID] [int] PRIMARY KEY IDENTITY(1, 1),
   [Name] [varchar] (50) NOT NULL DEFAULT (''),
   [Description] [varchar] (500) NOT NULL DEFAULT (''),
   [Status] [tinyint] NOT NULL DEFAULT (0),
   [Price] [decimal](18, 0) NOT NULL DEFAULT (0)
)

The Entity Class

Imports System.Data
Imports System.Data.Common
Imports Microsoft.VisualBasic

Public Class Product
   '' Table Fields
   Public ID As Integer
   Public Name As String
   Public Description As String
   Public Price As Decimal
   Public Status As ProductStatus

   Public Enum ProductStatus
      None = 0
      Active = 1
      Inactive = 2
   End Enum

   Public Sub New(Optional ByVal ProductID As Integer = 0)
      SelectItem(ProductID)
   End Sub

   ''' <summary>Initialize Product Fields</summary>
   Public Sub Initialize()
      ID = 0
      Name = ""
      Description = ""
      Price = 0
      Status = ProductStatus.Active
   End Sub

   Friend Sub Populate(ByRef dr As DbDataReader)
      Populate(CType(dr, Object))
   End Sub
   Friend Sub Populate(ByRef dr As DataRow)
      Populate(CType(dr, Object))
   End Sub
   Private Sub Populate(ByRef dr As Object)
      ID = CInt(dr("ID"))
      Name = dr("Name")
      Description = dr("Description")
      Price = CDec(dr("Price"))
      Status = CByte(dr("Status"))
   End Sub

   ''' <summary>Select Product by ID</summary>
   Public Sub SelectItem(ByVal ProductID As Integer)
      Call Initialize()

      If ProductID = 0 Then Exit Sub

      Dim cmd As New GenericCommand("SQLConn")
      Dim rdr As DbDataReader
      cmd.CommandText = "Select Top 1 * from Products Where ID=@ID"
      cmd.AddParam("@ID", ProductID)
      rdr = cmd.ExecuteReader()
      If rdr.Read() Then Populate(rdr)
      rdr.Close()
      rdr = Nothing
      cmd = Nothing
   End Sub

   ''' <summary>Insert new Product and get new Identity</summary>
   Public Sub InsertItem()
      If ID <> 0 Then Exit Sub

      Dim cmd As New GenericCommand("SQLConn")
      cmd.CommandText = "Insert Into Products (Name,Description,Price,Status) Values (@Name,@Description,@Price,@Status)"
      cmd.AddParam("@Name", Name)
      cmd.AddParam("@Description", Description)
      cmd.AddParam("@Price", Price)
      cmd.AddParam("@Status", Status)
      ID = CInt(cmd.ExecuteIdentity())
      cmd = Nothing
   End Sub

   ''' <summary>Update Product</summary>
   Public Sub UpdateItem()
      If ID = 0 Then Exit Sub

      Dim cmd As New GenericCommand("SQLConn")
      cmd.CommandText = "Update Products set Name=@Name,Description=@Description,Price=@Price,Status=@Status where ID=@ID"
      cmd.AddParam("@Name", Name)
      cmd.AddParam("@Description", Description)
      cmd.AddParam("@Price", Price)
      cmd.AddParam("@Status", Status)
      cmd.AddParam("@ID", ID)
      cmd.ExecuteNonQuery()
      cmd = Nothing
   End Sub

   ''' <summary>Delete This product</summary>
   Sub DeleteItem()
      If ID = 0 Then Exit Sub

      Dim cmd As New GenericCommand("SQLConn")
      cmd.CommandText = "DELETE FROM Products WHERE ID=@ID"
      cmd.AddParam("@ID", ID)
      cmd.ExecuteNonQuery()
      cmd = Nothing

      Call Initialize()
   End Sub
End Class

and The Entity Collection Class

Public Class Products
   Inherits CollectionBase

   ''' <summary>PageSize=0 means no paging</summary>
   Public PageSize As Integer
   ''' <summary>PageIndex=0 means no paging</summary>
   Public PageIndex As Integer
   Private mPageCount As Integer
   ''' <summary>To Get Top records if larger than 0</summary>
   Public TopRecords As Integer

   Public Sub New()
      Call Initialize()
      PageSize = 0
      PageIndex = 0
      TopRecords = 0
   End Sub

   ''' <summary>clear collection</summary>
   Public Sub Initialize()
      mPageCount = 0
      List.Clear()
   End Sub

   ''' <summary>Gets or sets the element at the specified zero-based index</summary>
   Default Public Property Item(ByVal Index As Integer) As Product
      Get
         Return List.Item(Index)
      End Get
      Set(ByVal value As Product)
         List.Item(Index) = value
      End Set
   End Property

   ''' <summary>Adds an object to the end of the Collection</summary>
   Public Function Add(ByVal Obj As Product) As Integer
      Return List.Add(Obj)
   End Function

   ''' <summary>Select Products by Status, More Search Params can be added..</summary>
   Public Sub SelectItems(Optional ByVal Status As Product.ProductStatus = Product.ProductStatus.None)
      Call Initialize()

      Dim Tbl As DataTable
      Dim Top As String = ""
      If TopRecords > 0 Then Top = "TOP " & TopRecords
      If PageSize > 0 And PageIndex > 0 Then Top = "TOP " & (PageIndex * PageSize)

      Dim Cmd As New GenericCommand("SQLConn")
      Cmd.PageSize = PageSize
      Cmd.PageIndex = PageIndex
      Cmd.CountCommandText = "SELECT COUNT(*) FROM Products"
      Cmd.CommandText = "SELECT " & Top & " * FROM Products"
      If Status > 0 Then
         Cmd.CountCommandText += " where Status=@Status"
         Cmd.CommandText += " where Status=@Status"
         Cmd.AddParam("@Status", Status)
      End If
      Tbl = Cmd.ExecuteDataTable("Products")
      mPageCount = Cmd.PageCount

      Dim p As Product
      For Each Row As DataRow In Tbl.Rows
         p = New Product
         p.Populate(Row)
         Add(p)
         p = Nothing
      Next
      Tbl = Nothing
      Cmd = Nothing
   End Sub

   Public ReadOnly Property PageCount() As Integer
      Get
         Return mPageCount
      End Get
   End Property

   Protected Overrides Sub Finalize()
      MyBase.Finalize()
   End Sub
End Class

A Sample of usage to insert a product:

Dim p As New Product
p.Name = "Product1"
p.Status = Product.ProductStatus.Active
p.InsertItem()
Response.Write(p.ID & ":" & p.Name)
p = Nothing

And a Sample of usage to select list of products with paging

Dim ps As New Products
ps.PageSize = 10
ps.PageIndex = 2
ps.SelectItems(Product.ProductStatus.Active)
For i As Integer = 0 To ps.Count - 1
   Dim p As Product = ps(i)
   Response.Write(p.ID & ":" & p.Name & "<br>")
   p = Nothing
Next
Response.Write("PageCount: " & ps.PageCount)
ps = Nothing

Also note that the paging method used in the collection class is DataSet paging method, to read more about paging methods comparison and tweaking: please check [Paging in ASP and ASP.Net].