Now available for free download, customized Renegade’s Social Bookmark Add-To Buttons that I designed for the Wordpress Sociable Plugin that I use here on DaveUrsillo.com.

The idea was to make a series of simple .png’s that looked like TweetMeMe/Digg This buttons but functioned simply as a link to “Add Post” a social networking site, as through the Wordpress Sociable Plugin. My reasoning was that larger, more visible, prettier icons that look like the TweetMeMe/Digg This buttons would be more enticing for visitors to use.

Version 1.0 includes: Delicious, Digg, Facebook, Myspace, Reddit, StumbleUpon, Twitter, and Technorati buttons. Also included is a “Subscribe to RSS Feed” button. Based upon demand, I will create and add more in future releases (leave a comment with requests)!

– Download Renegade’s Social Bookmark Add-To Buttons v1.0 (.png format)

How To Install to Sociable Plugin:

1. Download image files:

– Download Renegade’s Social Bookmark Add-To Buttons v1.0 (.png format)

2. Unzip or unrar files to your local computer
3. Upload files to a specific folder on your blog’s FTP server (or use Wordpress’ built-in upload functionality)

Now we need to tell the Sociable plugin that we (1) want to use custom CSS to display the images properly, and (2) want Sociable to locate the new image files to where you upload them, instead of using the default Sociable images.

1. First, log into your Wordpress Blog as an administrator
2. Under Settings on the left control panel, click the “Sociable” tab (will only be visible if Sociable is installed and activated).
3. Scroll down and Untick “Use Sociable Stylesheet”
4. Copy and paste the Sociable’s CSS into your blog theme’s main .CSS file:

div.sociable {padding:10px 5px; border-top: dotted 1px #eee; margin: 16px 0px;}
span.sociable_tagline {position:relative;}
span.sociable_tagline span {display:none; width:14em;}
span.sociable_tagline:hover span {position:absolute; display:block; top:-5em; background:#ffe; color:black; line-height:1.25em;}
.sociable span {display:block;}
.sociable ul {border:none; display:inline; margin: 0 !important; margin-top:10px; padding: 0 !important;}
.sociable ul li {border:none; background:none; display:inline !important; list-style-type:none; margin-left:16px; padding:1px;}
.sociable ul li:before {content: “”;}
.sociable img {float:none; width:45px; height:64px; border:solid 1px #fff; margin:0; padding:0;}
.sociable-hovers {opacity:.4; -moz-opacity:.4; filter: alpha(opacity=40);}
.sociable-hovers:hover {opacity:1; -moz-opacity:1; filter:alpha(opacity=100);}

Modify this code how you please. But be sure to specify that the buttons are now 45px wide by 64px high (as above), so that they will visually display properly.

Note that since we need to change the display dimensions for images, if you use any other social networking sites icons with Sociable, you’ll need to create new image files of the same dimensions, otherwise the small default Sociable icons will appear distorted.

Finally, in the Sociable Plugin Options page, locate the box named “Image directory” and enter the URL of the folder that now contains the custom images you uploaded.

– Download Renegade’s Social Bookmark Add-To Buttons v1.0 (.png format)

Renegade’s Free Custom Sociable Buttons are free. If you enjoy them, care to buy me a coffee?

Donate a quick $3, securely with PayPal! :)

Related Posts

1. Press
2. Eight Years Later, Remember 9/11.
3. Why Teens Dont Tweet
4. Your Hero Story
5. Forging a Brand for Yourself Online