Add Top 20 Social Bookmarks To Your Page

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWuhPxjyWXhmT9ax0HQ-a-A1tkGL_hUK5WnSPdXu2uN9C1YsuEJMb5YyVD3rXtuMX4W3bRQDMMT5pWzXxBe5ezHun2B8uVxJzud3WwYjhWrScnKfoB8e3hT4kt7vqlxJzyzhFqLxcQf5_/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!

Tags: CSS , javascript , SEO , Social Bookmarking , Web 2.0