Social Bookmark Scripts and Widgets

By Michael Gray
In Social Networks, Tools

Print Post

Email Post

Stumble

Sphinn It

Delicious

Tweet This

Everyone who’s looking to bring traffic to thier website is pretty focused on social bookmarking right now. However one of the things a lot people miss is making it easy for their readers to do this. So here a tutorial on how to implement some social bookmarking into your site just like the picture below.

While the list of bookmarking sites I chose to include is by no means definitive, I did include most of the major sites, the code starts off looking like this:


<img src="http://www.example.com/social/images/digg.png" alt="ADD TO DIGG"><script language=javascript>document.write("<a href='http://digg.com/submit?phase=2&url="+document.location.href+"&title="+document.title+"' >Digg</a>")</script>

Now I’ve chosen to use javascript to determine the page title and URL, instead of any of the built in functions of blogging platforms such as wordpress and blogger. The main reason was to make the code more portable and less software dependent. Secondly I’ve also chosen to show an image in addition to the text. Lot’s of tech companies spend millions each year establishing a brand identity and their logo is part of that brand so why not take advantage of it.

Fortunately most social bookmarking companies use similar implementations, so with quick cruise around the social bookmarking space and we come up list of submission formats. I’m going to encase them in a list format inside of a div so we can use some CSS styling later on. But first here’s the way our code looks:


<div id="social"><ul >

<li><img src="http://thoth/social/images/delicious.png" alt="ADD TO DEL.ICIO.US"><script language=javascript>document.write("<a href='http://del.icio.us/post?url="+document.location.href+"&title="+document.title+"' >Del.icio.us</a>")</script></li>
<li><img src="http://thoth/social/images/digg.png" alt="ADD TO DIGG"><script language=javascript>document.write("<a href='http://digg.com/submit?phase=2&url="+document.location.href+"&title="+document.title+"' >Digg</a>")</script></li>

<li><img src="http://thoth/social/images/furl.gif" alt="ADD TO FURL"> <script language=javascript>document.write("<a href='http://www.furl.net/store?s=f&to=0&u="+document.location.href+"&ti="+document.title+"' >Furl</a>")</script></li>

<li><img src="http://thoth/social/images/newsvine.png" alt="ADD TO NEWSVINE"><script language=javascript>document.write("<a href='http://www.newsvine.com/_tools/seed&save?u="+document.location.href+"&T="+document.title+"' >Newsvine</a>")</script></li>

<li><img src="http://thoth/social/images/netscape.png" alt="ADD TO NETSCAPE"><script language=javascript>document.write("<a href='http://www.netscape.com/submit/?U="+document.location.href+"&T="+document.title+"' >Netscape</a>")</script></li>

<li><img src="http://thoth/social/images/reddit.gif" alt="ADD TO REDDIT"><script language=javascript>document.write("<a href='http://reddit.com/submit?url="+document.location.href+"&title="+document.title+"' >Reddit</a>")</script></li>

<li><img src="http://thoth/social/images/stumble1.gif" alt="ADD TO STUMBLEUPON"><script language=javascript>document.write("<a href='http://www.stumbleupon.com/submit?url="+document.location.href+"&title="+document.title+"' >StumbleUpon</a>")</script></li>
<li><img src="http://thoth/social/images/technorati.png" alt="ADD TO TECHNORATI FAVORITES"><script language=javascript>document.write("<a href='http://technorati.com/faves?add="+document.location.href+"' >Technorati</a>")</script></li>

<li><img src="http://thoth/social/images/squidoo.png" alt="ADD TO SQUIDOO"><script language=javascript>document.write("<a href='http://www.squidoo.com/lensmaster/bookmark?"+document.location.href+"&title="+document.title+"' >Squidoo</a>")</script></li>
<li><img src="http://thoth/social/images/live.png" alt="ADD TO WINDOWS LIVE"><script language=javascript>document.write("<a href='https://favorites.live.com/quickadd.aspx?marklet=1&mkt=en-us&url="+document.location.href+"&title="+document.title+"&top=1' >Windows Live</a>")</script></li>

