≡ Menu

Social Bookmarking Widget

After a couple hours of hacking with JavaScript, I finally created my very first SEO-friendly social bookmarking widget specially for this blog. As you can see, I’ve positioned the bookmark widget right at the top of the post to get the most attention and clicks.

Social Bookmarking Widget

The widget is constructed with JavaScript. It is a very simple script which I modified from Build Your Own Social Bookmark Widget by Gath Adams.

// JavaScript - bookmarking_widget.js
var theTitle = encodeURIComponent(document.title)
var theURL = encodeURIComponent(document.location)
document.write('<style type="text/css">
  .bookmark_widget{margin:15px 0 10px;font-size:12px;
  font-family:arial,verdana,san serif}
  .bookmark_widget a{font-weight:normal;margin-left:5px}
  </style>')
document.write('<div class="bookmark_widget">')
document.write('<a href="http://del.icio.us/post?url='
  +theURL+'&title='+theTitle+'"
  title="See who bookmarked at del.icio.us" >
  <img src="http://images.del.icio.us/static/img/
  delicious.gif" alt=" " height="16" width="16"
  border="0" />&nbsp;del.icio.us</a> ')
document.write('<a href="http://technorati.com/
  faves/?add='+theURL+'" title="Favorite it at
  Technorati" >
  <img src="http://static.technorati.com/x/static/
  images/buttons/fave.png" alt=" " height="13"
  width="18" border="0" />&nbsp;fave it</a> ')
document.write('<a href="http://reddit.com/submit?url='
  +theURL+'&title='+theTitle+'") title="Add To
  Reddit"><img src="http://sp.reddit.com/
  reddithead4.gif" alt="Reddit" height="16" width="16"
  border="0" />&nbsp;reddit</a>')
document.write('<a href="
  http://www.stumbleupon.com/submit?url='+theURL+
  '&title='+theTitle+'") title="StumbleUpon - I like
  it"><img src="http://www.stumbleupon.com/
  images/icon_su.gif" alt=" " height="16" width="16"
  border="0" />&nbsp;StumbleUpon</a>')
document.write("</div>")

And I modified the file single.php of the Prologue theme.

<div id="widget_digg">
  <script type="text/javascript"
  src="http://digg.com/tools/diggthis.js"></script>
</div>
<script type="text/javascript"
  src="<?php bloginfo('template_url'); ?>
  /bookmark_widget.js"></script>
<?php the_content( __( '[More...]' ) ); ?>

From the source codes above, you can see that I placed the bookmarking widget after the Digg It Submit Button. I think this layout looks pretty neat.

Beside adding the social bookmarking widget at this blog, I also installed it at http://shihengcheong.com/blog/ and http://www.timmguru.com. As I have a wider column in both of these blogs, I was able to squeeze in a few more social bookmarking site: Furl, Reddit and also friendfeed.

Social bookmarking widget plus

“But I don’t know JavaScript”

If you are not familiar with JavaScript or just don’t like to DIY, then you can try using Share This WordPress Plugin instead.

{ 0 comments… add one }

Leave a Comment

Next post:

Previous post: