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.
- Official Twitter Retweet Button
- Facebook Like Button
- StumbleUpon Badge
- LinkedIn Share Button
- Google +1
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?
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.
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()) { ?>
· <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.
- Blog Engage
- Digg
- Mixx
- Design Float
- Google Buzz (use post count on the side option)
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?
About Kristi Hines
Kikolani covers blog marketing and blogging tips for personal, professional, and business bloggers to succeed in search and social media marketing. Kristi Hines is a 
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 recently posted Vibrant Ways To Generate Traffic And Build Relationships
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 recently posted Goodbye Feedburner- Hello Feedblitz
I’m glad you got it working!
I tried it out in a few different themes (Thesis and non-Thesis) just to test out the code before putting it out here, and found that some themes needed different margins / padding to get them to align right. Even when I put the same code at the end of my posts, I had to tweak the alignment differently from the byline.
Hey Kristi! As always, your posts are always the BOMB! I am currently using Thesis to build my new site and I was wondering, how do you add these same buttons at the end of each single blog post? Thanks!
Monique Johnson recently posted How to Submit an Entry for a Video Contest & Kick Ass!
Great, thanks Ari for the explanation! I will add the share button to my set!
Hesham recently posted 50 Traffic Sources You Should Milk Like Crazy
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.
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 recently posted 4 Website Analytic Tools Better than Google Analytics!
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 recently posted Use Any Font on WordPress with Simple Cufon Replacement
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!
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 recently posted Show off Your Upcoming Posts to Spark Interest
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.
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.
Great article, its becoming so important to get these kind of links really accessible to visitors of our blogs, and this is one of many excellent ways to achieve this.
Dan Rowles Wedding Photography recently posted Gaynor and Steve’s Wedding Photography
Thanks Dan!
Kristi, I recently started using the Share and Follow plugin. It has a lot of options for non-coders like me to choose from and it works well, at least so far.
I also use the Tweetmeme plugin for Twitter, in large part because so many people are used to it.
John Soares recently posted Google’s Plan for Ebook Reading Threatens Amazon’s Kindle
That’s always a good option for non-coders. I used to be a bit of a coding junkie though.
Hi Kristi! I’ve been wanting to have share buttons for Linkedin and I am glad you include it. Huge thanks!
Ann Karen recently posted Log Home Webinar
You’re welcome Ann!
Hi Kristi,
You really rocks!!! Today I got to know that you’re a programmer as well.
Nice article and solve the problem about like button of different social networking sites.
Anu recently posted Hold your pee for a clear mind
Thanks Anu. I just visited your article about decision making… I’ll have to try that for my next big purchase!
Kristi
I didn’t know you were such a coding junkie!
I do a bit of both…use plugins for some things and coding for others.
Andrew
Andrew @ Build Blog recently posted My Shameless Happy Birthday Video
I am when I have the time and patience for it at least.
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?
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!
Hey Kristie,
Thanks for all of the codes.
I really like to know what your using for your social profile widget. Is that a plugin?
Ileane recently posted Finding The Best Social Media Apps to Boost Your Brand
Should I have waited, or was it I that put this post in your head? hahaha
I’m still very torn on exactly how and what I want to use. I’m currently testing one of those vertical sliding do-hickies to see if I like it or not. It’s still there, so it isn’t all that bad.
Good stuff!
Wayne John @ Southern California Web Development recently posted Playing around with Gravatar Hovercards
I decided to use this very code for my site, with a few mods to make it my own.
One thing that I didn’t see mentioned was to replace your name with the users own name. I’m sure that users would figure it out since it’s always good to review the code your using.
Good stuff, Kristi! Cheers!
Wayne @ Southern California Web Development recently posted Slowly define a new design for your blog
Whoops, good point Wayne. Just added that information to the post. I guess that’s why I got some weird retweets last week from a health blog!
Excellent coding Kristi, I’ll pass this along to my design partner ASAP! This combined with the coding i have below each post should be a good double up.
Question: Lets say I wanted 5 on top and 5 below, do you think it would make sense to make each a different 5, or the same?
Dennis Edell@ Direct Sales Marketing recently posted Do You Use StatCountercom
I remember when you sent me this code via email for my blog. Worked beautifully well but then I discovered ShareBar and decided to go with that as it kept the share icons in the view of the reader as he/she scrolled down the page.
Udegbunam Chukwudi@Patchwork Of Tips recently posted How To Fix BlackBerrys Yahoo Messenger Service Not Enabled For This Handheld Error
Nice tips! So far, I use plugins to integrate the social button into my blog since I do not have time to think the code yet. So, these code in here will be a big help for me.
Dana recently posted How Cell Phone Trackpad Works
Hi Kristi,
Nice tips, though I have tried Jetpack the new plugin and it adds the same functionalities.
I also add the code manually in my blog currently, to reduce plugins usage.
Thanks
Kimi recently posted Add a new service ShareDaddy Jetpack wordpress plugin
Works fine on my thesis! Awesome!
Thanks for this Kristi!
Jason Acidre recently posted Back With a Vengeance – I Need 30 People For My Next SEO Experiment Take 2
Thanks for sharing this. i just integrated them to my website. But how do you make it so that they appear at the bottom of the post as well?
Gustavo @ Gadgets and Gizmos recently posted Google Lets You Block Websites From Search Results
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 @ Feels Like Home recently posted Marinated Cauliflower
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.
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!
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.
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 recently posted Marketing Options for Software Startups
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 recently posted Smokey Bones- Free Appetizer Coupon also!!!
This article gives a bit more details Sherri – http://www.tecrux.com/2011/01/14/how-to-add-digg-button-in-wordpress-without-plugin/ – basically you have to manipulate their code a little to get it to work in the template.
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 recently posted 5-12 Daily Download Lightouts- Strange Talk and more
Is there a way to put it at the bottom of the post instead of the top? I wonder if people are more likely to click on one of them after they have read the post rather than scroll to the top to click after having read it.
Angie @ Many Little Blessings recently posted The Year of the Summer Staycation
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 recently posted You Liked My Comment On Facebook- So What
Great stuff managed to get the in-line boxes, facebook is such a pain in the ar** and by god do they not make it difficult to share things….very odd.
Well done, very useful article indeed.
Mobile Inquirer recently posted SmartPhones And Tablets Killing The Humble PC
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 recently posted GET INTO YOUR OWN SKIN
THANKS! worked perfect. just added it to my site. Been trying to tone down on the amount of plugins…
christian recently posted Capturing Life with the new Nikon D7000
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 recently posted Used mini cooper tips
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@ ALSpaulding.com recently posted 5 Things Men Notice First In A Woman
update to the above comment: So I went into custom.php and removed the codes for Fb like & then Fb share and proceeded to leave the other buttons and everything went back to normal. Now I’m missing the fb buttons along the top only. Anyway I can add them back without it affecting the facebook commenting system? Thanks again. =)
Al Spaulding@ ALSpaulding.com recently posted When Making Changes Don’t Forget The Small Things
Hi Kristi,
WOW!!!
I have been SEARCHING for what seems like forever for a solution for thesis!!! This is so appreciated and you instructions were easy to follow and bang on. It is so appreciated!!!
THANK YOU!!!!
Tim
T. Rollans recently posted Open Casting Call For Promotional Models