Social Bookmarking Menu

[TheJoshMan]

1) CODE TITLE: Social Bookmarking Menu

2) AUTHOR NAME/NOTES: Josh Jones

3) DESCRIPTION: A social bookmarking menu which can be easily added to any site that uses WordPress. I also included a version for static sites as well.

4) URL TO CODE: http://eight7teen.com/DD/bookmarks-m...mark-menu.html

It's pretty self explanatory... However, here are a few details about it.

I've used extremely small text for the links and matched the color of the background so that the text is "invisible", but will still be readable by screen readers/braille interpreters. I would have used "color:transparent;" but IE doesn't support this apparently.

The wordpress version uses permalinks inside the anchors to retreive the necessary information about the particular post you are "sharing". (things like the URL to the post and the title of the post)

The static site version simply submits the URL of your site.
There is a bit you'll need to modify in the static version for it to work properly (see highlighted below).

<li class="blinklist"><a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=http://YourSiteHere.com&Title=YourSiteNameHere"title="Share this on Blinklist">Share this on Blinklist</a></li>
<li class="delicious"><a href="http://del.icio.us/post?url=http://YourSiteHere.com&title=YourSiteNameHere"title="Share this on del.icio.us">Share this on del.icio.us</a></li>
<li class="digg"><a href="http://digg.com/submit?phase=2&url=http://YourSiteHere.com&title=YourSiteNameHere"title="Digg this!">Digg this!</a></li>
<li class="furl"><a href="http://www.furl.net/storeIt.jsp?t=YourSiteNameHere&u=http://YourSiteHere.com"title="Share this on Furl">Share this on Furl</a></li>
<li class="reddit"><a href="http://reddit.com/submit?url=http://YourSiteHere.com&title=YourSiteNameHere"title="Share this on Reddit">Share this on Reddit</a></li>
<li class="yahoo"><a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=YourSiteNameHere&u=http://YourSiteHere.com"title="Save this to Yahoo MyWeb">Save this to Yahoo MyWeb</a></li>
<li class="stumble"><a href="http://www.stumbleupon.com/submit?url=http://YourSiteHere.com&title=YourSiteNameHere"title="Stumble upon something good? Share it on StumbleUpon">Share this on StumbleUpon</a></li>
<li class="technorati"><a href="http://technorati.com/faves?add=http://YourSiteHere.com"title="Share this on Technorati">Share this on Technorati</a></li>

Also, it uses Dean Edwards' IE fixing script to make IE 5/6 live up to IE 7 standards. (fixing things like the :hover pseudo class and transparency for PNG imags)

However, since this uses that script to fix transparent PNG's in IE 6 if you rename the images, they HAVE to end with "-trans.png"

The images are zipped up and available for download here: http://eight7teen.com/DD/bookmarks-menu/images.zip

[TheJoshMan]

Fixed: Issue with font size in Google Chrome, Opera, and Safari

The font size ".01em" was working fine in FF and IE, but apparently Safari, Opera, and Google Chrome didn't recognize it and would display the font at around 6px. So, I've used the font size "0" instead. This still allows the text to be readable by screen readers/braille interpreters, but keeps it invisible to the human eye.

Fixed: Issue with Safari and Opera still showing the text even with font size "0"

Apparently this is a more "complex" endeavor than i first imagined! LOL
I have made it now so that the font "color" is set to transparent for all browsers EXCEPT IE (the only one which doesn't support it) and font size "0". Thus finalizing the "invisibility" to the human eye.

IE now uses another small conditional statement to change the font color to the same as the background it's on to make the text "invisible".

[jimbob79]

what exactly is it?

[TheJoshMan]

you have to follow the link at he beginning of the post to see it in action. It's a social bookmarking menu for people who use Wordpress. I also included a version for regular static sites as well.

[TheJoshMan]

If I didn't know any better, I'd say that you could hear crickets in this thread... LOL

[Medyman]

As I've mentioned elsewhere, I love how you've presented this Josh. It might be even better if you used CSS sprites.

Also, since the real point of this is the images and presentation, you might want to give credit to Liam McKay. He makes it pretty clear that you're to link back to site if you use those icons. Even modified, I think it would be in good faith to do so. But, your call.

[TheJoshMan]

I couldn't edit the original post anymore, so I added the credit to the demo page.