Although Google+ was launched more than a month ago, many applications and services have been already built on it. Which is really amazing considering the fact that, Google+ still don't have a public API. So, I started the roundup with API hacks to understand how other apps might have been made of.

Google plus is today's hot social network, launched on 28 Jun, is now the fastest growing social network ever with more than 25 million members according to comScore.

This is my second take on "Twitter Score Bookmarklet" but this time using Klout instead of Topsy to quickly display online influence score of Twitter accounts.

Klout uses many variables to provide overall influence score, true reach, amplification probability, and network score.

Inspired by Twitter Hovercards, this bookmarklet was made to help me quickly view the data of Twitter accounts plus their Topsy influence score before I decide to follow them.

This is a simple jQuery tutorial to display Twitter trending stories of your website and their Twitter trackbacks by combining 2 of my jQuery plugins - Popular on Twitter Widget & Twitter Trackbacks Widget.

After creating my latest jQuery plugin bit.ly Button to show off number of bit.ly clicks of your posts in a retweet button, I wrote this guest post on AEXT.net for developers who want to get their hands dirty with jQuery and bit.ly API.

Continue reading : Showing Off bit.ly Clicks of Your Posts With jQuery

bit.ly -The intelligent URL shortener- offers realtime statistics about the clicks on shortened links and this button takes advantage of that information. This jQuery button gives you a uniform click count button -tall or wide- that people can also use it to retweet your post.

When you use a short link to tweet your post, it may get 100 retweets but in terms of bit.ly stats that could mean 1000 clicks coming from the whole twitter ecosystem which makes another interesting measure of how popular is your post!

This is a share count button to encourage people to bookmark your content on Delicious. Although Delicious provides their own button and I tried before to style it differently, but still It didn't look quite uniform like other sharing buttons.

So This jQuery-fied one should give you a uniform share button -tall or wide- that looks quite delicious! It works the same as the official Delicious button and looks pretty as in Topsy, StumbleUpon buttons.

This plugin displays avatars of people who have recently followed your twitter account and tweeted your link. It would be useful when you have a new project launch and you need to encourage people to follow & tweet it by showing their Twitter avatars!

The plugin is a mix of two of my favorite plugins: Twitter Friends & Followers Widget and Twitter Trackbacks Widget. It first queries Topsy API to get tweeters and compares them with followers returned from Twitter API.

Another Topsy-enabled jQuery plugin to list the most popular posts on your website, from your Twitter timeline or for some keyword within a selected period of time.
Links are displayed with number of tweets and score -which is calculated by the influence of the people talking about them and affects on sorting those links.

Still haven't a peek at Google Wave yet? here is your chance.. I have 12 invites to give without any freaky conditions. All you need to do to get invited is to email me on Mike[at]moretechtips.net from the email that you would like to receive the invite at.

I took the Topsy retweet button and jQuery-fied it, then added the "Who" part to it using the awesome Topsy API. to create this fancy share count button for your stories on twitter. that's it!

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.

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.

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):

1. Null Pattern, to add a message for direct traffic visitors (no-referrer)
2. 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.
   
3. 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.
4. 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]

Optimizing web pages for Google and other search engines is not enough. A successful concept for online marketing your blog or site has to be regarded in a more comprehensive way and must include the community [The Wisdom of Crowds!].

Web 2.0 is part of the community and vice versa. Social bookmarking is part of it, too. so you should make it as easy as possible for your visitors to bookmark your site. and gathering information on the best social bookmarking sites, their icons, submission URLs, and ranking is quite a pain.

This is a simple JavaScript that you can paste to any web page or blog to add the top 20 ranked social bookmarking sites as advised in [List of social bookmarking sites] and It should look like Icons on the right side -->>

And as you might know: loading many small images can slow down your page loading, as browser opens a new connection for each image to download, a well-known better approach is to put all this related images in one image, and use CSS to set background-position..

