allankintz.com

I had a bookmark for this great site that showed what was likely the simplest and easiest way to add the common "tweet" and "like" buttons to your website... I tried to get to it today and it is apparently gone. The site appears to have gone through a redesign with no sign of this previous post. And just so it shows that I'm not just some asshole trying to steal someone else's awesome post, I want to give credit where it is due. I originally found this on RobbClarke.com (via a Google Search).

Anyway... on to the goods...

I've tried numerous plugins for WordPress to add these things. Some have worked well enough and some have been crap. Being the "creative" person that I am, I want some flexibility in adding these buttons where ever I want to add them and I don't want it to be a PITA to do so. Turns out, all you need to do is add a few simple bits of code to your website in order to get these features...

TWITTER

The Tweet button... here's the code:

<a href="http://twitter.com/share" class="twitter-share-button" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="YOUR-TWITTER-NAME-HERE">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

There are two things you can do here. The first is to change the data-via field to your own Twitter ID so it includes that in the tweet and not mine! The other option is to change the data-count from horizontal to vertical. And that just indicates the type of button you want. If you look to the top of this post, I'm currently using the horizontal button. The vertical is a bit taller and shows a larger count of tweets. That's it.

FACEBOOK

The Like button is almost as easy as the Tweet button - but with a couple more options - and one other step. First, here's the code you need:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowTransparency="true"></iframe>

I've been referring to this developer page on Facebook as my reference for these options - so checking that out first will familiarize you with some of these things. You have 3 layout options: standard, button_count, and box_count. The button_count is what I am using and matches Twitter's "horizonal" button. The box_count matches Twitter's "vertical" button. The standard shows a bit more info (including which of your friends Liked that item).

If you want to use a different layout (other than the default button_count) you will need to change not only the layout field in the code, but also the height and width (in both spots) - you can get the corresponding layout dimensions on that developers page I linked just above this.

The last thing you'll need to do with the Facebook button is only if you want to be able to view the stats for your site... and that is to add the appropriate fb:admins account in a meta tag in the header of your site. The code you would need to add is the following:

<meta property="fb:admins" content="YOUR FB ID HERE" />

For the "content" field you need your NUMERICAL Facebook ID. Not your name. You need the number. To find that, just go to your Profile page and hover the mouse over your profile picture - then look at the very bottom of your browser in the status bar - you should see "id=XXXXXXX" in that URL. That is your numerical ID.

This particular meta tag needs to be added to the header.php file of your theme somewhere within the <head> tags. Again, this is only necessary if you want to see your stats (check out the Facebook Insights page for info on that).

And that's it! OK, so the post is longer than it probably needs to be, but I think I made it pretty easy to follow. I took these two bits of code (and the fb:admins piece) and just wrapped them in a <span> tag with some CSS to position them where I wanted. Pretty simple...

Some possibly related posts...