Social Sharing Buttons in Single Post Templates

One of the most frequently asked questions I get on a regular basis is what plugin I use for the above social sharing buttons in my posts. The answer is it is not a plugin, but some manually entered coding, which I am going to share with you today.

This coding will work with most self-hosted WordPress themes, including Thesis.

Why Are Social Sharing Buttons Important?

One of the main blog post promotion strategies I cover in my new eBook involves the big three social networks: Twitter, Facebook, and LinkedIn. If you share your posts on these networks, you will naturally want people who come to read them to continue sharing them to their connections on those networks as well.

Using these buttons will make it easy for your visitors to continue the promotional process of your posts to their favorite networks. It will also give your blog social proof when the numbers start climbing, and when you make social sharing easy in combination with great content, they will start moving up.

Social Sharing Button Coding

When it comes to inserting the social sharing buttons into your theme, you have two options. You can insert them into your templates in order to show everywhere, including the home page and archive pages, or you can insert them into just your single post template so they only show when you are viewing a single post. I choose to put them only on single post pages because, if any of them lag, you don’t want five – ten of them hanging up your homepage’s load time.

Also, yes, there are several plugins out there that you can use to do something similar. I like going with the manual coding option because A) less plugins = less load time and B) I can control exactly where the buttons go and what order they are in.

Without further ado, here is the code you will need to implement social sharing buttons in your single post templates.

The CSS – Styling and Aligning the Social Share Buttons

The following styling will keep your social sharing buttons in alignment. You can place these in your theme’s main style sheet.

To get to this, go in your WordPress dashboard to the Appearance > Editor and it will usually be under the heading of Styles > Stylesheet, style.css. For Thesis users like myself, it will go in the custom.css file which, in Thesis 1.7 is under Thesis > Custom File Editor.

.social-single {
margin: 17px 0 0 0;
}

#twitterbutton, #likebutton, #stumblebutton, #sharebutton, #linkedinshare {
float: left;
display: block;
}

#likebutton {
margin-top:0px;
margin-left:-3px;
}

#stumblebutton {
margin-left: 20px;
margin-top: 1px;
}

#linkedinshare {
margin-left: 20px;
margin-top: 1px;
}

#plusonebutton {
margin-left: 20px;
margin-top: 1px;
}

You can adjust the margin pixels as needed to straighten or space out your buttons. It’s a fun game of trial and error, but eventually they will all look straight enough.

The HTML – Inserting the Social Share Buttons in a WordPress Theme Template

The following is the HTML code you will need to insert into your single post template files, usually under the heading of Single Post, single.php. You’ll place the code where you want the buttons to appear, which is again a fun game of trial and error depending on your theme. (I’ll get to the Thesis specific code in a moment.)

<div class="social-single">

<div id="twitterbutton"><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script><div> <a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-counturl="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-via="username" data-related="username">Tweet</a></div></div>

<div id="likebutton"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode(get_permalink()); ?>&layout=button_count&show_faces=false&width=100&action=like&font=verdana
&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></div>

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

<div id="linkedinshare"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="right"></script></div>

<div id="plusonebutton"><g:plusone size="medium"></g:plusone></div>

</div><br />

You can find the code for the buttons I use on the following pages.

If you want to restyle your buttons, you can visit the above pages to get different code. For example, if you do not want to show your share count for Twitter or LinkedIn, you can get the code without the counter.

Please note that you should replace username within the Twitter code with your own Twitter handle.

Also, if you want to use the new Google +1 button, you will have to also add the following within your header.php file (same area with your theme’s other calls for javascripts, CSS stylesheets, etc.).

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

The HTML – Inserting the Social Share Buttons in Thesis

Want the beginning of your posts to look similar to mine?

Thesis Custom Byline with Social Sharing Buttons

Here’s what you have to do (currently using Thesis 1.7).

First, you will want to have the following settings under Thesis > Site Options > Bylines.

Thesis Byline Site Options

Then, you will want to use the following code in your custom_functions.php.

