How Do I Add Facebook, Twitter and Google +1 Buttons to my Site?

There are multiple ways to add those lovely little Facebook, Twitter and Google Plus One buttons to your blog posts so that viewers can use them to help promote you.

The Manual Method

Each service provides a tool to help you generate the exact code you need to add into the basic HTML of your site.

Add a Google +1 Button (note that under “Advanced Options” you can choose to show or hide the count)

Get Facebook Like Button Code (you may want to deselect the “Send Button,” choose either “button_count” or “box_count” under “layout” and deselect “show faces”—and when you get the code, most people will want to use the iframe version)

Put a Tweet Button on Your Website

Just make sure to be consistent–whether you use minimalist buttons, short buttons with the count beside them, or boxy buttons with the count above them.

WordPress Plugin

If you use WordPress, you may want to use the Twitter Facebook Social Share plugin (or a similar one). If you do use this plugin, I recommend configuring the following under Settings > Social Share.

• Set your Twitter ID! The Twitter button will not work properly otherwise.
• Disable StumbleUpon
• Show below the post
• No border
• No background

Of course, those are just my preferences. You can style the buttons differently. You can show them above the post or above and below the post, or you can even have it floating to the left side of the screen, beyond the edge of the content. (The problem with this approach if that if the user changes the window size or has a small screen resolution, the share buttons are suddenly on top of the content.)

Note that the Twitter button in this plugin is one for people to tweet your content; if you’re looking for a button for people to follow you on Twitter with one click from your website, this isn’t it.