Social media buttons just might be what you need to give your blog that extra boost in visitors. There are a plethora of options available, from which bookmarking and social networking buttons to offer, to the types of icons and buttons to use.

It is probably best to minimize the use of these buttons to avoid cluttering your blog. Most blogs use smaller icons at the bottom of each post, but some find it more effective to place them at the top. Some blogs use large counter buttons as a means to attract attention and hopefully get more exposure.

Here are codes for small and large counter social media buttons for some of the bigger bookmarking and social network sites.



Facebook “Like” Button

The Facebook “Like” button is a popular choice, especially since it seems like everyone is on Facebook. This button is especially useful for webmasters because there are no pop-up windows or confirmations. The visitor simply clicks “Like,” and that’s it! The web page is automatically posted to the wall and newsfeed. The small Facebook “Like” button does not show a counter until it has at least one click.

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false"></fb:like>

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="button_count" show_faces="false"></fb:like>

Twitter / Tweet Button

The Tweet button pops up a window with a customizable message. Twitter automatically shortens the URL.

<a href="http://twitter.com/share" class="twitter-share-button" 
data-count="vertical" data-via="moronacity">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>

<a href="http://twitter.com/share" class="twitter-share-button" 
data-count="horizontal" data-via="moronacity">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>

Digg This! Button

For those fortunate few who have been lucky enough to have their articles “digged” to the top, this button has been incredibly useful for driving loads of traffic to their websites. Clicking the Digg button pops up a confirmation window which then takes the visitor to the Digg website.

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), 
s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<!-- Medium Button -->
<a class="DiggThisButton DiggMedium"></a>

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), 
s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<!-- Compact Button -->
<a class="DiggThisButton DiggCompact"></a>

Google Buzz Button

Google Buzz is becoming more and more popular, and many webmasters would love to add this button to their websites.

<a title="Post to Google Buzz" class="google-buzz-button" 
href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js">
</script>

<a title="Post to Google Buzz" class="google-buzz-button" 
href="http://www.google.com/buzz/post" data-button-style="link"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js">
</script>

Stumbleupon Button

Stumbleupon is fun for those who like to randomly surf the web. It takes surfers to random websites based on the interests that those users select when they sign up. Unfortunately, some topics simply will not do well, here; but a popular topic will bring in spike of traffic.

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>

Simply place the code where you want the buttons to appear. For example, in WordPress, if you want the buttons to appear at the end of your posts, edit the “single.php” file and place the code after the content code, which will look something like this:

<div class="the_content">
<?php the_content(__('Read entire Article »','cover-wp')); ?>

<!-- Place button code here. -->

Using several buttons can be somewhat frustrating because they will not automatically line up. Fortunately, Divyang Patel provides a solution in the GoosPoos blog post, “Add Social Bookmarking and Sharing Buttons to Your Blog Without Plugin.”

Tweet