If you are not familiar with editing your custom_function.php code, here is a word of warning. If something is awry in the code you place in it, then your site will whitescreen (aka, you won’t even be able to get into your WordPress admin dashboard). My suggestion is to FTP your current copy of your custom_functions.php file to your desktop and keep it in a separate folder, untouched. Edit and upload your new custom_functions.php file – if something goes wrong, simply overwrite the new one with the backup copy you saved earlier, then start over.

add_action('thesis_hook_byline_item','custom_byline');

function custom_byline() {

if (is_single()) { ?>

&middot; <span class="url fn"><?php the_category(', '); ?></span><br />

<div class="social-single">

<div id="twitterbutton"><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script><div> <a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-counturl="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-via="username" data-related="username">Tweet</a></div></div>

<div id="likebutton"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode(get_permalink()); ?>&layout=button_count&show_faces=false&width=100&action=like&font=verdana
&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></div>

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

<div id="linkedinshare"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="right"></script></div>

<div id="plusonebutton"><g:plusone size="medium"></g:plusone></div>

</div><br />

<?php }

}

The above code will add the category to your byline, and then add the social sharing buttons below it on single post pages only. And again, remember to replace my username (kikolani) within the Twitter code with your own username.

Again, if you are using the Google +1 button, you will want to put the following under the Site Options > Document Head > Additional Scripts.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

Additional Social Share Buttons

I use the above social networks because they work the best for me. But there are many other networks that offer the same compact size badge. Here are some other favorites.

Your Favorite Social Sharing Tools

What are your favorite tools, plugins, and social sharing widgets to use to increase the popularity of your blog posts?





Genesis Framework

Like the new design? Kikolani uses a theme called Wintersong Pro on the Genesis Framework from StudioPress. It's great design right out of the box, easy to follow installation instructions, and built-in SEO features makes it perfect for professional bloggers.

If you have several websites and blogs powered by WordPress or design websites for others, then you will want the Pro Plus Package. It gives you lifetime access to all of their current 40+ professional designs plus new themes regularly added to their collection for unlimited use on your own websites and blogs as well as your clients' websites and blogs. Learn more about Pro Plus!