<li><img src="http://thoth/social/images/yahoo.png" alt="ADD TO YAHOO MYWEB"><script language=javascript>document.write("<a href=' http://myweb.yahoo.com/myresults/bookmarklet?u="+document.location.href+"&t="+document.title+"&ei=UTF' >Yahoo MyWeb</a>")</script></li>
<li><img src="http://thoth/social/images/ask.png" alt="ADD TO ASK"><script language=javascript>document.write("<a href='http://myjeeves.ask.com/mysearch/BookmarkIt?v=1.2&t=webpages&url="+document.title.href+"&title="+document.title+"' >Ask</a>")</script></li>

<li><img src="http://thoth/social/images/google.png" alt="ADD TO GOOGLE"> <script language=javascript>document.write("<a href='http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk="+document.location.href+"&title="+document.title+"' >Google</a>")</script></li>
<li><img src="http://thoth/social/images/magnolia.png" alt="ADD TO MAGNOLIA"> <script language=javascript>document.write("<a href='http://ma.gnolia.com/bookmarklet/snap/add?url="+document.location.href+"&title="+document.title+"' >Magnolia</a>")</script></li>

<li><img src="http://thoth/social/images/ning.png" alt="ADD TO NING"><script language=javascript>document.write("<a href='http://bookmarks.ning.com/addItem.php?url="+document.location.href+"&T="+document.title+"' >Ning</a>")</script></li>

<li><img src="http://thoth/social/images/rawsugar.png" alt="ADD TO RAWSUGAR"><script language=javascript>document.write("<a href='http://www.rawsugar.com/pages/tagger.faces?turl="+document.location.href+"&tttl="+document.title+"' >Rawsugar</a>")</script></li>
<li><img src="http://thoth/social/images/spurl.png" alt="ADD TO SPURL"><script language=javascript>document.write("<a href='http://www.spurl.net/spurl.php?url="+document.location.href+"&title="+document.title+"' >Spurl</a>")</script></li>

<li><img src="http://thoth/social/images/tagtooga.png" alt="ADD TO TAGTOOGA"><script language=javascript>document.write("<a href=' http://www.tagtooga.com/tapp/db.exe?c=jsEntryForm&b=fx&url="+document.location.href+"&title="+document.title+"' >Tagtooga</a>")</script></li>
</ul></div>

When we run the code it looks like this

While this gets the job done it’s not very pretty, so lets put the following information in the style sheet:


#social {width:90%;}

#social ul {margin:2px; list-style: none;float:left;}

#social li {margin:2px; list-style: none;float:left;width:155px;}

#social img {padding:0 3px;}

What we did was tell it to use 90% of the screen width for the whole block of items, float each of the items to the left, and give them a fixed width of 155 pixels. Without the fixed with the items would be uneven and somewhat jagged. Lastly we put a little padding on the sides of the images. Here’s what our final result looks like:

Now chances are you won’t need all of those buttons, and you should trim it down to 3-6 of the most relevant for your website. However you can download the entire code with the images from this file (just remember to change example.com to your domain).

Lastly if you have a wordpress blog and ever wanted to use one of those “digg” buttons here’s the Digg Plugin and if you’re a Netscape Fan, here’s the Netscape Plugin

Data Gathering from Blog Widgets When Yahoo purchased MyBlogLog many wondered, was it a good...
Google Widgets and Full RSS Feeds I totally admit the publishing full feeds is probably a...
Blue Widgets – Google and CSS Files With all this talk about Google Crawling CSS files I...

See my disclaimer about advertising and affiliate links

{ 41 comments }

SEM Basics October 24, 2006 at 10:02 am: Well done, a nice post for those people who don’t use blog technology on their website. I particularly like the bit about the logo, it’s true it should be used. One recommenedation that I may make is to show people how to put all of these links into a drop down window (for those people who don’t want some many links on their web pages). Also, for those people who do have blog technology, here is a list of tools which will make it easier for your visitors to bookmark your site: http://sembasics.com/sem-blog/social-media/making-it-easy-for-your-visitors-to-social-bookmark-your-site

Thanks again for the nice post – I think some of our customers may find it helpful.
SeoRookie October 24, 2006 at 10:36 am: I admit that sometimes I still live in 1997. I didn’t even have a blog until 6 months ago.

I’m going to play devil’s advocate and question if social bookmarking is all it’s cracked up to be.

I don’t think I have ever heard one co-worker or friend ever mention Digg, Delicious, Technorati or stumbleupon. Are these types of sites known to users outside the SEO circle ?

Can they send traffic for typical generic interest items like “RuneScape”, “Poker Tips” and “Shakira Ringtones” ?
SEM Basics October 24, 2006 at 2:55 pm: Do a test and see. Spend some time and create some sort of content on your site that you feel could be really popular for your niche market. It could be an article, a tool of some sort, or whatever you think could be or real value. Then, add the link to the page that contains that content to a number of the social bookmarking sites mentioned here and see what happens. Make sure, though, that you properly tag your content and give it a good title and description. Alternatively, take a number of items on your site which you think could be popular and add one item per week to various social bookmarking sites and notice the results. Then come back here and let us know what happened.
Super Des October 24, 2006 at 3:02 pm: great post Graywolf
tony rocks October 24, 2006 at 3:39 pm: How come you aint using those cute button on this post?
Mark Daoust October 24, 2006 at 4:55 pm: I still question the usefulness of giving people 30 options for social bookmarking – especially if you are dealing with a non-tech crowd.

I personally focus only on Delicious and occassionally Digg. I find that by limiting the # of options I give, I actually do better…
Michael Gray October 24, 2006 at 5:36 pm: uh I am using them do you not see them?

I suggested limiting your choices
Thomas October 24, 2006 at 6:41 pm: I have a tool and plugin to generate your bookmarks (no images) at http://www.twistermc.com/shake/social-bookmark.php
Nick October 25, 2006 at 4:52 am: Hi Michael,

>uh I am using them do you not see them?

No I can’t see them either Michael – looks like those links aren’t working. I get a 404 on
http://thoth/social/images/delicious.png and the rest.
Brian Turner October 25, 2006 at 5:08 am: Nice post Michael – looks more preferable to the Sociable plug-in.

As above, though, your image paths are a bit screwed – replace:
Brian Turner October 25, 2006 at 5:09 am: Hm, the HTML disappeared from the above comment – okay:

Make the image paths relative:

src=”/images”

rather than a HTTP statement with a username.
Michael Gray October 25, 2006 at 8:03 am: Man what wood pusher mistake … I’m so ashamed
tony rocks October 25, 2006 at 9:37 am: hehe. For once I was right!

Still though, I like limiting people’s choices…but you can expect people to put EVERYONE of those buttons after each post.
SeoRookie October 25, 2006 at 8:01 pm: I have a page that could be very viral, especially this time of year as it’s topic is geared towards halloween. I placed Delicious, Digg, StumbleUpon and Technorati.

I’ll report back in a few days. I’m currently receiving 360 visitors/day.
Brian Turner October 26, 2006 at 5:46 am: “what wood pusher mistake”

Just makes you look more corporate.
rxbbx November 12, 2006 at 7:37 am: Did squidoo changed something to their code. I get a bad request when using it with title=TITLE.
When I use it without Title there is no problem at all. It looks like it only uses the permalink and not the title / description. Anyone noticed.
Protrox Web Traffic February 14, 2007 at 3:50 am: This is great I’m going to add this to some of my sites. Thanks for the article.
Addies March 17, 2007 at 4:25 pm: Hi Micheal,
Great Plugin!
Best Plugin I have ever seen for social bookmarking.
I am glad I have found this plugin.

I have been reading and learning about wordpress from some time. I try to give it some time daily. Now I planning to launch my own blog with in this week.

I have seen most of the plugin that can be installed by uploading their Php file in wordpress plugins folder and you are done.

This one seems to be little different, may be this is a newbie question but I appreciate your help on installing this script.

