The sociable plugin is no longer available for download and the devbump service is long gone.
I use the "Sociable" WordPress plugin to add social bookmarking links to the bottom of every post. There are a tonne of social bookmarking sites around, so I've kept things light to avoid the icon overload that can be seen on some blogs. I've made two updates over the last few days, one was adding devbump and the other was adding CSS image rollovers.
If you're not sure about adding a few bookmarking buttons, you might want to check out the traffic increase at webloghits.com. That's the kind of increase that is worth a few minutes of your time.
Adding devbump.com
There are a lot of digg style sites out there, but devbump caught my eye because it's aimed squarely at game developers. Submitting your posts to places that are actually interested in the subject is always more useful, so devbump was a natural choice.
To add new sites to sociable, open up "sociable.php" and find the following line:
$sociable_builtin_known_sites = Array(
Once you've found it, add the following after the "Del.irio.us" definition:
'devbump' => Array(
'favicon' => 'devbump.png',
'url' => 'http://devbump.com/submit.php?url=PERMALINK&title=TITLE',
),
You'll have rebuild the list of available sites by logging in to your blog, and selecting "Restore Built-in Defaults" from the sociable page (Options -> Sociable). "devbump" should now be available to use on your site.
Adding CSS image rollovers
Now for the fun part. I used some code from Present Tense (Hacking the Sociable WordPress Plugin for Image Rollovers), but it didn't quite hit the spot so I did quite a lot of tweaking to get things looking nice. I've stuck it all in a zip at the end of this post.
Before you skip ahead to the freebies, there are a few important things to note.
Tweaked "sociable.php"
I made two main tweaks to sociable.php. One was because some sites have "." characters in their name, so it wouldn't work with CSS class names. The other tweak was to change the way that the HTML was generated. Instead of standard images, it's a list.
Internet Explorer
Naturally IE messes things up a little bit, so you might have to experiment a little bit to get things looking the way you want them. Removing the CSS tooltip may help.
16 x 16 Images
I like to have text next to my images, so each one has a different width. If you open "sociable.css", you'll see I've defined each networking site with a pair of definitions:
.sociable li.delicious a { width: 69px; background-image: url(images/delicious-hover.gif)}
.sociable li.delicious a:hover { background-position: 0 -16px;}
If you're using 16 x 16 images, you can move the width statement into the ".sociable li" definition.
Adding New Rollovers
To add a new image, you need to add a class with the name of the site, and then set its image. It's really just a matter of copying an existing class definition and changing the names. I'll add new sites as time goes on, but at the moment I've only defined: del.icio.us, digg, devbump, Reddit and Furl.
Free Stuff!
Everyone likes free stuff, so I've zipped up all of the files I modified for your downloading pleasure. There are still a few bugs to iron out, so I'll be modifying this post as and when things change.
To install the changes, just copy the files into your "wp-content/plugins/sociable" directory – you'll need to have sociable already installed (download here).
Download Latest Release (1.0) sociable-tweak-1.0.zip (11.0KB)
2 Comments
great guide phil! I have noticed a couple other people putting devbump links on their blogs too. I want to look into a way we can re-direct submit requests to the story itself if it has already been submitted. Right now the links work for the first person to submit the story via it, but anyone who clicks the link after that gets a "duplicate story" error.
Looks awesome to me. I'm going to install it on my site :)