start blog post

Generate Social Bookmarks with PHP

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:

social bookmarking css sprite

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.

    $sTitle = isset($pageTitle) ? $pageTitle : "You can set this before including this script.";
    $sLink = $_SERVER["SCRIPT_URI"]; // permalink
    $sSites = array(
        "" => ";noui&amp;jump=close&amp;url=$sLink&amp;title=$sTitle",
        "digg" => ";url=$sLink&amp;title=$sTitle",
        "furl" => ";to=0&amp;ti=$sTitle&amp;u=$sLink",
        "google bookmarks" => ";output=popup&amp;bkmk=$sLink&amp;title=$sTitle",
        "mixx" => "$sLink",
        "reddit" => "$sLink&amp;title=$sTitle",
        "slashdot" => ";url=$sLink",
        "stumbleupon" => "$sLink&amp;title=$sTitle",
        "technorati" => "$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: {
    list-style-type: none;
} li {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 16px;
    background-image: url(/img/social-bookmarks.png);
} 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.

var tags = [, ];

  • share this post:
  • email a friend
  • float this post
  • digg this post
  • share on stumbleupon
  • submit to technorati
  • tweet this post

end blog post

most viewed this week

least viewed this week