Where to paste the code? and By changing the example site to my own site, do you mean like this?

document.write(â€Technoratiâ€)

Is this correct way?

Where to place the CSS file?

Thanks in Advance for your help!
Shankar Ganesh April 5, 2007 at 11:58 pm: Will this work in Blogger Beta?
Andrey Moraru April 7, 2007 at 4:14 am: Nice script, thank you!

Was looking for something like it…
Ryan Smith April 10, 2007 at 3:09 am: It Rocks !!
imran hashmi April 17, 2007 at 7:03 pm: Any info where i can get social bookmarking script ?
Kerry J April 24, 2007 at 11:27 pm: This looks fantastic — thanks for making it available!
lunakizz May 11, 2007 at 1:31 am: It’s great!
vicki May 11, 2007 at 11:53 am: Great info, thanks for posting it! One thing I’d like to find out is – how can we get those links to open in a new window without getting script errors?

thanks again
sat June 5, 2007 at 4:48 am: this script would be best for any wordpress.com blogger like me….i’ll try to modify a bit to put in wordpress.com…but thanx for it…….it has to be modified such that on clicking a javascript bookmarklet all html will be inserted to my post b’coz wordpress.com does not allow script….
Luis June 8, 2007 at 3:38 pm: Why aren’t you using it? It looks like you’re using a 3rd party social script on a page about your social bookmark widget?
dev watmore June 12, 2007 at 1:41 am: Hi
How can I redirect my wordpress blog traffic to my site?
constructicle June 13, 2007 at 10:04 am: wow!this is an amazing tool!
Vik June 29, 2007 at 7:36 am: Hi,

I have been doing just that with my new blog.I bookmark my posts on digg,stumbleupon,netscape and blink.Hopefully, I will see some results in a weeks time.
sat July 9, 2007 at 8:44 am: As in previous comment i’d said that i would modify this code to suit wordpress.com blogs where javascript or template editing is not allowed. But i could not modify it completely. So i designed a greasemonkey script from scratch and found a solution for wordpress.com. the method above in the post won’t work for wordpress.com blog posts as it does not allow any extras.

I’ve developed a greasemonkey user-script for doing this which i found bit more dynamic and convinient than this one.

You can check regarding this at
http://targetlife.wordpress.com/2007/07/07/social-bookmarking-helper-4-wordpress-com-greasemonkey-userscript/
http://targetlife.wordpress.com/2007/07/07/most-convinient-way-to-add-social-bookmarking-buttons-links-to-wordpress-com-blog-post/
Tracy@Social Bookmarking July 14, 2007 at 12:41 pm: Please include wirefan.com

Here is the code

Thanks
http://wirefan.com
TheSource July 16, 2007 at 1:44 am: Wow, that’s so complicated …. Romlet is a lot simpler, plus it shows dynamic stats and more people click on it. Check out a sample on weburbanist.com or check out Romlet at romlet.com
www.r10.net seo yarÄ±ÅŸmasÄ± kÃ¼resel Ä±sÄ±nmaya hayÄ±r July 24, 2007 at 3:48 pm: Thanks, i am trying
Mia August 29, 2007 at 7:06 pm: Hi! I was wondering if you would be interested adding GCurious | The Gossip Spot/ Bookmark.

http://www.gcurious.com
Actual Download August 30, 2007 at 8:28 am: Very interestening! I have only started research this topic and you have helped me to start… Also I have some collection of downloadable bookmark software
File Gets October 10, 2007 at 11:08 am: Thanks a lot! I will realize this widget at my site soon.
But i have found several bugs in urls…
lazer epilasyon October 14, 2007 at 10:38 am: great post Graywolf
Angela October 23, 2007 at 2:37 pm: Awesome script. Thank you very much!!
Richard Ward December 3, 2007 at 1:41 pm: How effect are these social bookmarks? I’ve been using the Internet for 10 years now and I’ve never once used any type of online bookmarking manager. It must be a “blogging thing.”
Kieran December 5, 2007 at 2:06 pm: Anyway to get the images to be clickable as well? Cant figure it out.