I bet that post title caught your attention, didn’t it!

I think everyone I know hates the way Facebook requires us to use their like button exactly the way they serve it, am I right? Even though we all understand WHY they do this, we resent the fact that we have to take it or leave it as-is, even though it will never look like it belongs in your design. You can choose to opt out of course, but when you read articles saying that FB accounts for 1 in 4 pageviews in the US, well . . . you need to figure out how to put that thing on your site in a way that won’t make you cringe every time you look at it.

Here’s what I ended up with for my knitting pattern site:

I’ll show you how I got there after the jump.

The “Default” Look

When I first added the like button to Chiagu.com, I went the lazy route and installed the WP FB Like plugin and just used the default settings.

It looked like this:

Lots of WordPress blogs have the like button looking like this, because that’s what most plugins do out-of-the-box.

If you don’t want to (or can’t) dig into the code, then you’re stuck with very few options for how to edit the styling of your FB like button. You can basically make it show up exactly the way you see it but in different places on your site, always left-aligned in that area. That might be enough to make you happy if you don’t want to spend too much time on it, but it was driving me crazy so I decided to get rid of the plugin and do it from scratch. I’ll write another post on the coding part of it, but this post focuses on the design decisions.

Design Progression

Right-aligned:

The first thing I thought of was to make the like button right-aligned so that it would show up in the upper-right hand corner, like this:

Not bad, and since I almost always start a post with an image, it seemed like a reasonable option. But I didn’t like how it brings your eye to the empty space next to the image instead of the image, so I kept trying.

Button Only:

The next thought I had was to get rid of the “be the first of your friends” part and just do the simple button option. With that thought, I tried this:

Tightening up the white space helped bring the content up, which I liked, but the button still looked like it was hanging out as an afterthought.

After the Post Title:

So then I thought, maybe it can live after the post title? Let’s see what that looks like:

Not bad, right?

The problem I had with this version is that the button’s location changes with the length of the header — which just seemed like a bad practice if I’m trying to get people to notice and get in the habit of clicking that thing.

Before the Post Title?

So that issue made me try sticking it in before the post title:

Also not bad, but this version seemed to make the like button somehow more prominent, which was an odd result I didn’t expect. I also realized, too late, that once someone actually clicked on that like button, the count would be shown to the right of the button. Because of the FB limitations as to how those buttons are drawn, there’s no way to make the space dynamic, so I would need to leave space to the right, like this:

That would look fine once there was a like count in there, but like this it looks ridiculous.

Also, I hated how the post title didn’t line up with the post byline.

Use the Box Count Style

But I did like the idea of the like button being on the upper left hand side of the post, so that’s when I looked at the other button option, the “box button,” which shows a count of 0 if there are no votes and thus removes the problem of an empty space when there are no likes.

Swapping out the button style gave me this:

Cool! Now I don’t have to worry about a visual difference between posts with no count vs. posts with a count. No silly white space before the title.

But the alignment issue remained, and this version introduced a whole bunch of white space above the title, which pushes the content down and was therefore a deal-breaker.

Count Box before the Post Title and Byline

The natural next step was to put the button just above the image, to the left of both the post title and the byline:

Bingo! The perfect location for the like box in this design.

Now if only people would start clicking those and make all this tinkering worth it . . .

–

PS – it did not escape my notice that this whole article uses screenshots from a post where I talk about how I have design ideas coming out of my ears right now. Apparently that applies to web design as well as knitting!