Comments

  1. says

    Very nice! My blog now looks like yours after the last changes! I removed all other bookmarking and social buttons and focused on major social share buttons, although I am missing the share on facebook button!

    I was wondering what’s the big difference between the “share” and “like” Facebook buttons! I am sure you know better than, so I appreciate any explanation.
    Hesham just posted Vibrant Ways To Generate Traffic And Build Relationships

    • says

      If you “like” something, it appears on your wall in a single line that you liked it. If you “share” something, you are opted to write descriptive text alongside an image from the item you’re sharing. I prefer sharing than liking because it gives more context (and can further be shared by people reading their news feed or my wall).

      Kristi, thanks for sharing this code. You know I was one of the people who asked this question and for the life of me I couldn’t get everything lined up horizontally. Now, it’s working thanks to your expertise! :)
      Ari Herzog just posted Goodbye Feedburner- Hello Feedblitz

    • says

      The like button actually does do more enriched updates, but the share button allows you to add a comment, change the details, select a different thumbnail, and so on. So by having both, you give users the option to do it the fast and easy way or have more options to do it their own way. I prefer the share button when I go to sites personally because sometimes the thumbnail that the like button picks isn’t the one you want. Like I was on my new photography blog and liked one of my hubby’s posts, and instead of picking the main photo from the post, it picked a gravatar image as the thumbnail instead.

      • says

        I actually solved the problem of the image for the like button, you can decide which image to share by simply adding a meta tag in the head of your theme:

        <meta property="og:image" content="<?php $values = get_post_custom_values("thesis_post_image"); echo $values[0]; ?>"/>

        Note that I am using Thesis Post Image field to assign the image I want!

        So, simply you can add a new function in your custom-functions file like this:


        function add_fb_image(){ ?>

        <meta property="og:image" content="<?php $values = get_post_custom_values("thesis_post_image"); echo $values[0]; ?>"/>

        <?php }
        add_action('wp_head', 'add_fb_image');

        After adding this code and using the Image post field, there is no more choosing images, the like button will pick the right one!

        I hope this help!
        Hesham just posted 4 Website Analytic Tools Better than Google Analytics!

  2. says

    I too prefer to manually code my buttons for the same reasons you mentioned here. I actually wrote about it a few months ago (http://www.doitwithwordpress.com/add-sharing-buttons-to-wordpress-no-plugins-or-external-references/) in much the same manner as you have here.

    However, a great suggestion that two of my readers made was to use an URL shortener to go with the Twitter button, so that it automatically returned a short URL for use in the tweet, thus saving space as one normally does on Twitter. I got it figured out and included it in my buttons and it works really well.

    You’ve got the syntax for quite a few more sites here than I showed on my site though. Thanks for sharing these extras and writing another great tutorial.
    Dave Clements just posted Use Any Font on WordPress with Simple Cufon Replacement

    • says

      Ah, nice. The official Twitter retweet button uses the t.co shortener. I think you can use the Tweetmeme button and specify shorteners… I just like the official Twitter button because it also suggests to the person sharing your post that they should follow your Twitter account. I’ve noticed an increase in followers since adding that. You have some great code too to check out though! :)

      • says

        Yes, the official Twitter button now shortens URLs, you’re right. However, back when I made that tutorial, Twitter hadn’t released t.co yet. I do like the appearance of the official Twitter buttons, but I also wanted the size and shape to match my other icons, so I just used icons from a set for all of my buttons. I really don’t care for the Tweetmeme button though, I think it’s so ugly, even though it is now largely recognised.

        Something I included in my Twitter syntax was “via @dowithwordpress” at the end, so that anyone retweeting would also know my official Twitter account and perhaps be persuaded to follow.

        Anyway, great tutorial, I’ve long been a fan of your work.
        Dave Clements just posted Show off Your Upcoming Posts to Spark Interest

  3. says

    I prefer multiple sharing and bookmarking buttons per page. Some might say that its unnecessary, but I think that since there a lot of different formats and layouts available, many people are used to different bookmarking buttons and formats, so if you provide all the popular options, it’ll make sure that readers use their familiar sharing buttons.

    • says

      Exactly.. if you notice your audience is fond of a particular network, you should try to have that badge on your site so they can easily vote for it there.

  4. says

    I have envied your social media buttons for a long time! Is this code possible to include with a WordPress.com blog? I have access to the CSS and I imagine I can copy and paste the HTML in the beginning of every post and edit the CSS so that it sits right under the post title…but I don’t think I can upload custom PHP files…Any thoughts?

    • says

      I’m not familiar with WordPress.com sites. I know that if you pay a fee you get access to the files though… but I take it that doesn’t include the PHP? You can post them into each post individually and that should work, but you will have to grab some code for the Twitter button from their official site that doesn’t include the PHP references. Let me know how it goes!

  5. says

    Thanks for an awesome set of instructions. I’ve wanted to set these up on my blog for a long while, and I couldn’t find a plug in that did it just as I wanted it to be.

    I was convinced that your instructions made me break my blog. And then I figured out that it was my coding skills (or lack there of) that made me break my blog. It’s all fixed now, and the buttons are working. Thanks again. :)
    Tara just posted Marinated Cauliflower

    • says

      I’m glad they worked Tara! I tested this code in a few different sites of mine, straight from the post into Thesis and a few other themes just to see if they would work. I’m sure there are still others out there though that might have their issues, at least with alignment.

  6. says

    Kristi, I tried to include your awesome toolbar of social media plugins, but cant find it in my WordPress admin page under “Editor”. Should I be copy/pasting it under the coding in the box “Styles > Stylesheet, style.css.”
    I appreciate your help! Thanks!

    • says

      Hi Jen! Are you using a self-hosted WordPress or a domain forwarding to a WordPress.com blog? If it’s the latter, then you will have to manually paste the buttons into each post because you don’t have access to the template files you need, specifically the single post.

  7. says

    Kristi,
    Excellent information, this is very useful for a new blogger like me.
    I have used this on my own site at the top and bottom of each post and it’s working great.

    But several errors (43 errors, 35 warnings) show up if validate the HTML error at
    validator.w3.org

    The code works in all the browsers I have tested, so I guess it does not really matter, and W3C’s validator is being overly fussy or does not understand these are external calls.

    I am using the validator to check if I made any mistakes in the HTML for my posts, so it would be easier to spot my mistakes if there is a way to avoid these errors. But not that big a deal – I can treat 43 errors as meaning no html errors in post.

    Are there any other side effects to consider?
    – do these “errors” slow page loads
    – any indications that search engines might penalize page with errors
    Giles Farrow just posted Marketing Options for Software Startups

  8. says

    Thank you SO much Kristi! I love the way these look!

    I would love to add the Digg compact button as well. Would you be able to help me with what I need to add to what you have here? I hate to say that I don’t understand the instructions of what I need to do on the Digg link you have above. Coding /learning novice that I am.
    Sherri just posted Smokey Bones- Free Appetizer Coupon also!!!

  9. says

    Thanks so much for this! I’ve looked all over and your site is the first that actually shows how to line all of my social buttons up. I added the code in my single.php file right after – .

    I also switched out the LinkedIn submitter for a reddit submitter.

    The last thing I am trying to switch is to put a break in between the buttons and my post picture. They’re practically sitting right on top of it.
    MusicUnderFire just posted 5-12 Daily Download Lightouts- Strange Talk and more

  10. says

    Kristi,

    Ya know.. I spend a lot of time trying to really understand why people do things. Lately I’ve been obsessed with the fact that us bloggers take our encounters in life, and create blog posts out of them (art).

    I’m also fascinated by what makes people really like bloggers, specific posts, or a message someone is firmly about and posts like this, definitely do that sort of thing.

    I used your exact instructions to change up my share situation on my site, including the good old Google +1 and everything worked magnificently. Awesome.
    Ryan Critchett just posted You Liked My Comment On Facebook- So What

  11. says

    Hi Kristi,

    I found you through Farnoosh over at Prolific Living. I have been searching around for the best code or plugin that would get social sharing buttons into my posts in a well formatted fashion. Your code is the best I have been able to find so far.

    I had the biggest issue getting the Google +1 button to format properly. I used a tweak from the Google +1 tutorial at DIY Themes to add the Google API before the body tag instead of in the header.php as you have here. That seems to have resolved some of my formatting issues. I also noticed the FB share button is a bit of a runt to format properly as well.

    Anyways thanks for sharing the code – your post was a big help.

    Chris
    Chris Harris just posted GET INTO YOUR OWN SKIN

  12. says

    Hi Kristi,

    Thanks for your tips. I am currently using Graphene Theme in some of my sites. They do have a option to let you add your own social sharing buttons. Do you think plan to add more buttons in the future?

    Actually, some of the plugins can do the same thing. But I just don’t want to add too many plugins to my site. Anyway, thanks for your effort.

    Max
    Max just posted Used mini cooper tips

  13. says

    Hi Kristi.

    I want to take a moment and thank you for the code. I had been going crazy trying to get my buttons lined up correctly in thesis and had given up and resigned myself to using sexy bookmarks when i came upon your post.
    However I ran across a slight problem upon using the custom functions.php code you provided. I have facebook comments installed on my blog and for some reason it cancels out my facebook commenting system and removes it completely. I removed it for now until I hear from you. Could it be the fb code for the buttons are clashing with the fb commenting system? kind of weird. I look forward to your reply.

    P.S. How do i add those same buttons to the bottom of my post as well? I’m curious to know how you did that. I like the way you have it styled on your blog. Thanks in advance.

    regards,
    AL
    Al Spaulding just posted 5 Things Men Notice First In A Woman



This site contains affiliate links, sponsored advertisers, and web analytics tracking code. Email addresses collected on this site will not be sold or given to third parties without your permission. While all attempts to provide accurate and valuable information are always made, the owners and authors of this site are not responsible for the content provided here or linked to on external websites.