Lately, I’ve been making efforts to refine my site and sand off the sharp edges which have plagued my ill-conceived re-design since last Fall. Like the Internet in general, this site is a work-in-progress. Maybe you’ve noticed?

By now, the social networking sharing buttons are well known. Facebook has the “Like” button — the successor to their “share” button — Twitter has “Tweet This”, Google’s Buzz has given way to their +1 buttons. There’s one for LinkedIn, Reddit, and a host of others.

Share Buttons
Social media buttons

But the problem is that these buttons don’t fit together. They differ in heights, widths, styles, types, colour schemes, and whether or not corners are to be rounded. Forgetting their inconsistencies, there’s almost a zero chance this array of buttons will magically fall in line with your site’s design. So, the inevitable question arises: how can I create some social networking buttons using my own images, not theirs.

Today I took on the task. As you can probably foresee, this involves two parts: making the appropriate images which will become the buttons, and finding the right bits of code to activate the same functionality.

buttons are similar, but different. And they all don’t jibe with my site style.

Here’s what I did with the images. I took a look various buttons and tried to find some common ground. As I said, heights and widths do vary, but they’re consistently small and rectangular. I decided on dimensions of 45w x 18h. This is slightly smaller than most of the buttons, but that’s ok, because they’re mine, after all. Your tastes may warrant larger buttons, but nevermind at the minute. 45×18. From there, it was a simple matter of creating four variations in Photoshop for each of the link states — normal, hover, active, and visited.

Twitter share buttons
My custom twitter share buttons

If you’re familiar with how to use an image to create a rollover image using CSS, you’ll understand why I’ve stacked these images into one. Basically, the background is one image, and when the states change, the position of the image changes. It’s a better way to handle it rather than using four different images.

Here’s the CSS and HTML that goes along with it. Now I hate when people say this, but this really was rather simple and straightforward once I figured it out. Check it out:

background: transparent url('images/sharebtn_twitter.png') no-repeat scroll 0px 0px;
color: #444;
display: block;
float: left;
height: 18px;
width: 45px;
margin-right: 0px;
text-decoration: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none; }

This sets up a link style called “sharebtn_twitter” which exists in a 45×18 block. The whole block is a link. Technically, you can add some text within that block, but I just left it blank in this case. The reason I have those transition styles is because the links on my site are normally animated, taking .3s to change. That doesn’t exactly work in this case, so I set it to 0.

Now, let’s get in some hover, active, and visited states.

a.sharebtn_twitter span { background: transparent url('images/sharebtn_twitter.png') no-repeat; display: block; line-height: 14px; padding: 2px 0 2px 0px; }
a.sharebtn_twitter:hover { background-position: 0px -18px; color: #000; outline: none; /* hide dotted outline in Firefox */ }
a.sharebtn_twitter:hover span { background-position: 0px -18px; padding: 2px 0 2px 0px; /* push text down 1px */ }
a.sharebtn_twitter:active { background-position: 0px -36px; color: #000; outline: none; /* hide dotted outline in Firefox */ }
a.sharebtn_twitter:active span { background-position: 0px -36px; padding: 2px 0 2px 0px; /* push text down 1px */ }
a.sharebtn_twitter:visited { background-position: 0px -54px; color: #000; outline: none; /* hide dotted outline in Firefox */ }
a.sharebtn_twitter:visited span { background-position: 0px -54px; padding: 2px 0 2px 0px; /* push text down 1px */ }

The important part there is the -18, -36, and -54px on the position. That moves it down an according number of pixels. If you want to use the button as a regular text button, change the padding by one pixel and it will appear to shift the text on click.

Now then, we’ve got the image and the style, so let’s put it into the page. I’m using WordPress so you’ll see some WordPress code. I’ll save you the story on how I found the functionality for these links, basically it was a bitch. Which I why I’m the good guy, giving it to you.

Here’s the Twitter situation:

<a class="sharebtn_twitter" alt="Tweet This" title="Share this post on Twitter" href="<?php echo urlencode(the_title('','', false)) ?>+-+<?php the_permalink() ?>"> </a>

Do you see what’s going on there? It’s basically a link to with the URL lumped onto the end of it. Facebook is similar:

<a class="sharebtn_facebook" alt="Share on Facebook" title="Share this post on Facebook" name="fb_share" href="<?php the_permalink() ?>"> </a>

I couldn’t find how to do an “Email this” button without the use of a third-party web service. I’m sure given time I could get deep into it and find a way to use my web host’s built-in Perl functionality and rock some Javascript to do it manually, but it’s much easier to use AddToAny to for a simple email form. Maybe in time I’ll search for a more minimal solute, but for now here’s the email code:

<a class="sharebtn_email" alt="Email This" title="Email this post to a friend" href="<?php the_permalink() ?>"> </a>

So, yea, I think we’re done for now. Twitter, Facebook, and email are, in my opinion, the most common ways to share an article, so those are the ones I really wanted to get working. I’m doing some research into how to add a “Share on Google+” button, but I don’t think those links have appeared yet for the newly-hatched service.

It seems tougher to add a custom Like button and +1 button, because those are a little more interactive. Their javascript behaviour is tied in to a third-party site, which is tricky, and there’s also the on-and-off appearance, where you can click and re-click. That’s a challenge for another time.