Social Bookmarking Widget

Friday, 29 Feb 2008 at 1:23 am Comments
Categories: Social Bookmarking, Web Design
Tags: Social Bookmarking, Wordpress

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.

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 sites: Furl, Reddit and also friendfeed.

Click here to download bookmark_widget.js.txt
(You will need to rename the file and remove .txt)

“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.

If you like what you read, why not...

or
Subscibe via your email

Related entries...
- FriendFeed Officially Launched
  Found out at Unique Frequency that FriendFeed was out of beta....
- Getting Top Ranking Hubpages in Google
  This morning I opened my mail box and found this short...
- Jolly and I Writing a SEO Book
  Jolly and I will co-author a book on search engine optimization...
- Digg This Submit Button
  Look at the Digg button on the left. It's quite simple...
- Twitter On Steroid
  If you have been twittering, then you must try Pownce. You...

MyBlogSG.com

Social Bookmarking Widget

“But I don’t know JavaScript”

Related entries...

Leave a Comment

What Others Read

What Others Commented

twitter.com/hcshi