How to add Social Media Buttons in WordPress

Just follow directions...

This is a guest post by Devesh of Technshare.com and Blokube.com.

WordPress is one of the best platforms for blogging and has several advantages.

Because of its popularity, its support community is awesome. You will find various tutorials over internet, which will help you to get started with WordPress.

In this post, we’ll be adding buttons to our WordPress theme to allow visitors to easily submit the current blog post to social bookmarking sites like Twitter, Facebook, Blokube, Delicious, SERPd, Digg, StumbleUpon, and Blogengage.

Note from Ana: there are many reasons I think you should consider adding social media buttons directly to your theme code, rather than using a plugin, like

• no more incompatibility and crashed blogs;
• improved site speed;
• you can choose what buttons you would like, what you want them to look like, what order you want them in, etc.

If you need help installing them on your site, contact Dev.

Adding Simple Buttons

Adding simple buttons is very easy.

Step 1. First of all download all the icons from here http://icondock.com/free/vector-social-media-icons

Step 2. Now just add these codes inside a loop (single.php file) and you’re ready to go.

<div>
<a rel="external nofollow" href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" title="Share with your friends on Facebook"><img src="<?php bloginfo('template_directory'); ?>/uploads/icons/facebook.png" width="32" height="32" border="0" alt="Share with your friends on Facebook" /></a>
    <a rel="external nofollow" href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title();?>" title="Bookmark this post at Delicious"><img src="<?php bloginfo('template_directory'); ?>/uploads/icons/delicious.png" width="32" height="32" border="0" alt="Polariod Delicious Icon" /></a>
<a rel="external nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title();?>" title="Stumble this post"><img src="<?php bloginfo('template_directory'); ?>/uploads/icons/stumbleupon.png" width="32" height="32" border="0" alt="Polariod StumbleUpon Icon" /></a>
<a rel="external nofollow" href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title();?>" title="Digg this post"><img src="<?php bloginfo('template_directory'); ?>/uploads/icons/digg.png" width="32" height="32" border="0" alt="Polariod Digg Icon" /></a>
<a rel="external nofollow" href="http://www.mixx.com/submit?page_url=<?php the_permalink(); ?>&title=<?php the_title();?>" title="Mixx this post"><img src="<?php bloginfo('template_directory'); ?>/uploads/icons/mixx.png" width="32" height="32" border="0" alt="Polariod Mixx Icon" /></a>
<a rel="external nofollow" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title(); ?>&summary=&source=<?php bloginfo('name'); ?>" title="Share this post on linkedin"><img src="<?php bloginfo('template_directory'); ?>/uploads/icons/linkedin.png" width="32" height="32" border="0" alt="Share with your linkedin groups" /></a>
<a rel="external nofollow" href="http://technorati.com/faves?add=<?php the_permalink(); ?>" title="Fav on Technorati"><img src="<?php bloginfo('template_directory'); ?>/uploads/icons/technorati.png" width="32" height="32" border="0" alt="Fav on Technorati!" /></a>
<a rel="external nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title();?>" title="Reddit this post"><img src="<?php bloginfo('template_directory'); ?>/uploads/icons/reddit.png" width="32" height="32" border="0" alt="Reddit this post" /></a>

Step 3. Add this code in style.css

.share_care {width: 634px; padding-left:0px;}
.share_care a {background-color:none;}
.share_care img {background-color:none; border: none; margin-right:0.8em;}

Adding Share Count Buttons

Most of the share counts are a piece of JavaScript that you must retrieve from the social media service.

Paste all these codes inside a loop, most likely in your single.php file.

Twitter

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

FaceBook

<a name="fb_share" type="box_count" href="http://www.facebook.com/
sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php
/js/FB.Share" type="text/javascript"></script>

Blokube

<script type="text/javascript" src="http://www.blokube.com/evb/button2.php"></script>

Delicious

Go to header.php on your WordPress dashboard and insert the below code within </head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js"></script>

Now go to single.php and paste this code

<div style='float:right; margin-right:10px;'>
<a  href="http://delicious.com/save">
   <!-- {
   url:"<?php the_permalinkundefined) ?>"
   ,title:"<?php the_titleundefined); ?>"
   ,button:"wide"
   } -->
   Save on Delicious
</a>
</div>

Source

Digg

<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>
<a href="http://digg.com/submit?url=<?php the_permalink(); ?>"></a>

StumbleUpon

<script src="http://www.stumbleupon.com/hostedbadge.php?s=1&r=<?php the_permalink(); ?>"></script>

Serpd

<script type="text/javascript" src="http://www.serpd.com/index.php?page=evb"></script>

Adding floating buttons

Note from Ana: Floating buttons are what you see to the right of this post. When you scroll up or down, the buttons remain visible at all times.

For Thesis Users

For those of you who are using Thesis theme, like Traffic Generation Cafe does, add this code in the custom_functions.php file to show twitter, facebook, blokube, stumbleUpon button

/* ------------------------*/
/* Social Floating Buttons*/
/*--------------------------*/
function sharepost() {
if (is_single()) { ?>
<div>
<div><script type="text/javascript" src="http://www.blokube.com/evb/button2.php"></script></div>
<div>
<a href="http://twitter.com/share" data-count="vertical" data-via="tnsblog">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
</div>
<?php
}
}
add_action('thesis_hook_after_headline', 'sharepost');

Add this code in style.css

/* Social Floating Buttons */
.sharepost{
float:left; border:1px solid #737373; margin-right:20px; top: 240px; position:fixed; background:#FFF; margin-left:-105px; width:64px; z-index:0
}
.sharer{
padding: 6px;
border-bottom: 0px solid #e8e8e8;
}
.sharer-fb{
padding: 6px;
padding-bottom:2px;
margin-bottom:1px;
border-bottom: 0px solid #e8e8e8;
}

For non-Thesis Users:

Since every theme has different functions, it is better to use a plugin:

1. Smart sharing plugin - This plugin adds a scrolling box with social media icons on single post pages, so as your reader scrolls down the page, they will continuously see the share button.
2. ShareBar Plugin - Sharebar adds a dynamic and fully customizable vertical box to the left of a blog post that contains links/buttons to popular social networking sites.
3. Digg Digg - All-in-One social voted count buttons.

Do you have any other social media buttons that you would like to add? Let me know, and I can get the codes here.