Add social media buttons in thesis at the end of each post without a plugin

A great way to spread the word about your posts is the use of media buttons. These allow your visitors to effortlessly tell their friends to go check you out. With just about EVERYONE socializing through Facebook, Twitter, and StumbleUpon, adding a convenient way for your visitors to refer their friends to your website is becoming more and more important.

Most bloggers turn to plugins in order to handle this. I like and use quite a few myself, but I always try to implement my desired functionality without one first. One of the first things I did was to add my social media buttons at the end of each post without a plugin.

Getting social with your blog

For two years The Urban Cowboy has been blogging on and off. During this time, the site has undergone three major changes in look and functionality. The one thing that has never changed, is the use of Thesis for WordPress as its foundation.

Here is how I added custom social media buttons to the end of every post of my Thesis Theme powered site:

Add Facebook, Twitter, and StumbleUpon at the end of your posts without a plugin

Be sure to make a backup copy of your custom_functions.php file BEFORE making any changes.

Copy and paste the following into your custom_functions.php file


<?php

/* ---Add social media bookmark links after each post--- */

function add_social_media () {
if (is_single()) {
?>

<div id="rightcol">
<span id="share">

<table cellspacing="10" width="280px">
  <tbody>
    <tr>
      <td><h4>Share with others:</h4></td>
      <td><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink()?>&layout=box_count&show_faces=true&action=like&colorscheme=light&" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; height:65px;width:55px;"></iframe></td>

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

      <td><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></td>
     </tr>
    </tbody>
   </table>
</span>
</div>
<?php
}
}
add_action('thesis_hook_after_post', 'add_social_media');

?>


This is how your file should now look.


<?php

// Using hooks is absolutely the smartest, most bulletproof way to implement things like plugins,
// custom design elements, and ads. You can add your hook calls below, and they should take the
// following form:
// add_action('thesis_hook_name', 'function_name');
// The function you name above will run at the location of the specified hook. The example
// hook below demonstrates how you can insert Thesis' default recent posts widget above
// the content in Sidebar 1:
// add_action('thesis_hook_before_sidebar_1', 'thesis_widget_recent_posts');

// Delete this line, including the dashes to the left, and add your hooks in its place.

/**
* function custom_bookmark_links() - outputs an HTML list of bookmarking links
* NOTE: This only works when called from inside the WordPress loop!
* SECOND NOTE: This is really just a sample function to show you how to use custom functions!
*
* @since 1.0
* @global object $post
*/

/* ---Add social media bookmark links after each post--- */

function add_social_media () {
if (is_single()) {
?>

<div id="rightcol">
<span id="share">

<table cellspacing="10" width="280px">
  <tbody>
    <tr>
      <td><h4>Share with others:</h4></td>
      <td><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink()?>&layout=box_count&show_faces=true&action=like&colorscheme=light&" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; height:65px;width:55px;"></iframe></td>

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

      <td><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></td>
     </tr>
    </tbody>
   </table>
</span>
</div>
<?php
}
}
add_action('thesis_hook_after_post', 'add_social_media');

?>


Be sure to make a backup copy of your custom.css file BEFORE making any changes.

Copy and paste the following into your custom.css file


#rightcol {  
     float: right;
     width: 50%;
     }

#share {
     background: #E4F2FD;
     border: 1px solid #C6D9E9;
     float: left;
     margin: 10px 5px 10px 5px;
     padding: 7px 7px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     }

#share h4 {
     color: #363636;
     font-size: 1.0em;
     letter-spacing: normal;
     padding: 5px 0px 5px 0px;
     font-weight: bold;
     }


That’s all there is to it! One thing I like most about using the Thesis theme, is that customization really can be pretty easy. As you will notice, these are the exact social media buttons I use. And of course, you can experiment with the custom.css styles to further customize the look.

If you liked this, I strongly recommend the Thesis Theme, you can get a copy of your own awesome wordpress theme here: {Get Thesis Theme by Chris Pearson}

Tagged as: Facebook, Plugins, Social Buttons, StumbleUpon, Thesis Theme, Twitter

 Printer Friendly Version