skip to main | skip to sidebar

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!

7 comments

  1. Lee Dumond // November 30, 2008 at 6:48:00 PM GMT+11  

    Great article. Would you be able to post the javascript that allows the use of a two-row image (like the image that you are using in your left sidebar) instead of this vertical one? Thanks!

  2. Mike // December 1, 2008 at 8:32:00 AM GMT+11  

    Thanks Lee for your feedback..
    I guess the vertical bar image was misleading, so i moved it to the left..

    The provided JavaScript would look like the real social buttons I'm using on the right side column..

    Each button is a div inside of an anchor that use that bar image as its background-image and how they are arranged is limitless..In a less wider column they would be divided into more lines

  3. Lee Dumond // December 2, 2008 at 3:15:00 AM GMT+11  

    Okay, I get what's happening... the background image is a CSS sprite and you're using positioning. I should have looked at it more closely.

    Have you considered altering this to render as an unordered list <ul> with anchors embedded in the <li> tags? I think that would be more semantically meaningful than a <div>. In fact, I may give that a go myself...

  4. Lee Dumond // December 2, 2008 at 5:14:00 AM GMT+11  

    Okay, per my own suggestion ;-) I went ahead and altered this to render as a <ul> with anchored <li> tags. Again, I feel this is more semantic than a div. You can see it implemented this way at my blog: http://leedumond.com/

    Other than that, this script is a very nice piece of work!

  5. Mike // December 2, 2008 at 10:10:00 AM GMT+11  

    Lee, I agree with you about the semantics thing & I will update the code..
    and I see that you've updated the old Netscape button to Propeller on your blog.. It looks great

  6. Lee Dumond // December 2, 2008 at 10:32:00 AM GMT+11  

    Yes, go ahead and Firebug my site and you should see the CSS I used. The trickiest part is the floating, and remembering to float the containing ul as well as the li elements.

    Also, please feel free to snag the updated bar.png from my site as well.

  7. Anonymous // January 12, 2009 at 3:39:00 AM GMT+11  

    Thanks big. Has very much helped!

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]moretechtips.net
More Tech Tips! | Technology tips on web development

Mike

Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS