Having social sharing buttons in your WordPress single pages are essential as they will obviously help users in easily spreading your article to the rest of the world. There are many positions to place those buttons in your page; most websites I observe place the buttons on the top and bottom of the post.
For mine as you can see, it’s on the left on the page and if you scroll down, it’ll always stay there. Why? Simply so that users don’t have to scroll up or down to click the share button when they’re in the middle of a long post. And I think this layout is quite sexy too.
Most popular WordPress sites like Mashable and HongKiat place their social buttons this way too. Take a look below.
Mashable’s Social Sharing Buttons
mashable.com
If you go to their site and check out different articles you’ll notice that Mashable displays different social buttons for different posts. That’s super cool, I think they’ve got some algorithm going on. For this page, they’ve got the Linked In and Twitter share buttons.
HongKiat’s Social Sharing Buttons
hongkiat.com
Hongkiat.com displays a standard of 3 social sharing buttons – Twitter, Facebook and Google Buzz.
So now, let me share with you how I did it for my site.
1. Codes for single.php
Insert these codes in your single.php file (wp-content/themes/your-theme/single.php). You have to place it inside the #content DIV as I’m using negative left margins to push the buttons to the left.
<!-- Main wrapper -->
<div class="buttonsWrap">
<!-- Tweetmeme button -->
<div class="tweetmemeBtn">
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<!-- Facebook button -->
<div class="facebookBtn"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink()?>&layout=box_count&show_faces=true&width=450&action=like&font&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:65px;" allowTransparency="true"></iframe>
</div>
<!-- StumbleUpon button -->
<div class="stumbleUponBtn">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=<?php the_permalink()?>"></script>
</div>
</div>
I placed mine right under these codes in my single.php file:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-1334">
<!-- Place codes here -->
2. Styling the social sharing buttons
After you insert those codes above, you’ll need to add the respective CSS styles in style.css.
.buttonsWrap {
display:block;
float:left;
margin:-20px 0 0 -90px;
position:fixed;
background:#F2F9FF;
width:50px;
padding:10px
}
.tweetmemeBtn, .facebookBtn, .stumbleUponBtn {
display:block;
float:left;
}
.facebookBtn {
margin:15px 0 10px 2px
}
If you did everything right, you’ll get something exactly like mine on the left. Good luck friends!
