Social Bookmark Scripts & Widgets
October 24th, 2006 by Michael Gray in Social Networks, ToolsIf you're new here, you may want to subscribe to my RSS feed. Read my top posts or learn more about Michael Gray. Want more frequent updates follow me on Twitter. Thanks for visiting!
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:
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:
<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/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/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/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/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/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> </ul></div>
<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/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/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/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/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/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/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>
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 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
Sphere It
October 24th, 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.
October 24th, 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” ?
October 24th, 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.
October 24th, 2006 at 3:02 pm
great post Graywolf
October 24th, 2006 at 3:39 pm
How come you aint using those cute button on this post?
October 24th, 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…
October 24th, 2006 at 5:36 pm
uh I am using them do you not see them?
I suggested limiting your choices
October 24th, 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
October 25th, 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.
October 25th, 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:
October 25th, 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.
October 25th, 2006 at 8:03 am
Man what wood pusher mistake … I’m so ashamed
October 25th, 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.
October 25th, 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.
October 26th, 2006 at 5:46 am
“what wood pusher mistake”
Just makes you look more corporate.
November 12th, 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.
February 14th, 2007 at 3:50 am
This is great I’m going to add this to some of my sites. Thanks for the article.
March 17th, 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!
April 5th, 2007 at 11:58 pm
Will this work in Blogger Beta?
April 7th, 2007 at 4:14 am
Nice script, thank you!
Was looking for something like it…
April 10th, 2007 at 3:09 am
It Rocks !!
April 17th, 2007 at 7:03 pm
Any info where i can get social bookmarking script ?
April 24th, 2007 at 11:27 pm
This looks fantastic — thanks for making it available!
May 11th, 2007 at 1:31 am
It’s great!
May 11th, 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
June 5th, 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….
June 8th, 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?
June 12th, 2007 at 1:41 am
Hi
How can I redirect my wordpress blog traffic to my site?
June 13th, 2007 at 10:04 am
wow!this is an amazing tool!
June 29th, 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.
July 9th, 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/
July 14th, 2007 at 12:41 pm
Please include wirefan.com
Here is the code
Thanks
http://wirefan.com
July 16th, 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
July 24th, 2007 at 3:48 pm
Thanks, i am trying
August 29th, 2007 at 7:06 pm
Hi! I was wondering if you would be interested adding GCurious | The Gossip Spot/ Bookmark.
http://www.gcurious.com
August 30th, 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
October 10th, 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…
October 14th, 2007 at 10:38 am
great post Graywolf
October 23rd, 2007 at 2:37 pm
Awesome script. Thank you very much!!
December 3rd, 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.”
December 5th, 2007 at 2:06 pm
Anyway to get the images to be clickable as well? Cant figure it out.