Here is the JavaScript to paste
<script type='text/javascript'>
function SocialBookmarks(){
   var holder = document.getElementById("SocialButtonsPlace");
   if (!holder) return;
  
   var title = encodeURIComponent(document.title);
   var url = encodeURIComponent(location.href);
   /* these are the social bookmaking sites' icons ,ordered by rank, you can remove a line
   but don't change the 'pos' so icon would show up correctly */
   var socials = [
   {'name':'Yahoo','pos':-16,'url':'http://myweb2.search.yahoo.com/myresults/bookmarklet?t='+title+'&amp;u='+url},
   {'name':'Google','pos':-32,'url':'http://www.google.com/bookmarks/mark?op=edit&amp;bkmk='+url+'&amp;title='+title},
   {'name':'Live','pos':-48,'url':'https://favorites.live.com/quickadd.aspx?url='+url+'&amp;title='+title},
   {'name':'Facebook','pos':-64,'url':'http://www.facebook.com/sharer.php?u='+url+'&amp;t='+title},
   {'name':'Digg','pos':-80,'url':'http://digg.com/submit?phase=2&amp;url='+url+'&amp;title='+title},
   {'name':'Ask','pos':-96,'url':'http://myjeeves.ask.com/mysearch/BookmarkIt?v=1.2&amp;t=webpages&amp;url='+url+'&amp;title='+title},
   {'name':'Technorati','pos':-112,'url':'http://technorati.com/faves?sub=addfavbtn&amp;add='+url+'&amp;title='+title},
   {'name':'Delicious','pos':-128,'url':'http://del.icio.us/post?url='+url+'&amp;title='+title},
   {'name':'StumbleUpon','pos':-144,'url':'http://www.stumbleupon.com/submit?url='+url+'&amp;title='+title},
   {'name':'Squidoo','pos':-160,'url':'http://www.squidoo.com/lensmaster/bookmark?'+url},
   {'name':'Propeller','pos':-176,'url':'http://www.propeller.com/submit/?U='+url+'&amp;T='+title+'&amp;C='+title},
   {'name':'Slashdot','pos':-192,'url':'http://slashdot.org/bookmark.pl?url='+url+'&amp;title='+title},
   {'name':'Reddit','pos':-208,'url':'http://reddit.com/submit?url='+url+'&amp;title='+title},
   {'name':'Fark','pos':-224,'url':'http://cgi.fark.com/cgi/fark/submit.pl?new_url='+url+'&amp;new_comment='+title+'&amp;linktype='},
   {'name':'Newsvine','pos':-240,'url':'http://www.newsvine.com/_wine/save?u='+url+'&amp;h='+title},
   {'name':'Furl','pos':-256,'url':'http://www.furl.net/storeIt.jsp?t='+title+'&amp;u='+url},
   {'name':'Blinklist','pos':-272,'url':'http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url='+url+'&amp;Title='+title},
   {'name':'dzone','pos':-288,'url':'http://www.dzone.com/links/add.html?url='+url+'&amp;title='+title},
   {'name':'Magnolia','pos':-304,'url':'http://ma.gnolia.com/bookmarklet/add?url='+url+'&amp;title='+title},
   {'name':'SWiK','pos':-320,'url':'http://stories.swik.net/?submitUrl&amp;url='+url}
   ];
  
   for(var i=0; i<socials.length; i++)
      holder.innerHTML = holder.innerHTML + '<li><A class=\'SocialButton\' style=\'background-position:0 '+socials[i].pos+'px\' href=\''+socials[i].url+'\' title=\''+socials[i].name+'\' target=\'_blank\'>&nbsp;</A></li>';
}

/* This call can be placed in body onload event */
SocialBookmarks();
</script>

And place this CSS code in the HTML Head or in an included CSS file
#SocialButtonsPlace {
list-style:none;
/* must do - Browsers WORLD WAR!*/
margin:0; padding: 0;
}
#SocialButtonsPlace Li{
float:left;
}
.SocialButton {
display:block;
height:16px;
width:16px;
line-height:16px;
margin:2px;
text-decoration:none;
background-image:url(http://1.bp.blogspot.com/_3JiqFA24tHU/STkZkl2vjHI/AAAAAAAAALY/NO4zWTJT33I/s400/bar.gif);
}

And create a place holder UL where the icons will show up
<UL id="SocialButtonsPlace"></UL>

Don't forget to save the icons [Bar Image] and upload it some where on your site and change its location in CSS.

You may also use an Image-Map to display the bar image horizontally or vertically and define the clickable regions..

that's it.. enjoy!