It may sound odd.. the most popular social bookmarking widget AddThis button code has direct link to their site and we never bother to look inside their code. Here is the AddThis button code:

<!-- AddThis Button BEGIN -->
<div>
<script type="text/javascript">
	var addthis_pub="4a11abc75f3cd444";
</script>
<a href="http://www.addthis.com/bookmark.php?v=20"
onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')"
onmouseout="addthis_close()"
onclick="return addthis_sendto()">
<img src="http://s7.addthis.com/static/btn/sm-plus.gif" width="16" height="16" alt="Bookmark and Share" style="border:0"/>
</a>
<script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
</div><!-- AddThis Button END -->

You see there is a direct link to http://www.addthis.com/bookmark.php?v=20. If you remove this the code won’t work and adding nofollow is not a good solution. I modified their code in my own way and removed the link.
To do this first I saved the js (http://s7.addthis.com/js/200/addthis_widget.js) that is loaded at first from the addthis server. According to their TOS there is no problem if I cache their js code and use an image of my own choice. So I used a different addthis image with shadow which you can see at top-left side of this post and added a pseudo class “bkmrk” to it.

This is the php code for the template:

<img class="bkmrk" src="<?php bloginfo('template_url'); ?/>/images/addthis.gif" alt="bookmark" title="< ?php the_title(); ?>" name="< ?php the_permalink(); ?>" border="0" />

The title of the img tag is title of the post and the value of the name attribute is permalink.

Then I included the js and jQuery library and used this simple code on domready:

jQuery(function(){
    jQuery("img.bkmrk").each(function(){
        var url = jQuery(this).attr("name");
        var title = jQuery(this).attr("title");
        jQuery(this).wrap('<a onclick="return addthis_sendto()" onmouseout="addthis_close()" onmouseover="return addthis_open(this, \'\', \'' + url + '\', \'' + title + '\')" href="http://abcoder.com/"></a>');
    });

    jQuery("span#wp").replaceWith('<a rel="external nofollow" href="http://wordpress.org" title="WordPress" target="_blank">WordPress</a>');
    jQuery("span#theme").replaceWith('<a rel="external nofollow" href="http://web2themes.com" title="WordPress Themes" target="_blank">Web 2.0 Themes</a>');
});

This code simply adds the same functionality but the big difference is search bots won’t find the links as this is done using javascript. So if you see the html source code you won’t see any direct link to addthis.com. The last 2 lines of the code is for links to wordpress.org and web2themes.com.
Isn’t it smart?

However I’m not 100% sure if adapting this method is legal or not! So use this at your own risk. On some blogs I’ve noticed this method being used for links to the commentators website. But right now I’m not sure which wordpress plugin they use for this purpose.

Related posts:

1. jQuery “live” event jQuery live event is a great new dynamic feature. You can assign live events to current elements in dom as well as it'll be automatically applied to newly created (future) elements. You do not need to bind the event each time after creating a new element again and again unlike bind event. It'll make your code clean and you'll get more time for dating :P...
2. jQuery cycle plugin as carousel You can use the jQuery cycle plugin as carousel. No need of special plugin for carousel. Just use the fx: 'scrollHorz' and that's all! This option is kinda hidden on the malsup site. Don't know why they never emphasize on this option!!...
3. AJAX and SEO – Is it possible to get them together? About 7 months ago I threw a question on LinkedIn, AJAX & SEO. It was about is ajax seo friendly! (The website can be found here http://demo.zpbappi.com). Most of the people answered “NO”. All of them suggested me not to use 100% Ajax(ed) website as search endings do not render the javascript. The site has [...]...

One week ago I got a project to fully ajaxify a simple static website camillenelson.com with search enginge readability. I already knew (still then) it is not possible. I started re-thinking about the issue and find out a solution of my own. The site has only 8 pages which is a plus point. To assume any site from search spider’s view just disable the javascript from your browser settings and you’ll understand how the spider will go from one link to another.

For example:

<a href="about.html"
onclick="javascript: Load('about'); return false;">
    About
</a>

When javascript is enabled, clicking on About link won’t go to about.html page (return false;), rather it would call Load function. I think you’ve already got the idea!

In real I used jQuery to make the whole thing unobtrusive. The static html pages (already done) except index.html were kept as they are. In index.html the container div (the only div that changes for different pages) loads the content of different pages. I created a folder “ajaxContent” and created the html files with same name of the main html(s) but they contain only the contents, not the full html page.

Here is the jQuery code I used: (N.B. All the links are assigned with “ajax” class.)

$(function() {
    $("a").focus(function() {
        this.blur();
    });
    $("a.ajax").click(function() {
        var lnk = "ajaxContent/" + $(this).attr("href");
        var hover = $(this).find("img").attr("src");
        var img = $(this).find("img");
        $.ajax({
            url: lnk,
            beforeSend: function() {
                $("div#container").html('Loading...');
            },
            success: function(d) {
                $("div#container").html(d);
            },
            complete: function() {
                $("#loading").hide();
            }
        });
        return false;
    });
});

If you have any better idea to make a fully-ajaxed website SEO friendly please let me know.

Thanks

Related posts:

1. IE6 png alpha transparency fix for dynamically loaded images via ajax Simple javascript and jQuery code for fixing the alpha transparency problem of png image on Internet explorer 6. iepngfix.htc does not work for dynamic images loaded via ajax call. But this simple code works great for dynamically loaded images....
2. Using Dreamweaver Spry validation with jQuery ajax form plugin A simple function for using Spry form validation of Dreamweaver with jQuery ajax form submit plugin. Just put this 3 lines of code in the "beforeSubmit" parameter of $.ajaxForm and that's all!...
3. A better process to find maximum z-index within a page A jQuery approach to find the maximum z-index of an element in DOM. You'll find it helpful and handy for your complex javascript application when you need to handle the absolute positioned message windows layers or similar cases....

For my own need I added 2 extra fields. They are sent to server via POST method along with the FILES. One thing I’ve noticed, it can upload file faster than normal file uploading method. Cos, the file is encoded first via the flash uploader and somehow it is faster than normal.

And the great advantage is you can select multiple files during browsing by pressing Ctlr + A or select your files by dragging mouse. By using html <input type=”file” /> you can only select one file at a time which is really so boaring and life-taking when you want to upload hundreds of images.

Here is the online demo. The files are not being saved on my server for my own security!

Download it here completely free in a single zip file!

Modify the index_files/config.js file line no 49,
var _site_root = ‘your script location’;
It won’t work for you until you change _site_root

I have no problem if you use it for your own use. But I do not actually want anyone to put the files/zip on their own site to drive the traffics away from our blog.

If you need any support for modifying or setting it up or any bug report please contact me directly at adnan.eee@gmail.com

Thanks
Have a pain-less uploading experience!

Related posts:

1. Gmail uploader clone with drag drop feature : Free Download with source code Gmail file uploader clone with drag drop feature using jQuery. Download full working source code in a single zip file for free....
2. How to get currently logged on windows username in PHP and Javascript Get current windows username in php and javascript! Is that possible?...
3. Flicka on Android Market is knocking at Flickr.com is going to introduce its aptitude through Flicka on Android phone....