Social Bookmark Scripts & Widgets

October 24th, 2006 by Michael Gray in Social Networks, Tools


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

socialb.jpg

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

sociala.jpg

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:

socialb.jpg

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

Text Link Ads


41 Responses to “Social Bookmark Scripts & Widgets”

  1. SEM Basics Says:

    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.

  2. SeoRookie Says:

    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” ?

  3. SEM Basics Says:

    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.

  4. Super Des Says:

    great post Graywolf

  5. tony rocks Says:

    How come you aint using those cute button on this post? ;)

  6. Mark Daoust Says:

    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…

  7. Michael Gray Says:

    uh I am using them do you not see them?

    I suggested limiting your choices

  8. Thomas Says:

    I have a tool and plugin to generate your bookmarks (no images) at http://www.twistermc.com/shake/social-bookmark.php

  9. Nick Says:

    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.

  10. Brian Turner Says:

    Nice post Michael - looks more preferable to the Sociable plug-in.

    As above, though, your image paths are a bit screwed - replace:

  11. Brian Turner Says:

    Hm, the HTML disappeared from the above comment - okay:

    Make the image paths relative:

    src=”/images”

    rather than a HTTP statement with a username.

  12. Michael Gray Says:

    Man what wood pusher mistake … I’m so ashamed

  13. tony rocks Says:

    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.

  14. SeoRookie Says:

    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.

  15. Brian Turner Says:

    “what wood pusher mistake”

    Just makes you look more corporate. :)

  16. rxbbx Says:

    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.

  17. Protrox Web Traffic Says:

    This is great I’m going to add this to some of my sites. Thanks for the article.

  18. Addies Says:

    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! :)

  19. Shankar Ganesh Says:

    Will this work in Blogger Beta?

  20. Andrey Moraru Says:

    Nice script, thank you!

    Was looking for something like it…

  21. Ryan Smith Says:

    It Rocks !!

  22. imran hashmi Says:

    Any info where i can get social bookmarking script ?

  23. Kerry J Says:

    This looks fantastic — thanks for making it available!

  24. lunakizz Says:

    It’s great!

  25. vicki Says:

    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

  26. sat Says:

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

  27. Luis Says:

    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?

  28. dev watmore Says:

    Hi
    How can I redirect my wordpress blog traffic to my site?

  29. constructicle Says:

    wow!this is an amazing tool!

  30. Vik Says:

    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.

  31. sat Says:

    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/

  32. Tracy@Social Bookmarking Says:

    Please include wirefan.com

    Here is the code

    Thanks
    http://wirefan.com

  33. TheSource Says:

    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

  34. www.r10.net seo yarışması küresel ısınmaya hayır Says:

    Thanks, i am trying

  35. Mia Says:

    Hi! I was wondering if you would be interested adding GCurious | The Gossip Spot/ Bookmark.

    http://www.gcurious.com

  36. Actual Download Says:

    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

  37. File Gets Says:

    Thanks a lot! I will realize this widget at my site soon.
    But i have found several bugs in urls…

  38. lazer epilasyon Says:

    great post Graywolf

  39. Angela Says:

    Awesome script. Thank you very much!!

  40. Richard Ward Says:

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

  41. Kieran Says:

    Anyway to get the images to be clickable as well? Cant figure it out.