Social bookmark links are a given on most modern sites, especially blogs or collections of articles. Here's one way to keep your list of social bookmark links easy to maintain. Start with a CSS sprite like the following:
The sprite should be a single image that consists of all of the icons for the sites you want to link to. Each icon should be the exact same size, in this case 16x16 pixels. Now lets turn that into a list.
<?php
$sTitle = isset($pageTitle) ? $pageTitle : "You can set this before including this script.";
$sLink = $_SERVER["SCRIPT_URI"]; // permalink
$sSites = array(
"de.licio.us" => "http://del.icio.us/post?v=4&noui&jump=close&url=$sLink&title=$sTitle",
"digg" => "http://digg.com/submit?phase=2&url=$sLink&title=$sTitle",
"furl" => "http://www.furl.net/store?s=f&to=0&ti=$sTitle&u=$sLink",
"google bookmarks" => "http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=$sLink&title=$sTitle",
"mixx" => "http://www.mixx.com/submit?page_url=$sLink",
"reddit" => "http://reddit.com/submit?url=$sLink&title=$sTitle",
"slashdot" => "http://slashdot.org/slashdot-it.pl?op=basic&url=$sLink",
"stumbleupon" => "http://www.stumbleupon.com/submit?url=$sLink&title=$sTitle",
"technorati" => "http://technorati.com/faves/?add=$sLink"
);
$sPos = 0; // sprite position, in pixels
echo '<ul>';
foreach ($sSites as $k => $v) { // "key" => "value"
echo '<li style="background-position: 0px '.$sPos.'px;"><a href="'.$v.'"><img src="/img/transparent.gif"></a></li>';
$sPos -= 18; // shift the background image 18 pixels
}
echo '</ul>';
?>
Notice that each URL has components like url=$sLink and — when applicable — title=$sTitle.
That means that you can use the same script on many pages (or even across many sites) without changing a thing. Just
watch out for sites changing their submission link, because using the wrong URL may not let your visitor
promote your site.
Can't talk about CSS sprites without showing you the CSS to use them, so here you go:
ul.social-bookmarks {
list-style-type: none;
}
ul.social-bookmarks li {
display: block;
float: left;
width: 16px;
height: 16px;
margin-right: 16px;
background-image: url(/img/social-bookmarks.png);
}
ul.social-bookmarks img {
width: 16px;
height: 16px;
border: 0;
}
Floating the list elements tells them to appear horizontally. Each list item has the same background image; our PHP
script takes care of shifting the position of that background image. The only semi-hack involved is filling our list
items with a transparent gif. Some browsers don't let you apply width and height to empty
<a> elements, or don't let you click on empty links, so to make this cross-browser compatible
I used a 1x1 pixel transparent gif.
I'm a Front-End Engineer at Yahoo! working on the Mail and Messenger teams. I blog about web design and development topics including accessibility, usability, performance, and developing HTML / CSS / JavaScript applications on Appcelerator Titanium and Adobe AIR.
If you're a web developer, you might enjoy Jelo, my JavaScript library.
A few panoramic shots I took at SDCC 2010. #geek http://bit.ly/bwX6GB
JS version of Regex prime number checker:
function isPrime(n) {
return Array(n + 1).join("1")
.search(/^1?$|^(11+?)\1+$/) == -1;
}
Погрузился в пучину EcmaScript5, местами увлекательно, местами нудно =)
Modernizr http://ow.ly/18njQ1
A Collection of 20 HTML5 Video Players - a round-up of JavaScript and html5 alternatives to Flash-based media player... http://ow.ly/18njQ2
jQuery TOOLS - The missing UI library for the Web http://ow.ly/18njQ3
Contactable - A jQuery Plugin | the odin http://ow.ly/18njQ4
Giants vs Dodgers, sweet seats. http://twitpic.com/2ag9pa
@snookca That'll be fixed next week. I promise.
@snookca I was tryna not name names ;) But really that was just par for the course today, pretty hectic day. As I'm sure you know.
Who breaks major stuff after 4pm on Friday? On the last day of the sprint, no less. Tsk. (wasn't me)
Awesome live git tracker for teams: http://www.utsup.com/
RT @DerrenBrown: Blog post: Camera Software Lets You See Into the Past http://bit.ly/9kjVg5
10 invites to the new version of Digg: http://bit.ly/dqM8EV
Threaded vs Evented Servers, great look at the whats and whys. http://bit.ly/bDUEjn #geek
Nav, Context menus, "app-style" toolbars in sample chapter http://bit.ly/csTRY8 of new YUI book http://bit.ly/cJINoV
Add a side-mounted End Call button to your iPhone 4: http://bit.ly/cGxPBD #funny #geekAll original work on this site is covered by a Creative Commons Attribution 3.0 license unless otherwise specified.
You may share or use any code or images from this site in any manner, for free, so long as reasonable effort has been made to give credit where due.
The views expressed in the posts and comments on this blog do not necessarily reflect the views of Yahoo!