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/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 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
Related posts:
- Web 2.0 Weenies and Bullshit Social Media Economics This weekend I watched an amazing video from Mike Rowe...
- Who Else Wants to Make Money from Social Media? Hi there. I suppose since this is a guest post,...
- Is There Really Such a Thing as a Social Media Expert One of the common themes I see recurring in blog/websites...
{ 41 comments }
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.
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” ?
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.
great post Graywolf
How come you aint using those cute button on this post?
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…
uh I am using them do you not see them?
I suggested limiting your choices
I have a tool and plugin to generate your bookmarks (no images) at http://www.twistermc.com/shake/social-bookmark.php
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.
Nice post Michael – looks more preferable to the Sociable plug-in.
As above, though, your image paths are a bit screwed – replace:
Hm, the HTML disappeared from the above comment – okay:
Make the image paths relative:
src=”/images”
rather than a HTTP statement with a username.
Man what wood pusher mistake … I’m so ashamed
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.
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.
“what wood pusher mistake”
Just makes you look more corporate.
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.
This is great I’m going to add this to some of my sites. Thanks for the article.
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!
Will this work in Blogger Beta?
Nice script, thank you!
Was looking for something like it…
It Rocks !!
Any info where i can get social bookmarking script ?
This looks fantastic — thanks for making it available!
It’s great!
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
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….
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?
Hi
How can I redirect my wordpress blog traffic to my site?
wow!this is an amazing tool!
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.
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/
Please include wirefan.com
Here is the code
Thanks
http://wirefan.com
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
Thanks, i am trying
Hi! I was wondering if you would be interested adding GCurious | The Gossip Spot/ Bookmark.
http://www.gcurious.com
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
Thanks a lot! I will realize this widget at my site soon.
But i have found several bugs in urls…
great post Graywolf
Awesome script. Thank you very much!!
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.”
Anyway to get the images to be clickable as well? Cant figure it out.
Comments on this entry are closed.