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.

<?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&amp;noui&amp;jump=close&amp;url=$sLink&amp;title=$sTitle",
        "digg" => "http://digg.com/submit?phase=2&amp;url=$sLink&amp;title=$sTitle",
        "furl" => "http://www.furl.net/store?s=f&amp;to=0&amp;ti=$sTitle&amp;u=$sLink",
        "google bookmarks" => "http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=$sLink&amp;title=$sTitle",
        "mixx" => "http://www.mixx.com/submit?page_url=$sLink",
        "reddit" => "http://reddit.com/submit?url=$sLink&amp;title=$sTitle",
        "slashdot" => "http://slashdot.org/slashdot-it.pl?op=basic&amp;url=$sLink",
        "stumbleupon" => "http://www.stumbleupon.com/submit?url=$sLink&amp;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.

Tags




blog comments powered by Disqus
search blog
random posts
  • Building-iPhone-Apps-HTML-JavaScript
  • Web-Design-Nutshell-Desktop-Reference
categories & tags
about hb stone

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.

@hbstone follows:
@hbstone tweets:
  • Flash-Catalyst-CS5-Bible-Huddleston
  • JavaScript-Good-Parts-Douglas-Crockford
copyright

All 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!