If you checked this site on mobile, you should see a set of share buttons appear above and below posts. Also, if you’re using a PC, you should’ve noticed the same share buttons appearing just below posts only. Lots of co-bloggers often ask me which exact WordPress plugin I use but as a matter of fact, I’m not using a plugin for those buttons, I added them manually. Either you’re on Blogger platform or WordPress, you can add these kind of cool, stylish share buttons to your blog too. This is what the buttons should look like when added:
I actually got the code from sharethis.com but you may not like the way it appears on your blog if you’re using their WordPress plugin or if you did the automatic setup they have for Blogger. Adding it manually gives you more flexibilty: You can choose how and where you want the sharing buttons to appear. As you can see, the buttons have the major social networks and social bookamarking sites included:
- Facebook share button
- Facebook like buttton
- Tweet button
- Pinterest button
- Digg button
- Stumbleupon button
Of course, you can add more buttons and even customize it but lets get started with these first. Below is a demo of what it should look like. Note that it’s customized with a little bit of CSS but of course, you can change this if you know how to get it done.
Adding the share buttons to Bloggger / Blogspot
1. Log in to your Blogger account
2. Go to Template > Edit HTML
3. Click the box labelled “Expand Widget Template”
4. Search for this:
5. Paste this code above it:
<script type="text/javascript">stLight.options({publisher: "ur-47c9cca-cf33-f245-f3f6-43ed7a58f34f"}); </script>
6. Now search for this:
Note that you will have more than one of this if you’re using a magazine style template. You should keep trying them one after the other and check you blog each time you implement the code to know when it works.
7. Copy this code:
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#FFFFFF;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center' class='doncaprio-share-buttons'>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_pinterest_hcount' displayText='Pinterest'/>
<span class='st_digg_hcount' displayText='Digg'/>
<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
</p>
</b:if>
If you want the buttons to appear above your posts, paste the code above <data:post.body/>.
If you prefer to have the share buttons just below your content, paste the code after <data:post.body/>.
You can as well put the code in both positions if you like.
You can change the CSS to change the look and feel if you want. Did you see the colored part of the code? That’s how the buttons are arranged. You can remove the ones you don’t like or change the arrangement.
Adding the share buttons to WordPress without a plugin
I’ll be explaining hot to add these buttons to your blog’s regular theme and mobile version (Mobilepress precisely). The first part of the code goes into the head section of your theme.
1. Copy this code:
<script type="text/javascript">stLight.options({publisher: "ur-47c9cca-cf33-f245-f3f6-43ed7a58f34f"}); </script>
And paste it in your head section.
For genesis theme users, simply go to Genesis > Theme Settings > Header and Footer Scripts and paste the code.
If you’re using any other WordPress theme, install Header and Footer plugin. Then go to Settings > Header and Footer > Code to be added on HEAD section of every page and paste the code there.
If you want the buttons to appear on MobilePress, log in to cPanel file manager and navigate to …public_html/wp-content/plugins/mobilepress/system/themes/default/header.php. Edit your header.php and paste the code before the closing </head> tag.
2. The second of the code requires Post Layout plugin to work. This plugin defines how your post looks like and what you want to put before, after and even in the middle of your content. You can even use it to add adsense codes but that’s another story. 
Installed the plugin? Now go to Settings > Post Layout > Before the content and/or Before the content. Paste this code right there:
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#FFFFFF;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center' class='doncaprio-share-buttons'>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_pinterest_hcount' displayText='Pinterest'/>
<span class='st_digg_hcount' displayText='Digg'/>
<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
</p>
That’s all folks. If you encounter any trouble adding the share butons, don’t hesitate to let me know and if it works perfectly on your blog, say thank you by sharing on Facebook or hitting the Google +1 button.
Your sharebar always expands when i open the page I think there is somebug with sharebar and ad block
I’m using Firefox, Chrome & Safari and it looks quite alright. Perhaps it’s the ad block as you pointed out.
Don Caprio recently posted..Add a Stylish Set of Share Buttons to Blogger / WordPress
Twitter: divyanshojha
says:
i have no adblock but still social bar is blocking d view,
Divyansh recently posted..Create E-mail Filter in New Outlook 2012 Interface of Microsoft
Still confused
since I can’t seem to see how the error looks. Can you please send me a screenshot? Or try using another browser?
Don Caprio recently posted..Add a Stylish Set of Share Buttons to Blogger / WordPress
Twitter: divyanshojha
says:
hi don, nice tutorial.
Working fine! Thankyou very much, Bro
)
You’re welcome, Faizan!
Twitter: augustusvibe
says:
I have been making failed attempt of getting a superb share button for my blog. This helped out.
Computer Tips recently posted..5 Ways to Increase Your Computer Speed.
Twitter: Okaztle
says:
Thanks Caprio for this wonderful post.
Twitter: otodeluxe
says:
Thanks I’ve been looking for the old facebook share
Worked for me..Surely am going to use on my upcoming blog
Thanks a lot !!
Chirag Patel recently posted..Zbigz Alternative Bruzzy.COM:Download torrent files with IDM
Twitter: xlimderek
says:
Just customized it and added linkedin to it.
Had to look up The Javascript if linkedin was in it.
Was lucky i guess
Derek recently posted..5 Steps for Branding through Social Media
Love this! Thank you! The only question I have is if you know how to get rid of the “via @sharethis” that appears when a user presses the Twitter share button?
I wanted to write a post on that but haven’t been able to do. You can check this post on a friend’s blog – http://www.strictlyonlinebiz.com/blog/change-sharethis-code-twitter-name-handle/2366/
Not working…….. Share buttons bar not appear on my blog, but it does’nt contain any error.
Reddypradeep recently posted..T-REX vs BABY
It does work, unless you’re making a mistake somewhere. Couldn’t check your blog to access it.
Now you can check my blog….. let me know whats wrong.
I checked your blog now and the buttons are already visible.
actually that share button code taken from Sharethis.com but it’s also not working properly , now i decided i would like to add your share buttons code but its also not appear on my posts . pls help
I would like to send my template code, find the solution.
You can sent it to caprio (at) capriofiles (dot) com
Just i sent my template code to you, will you please add stylish share buttons code for that.
I’ll check it, Reddy.
Just i sent my template code to you, please add stylish share and count button for that.
Thank You
Have you checked my template code, did you add share buttons to my template….?????
I’ve been rather very busy lately. I’ll check tonight, check your email in the morning.
Don Caprio recently posted..The Best Alternatives to Apple Products
I must confess man, this tutorial is awesome. ONCE AGAIN nice tutorial
baba recently posted..HOW TO REPAIR WINDOWS XP WITHOUT BOOTABLE CD
Thanks a lot for this! The only problem is when people click the like/share/tweet button and then they click cancel it still counts as a counter. Anyway to change this? Thanks!
Hung Kieu recently posted..Life of a Procrastinator
Hi Hung,
Thanks for sharing the article! Sadly, there’s no way to stop that from happening, It’s the way they coded the javascript which I can’t change.
Hey! Thanks for the reply.
Another problem has occured. When I share the post it doesn’t display a thumbnail or the actual post title. For example if I share your post it says this on my facebook page
http://shar.es/GqcLb
http://shar.es/GqcLb
Any idea how to fix this?
Hung Kieu recently posted..Looking for Guest Bloggers
The addthis script automatically shortens the URL and I guess this is to make you make use of the analytics service they offer to track your social media impact. I’m only speculating though.
The post probably has no image that can be used as a thumbnail. Thumbnails appear on others.
Doing gr8 job..Really love those tips related to blogging..
Twitter: otodeluxe
says:
Thanks bro! Its nice, Ive been looking for the perfect social share buttons for my blog
otobong recently posted..Heres How To Connect Skype to Facebook
Twitter: iharmanbajwa
says:
helloo can you please tell me how you add you mai also like .. on your blog please reply [email protected]
Hmm. I cannot find code on my blog template.
So I cannot use this thing.
This code.
Please parse the code here before posting commenting so it would show.
Twitter: clixseo
says:
thanks aloy DC, i so much apprecited it
make money online recently posted..Easy Way To Earn Money Online With My Blog Through Affiliate Programs.
Twitter: UrbanMooCow
says:
Is it possible that I don’t have the code in my template?
Deb recently posted..Compassion and Policy Are Not Mutually Exclusive
Twitter: UrbanMooCow
says:
Sorry: this code “”
Deb recently posted..Compassion and Policy Are Not Mutually Exclusive
Twitter: UrbanMooCow
says:
Argh! this is the code I meant… \”data:post.body/\”
Deb recently posted..Compassion and Policy Are Not Mutually Exclusive
thanx for posting but i dont have
Thanks for the tutorial! Now i am using it in my blog… http://mytravelanywhere.blogspot.com/
Liezl recently posted..Gotta Go My Own Way French Version Lyrics
Twitter: frugalmommyblogger
says:
I have been looking for some good share buttons FOREVER. Your instructions are excellent. I was not ever able to figure out how to put the code into my CSS sheet, but I did manage to figure out how to put it in my sidebar. I’m going to keep trying to figure out my style sheet and where to apply it so I can have it on each of my posts. Thanks to your color-coding, I was able to customize the bar to fit my page and needs. Thanks so much for this.
Twitter: StraitTwistedMe
says:
Nice 1. the tutorial worked for me.
but, my twitter share, is showing zero and i do have over 50 shares per post.
pls, what is wrong?
Twitter: Brainmike2
says:
thanks for sharing this
Twitter: CricketPatches
says:
Hello.
This does not work in blogger.. I am using my self-made theme and this is not working. Another error I face is that I am unable to import blogger widgets :\ Tried every browser but this really does NOT work.
Twitter: JAHIDHASAN240
says:
NICE POST I LIKE THIS
http://WWW.websfinder.com/why-free-wordpress-themes-are-not-really-free/
jahidhasan240 recently posted..watch Live Stream Baltimore Ravens vs Denver Broncos
Twitter: JAHIDHASAN240
says:
you are nice and i like
http://www.websfinder.com
jahidhasan240 recently posted..watch Live Stream Baltimore Ravens vs Denver Broncos
Twitter: jaa_09
says:
Nice i’m using this widget ….
Twitter: Twittervipiqbal007
says:
Really nice topic & helpful article. I bookmarked mark your website to get more
information.
http://seopips.blogspot.com/
Twitter: super3abdo
says:
Thanks , worked for me like a charm and quite good looking too .
Twitter: HabibJiwan
says:
Great! It worked! Thank you so much. Anyways, please also do visit my blog http://HabibJiwan.blogspot.com – I have designed it like crazy & it looks sleek. I’d love if you would.
Habib Jiwan recently posted..Top 20 Websites to Download Blogger Themes
Twitter: akhils783
says:
hi Don,
I like your site and the share bar.
One touch
nice Workd
keep it up
aqil recently posted..Complete Internet Repair 1.3.2.1322
Twitter: ma_prince
says:
I love this…great post. i think i’m going to use this buttons on my new blog.
Prince recently posted..Understanding The Woman Mind
Twitter: _louise098_
says:
bro! i salute you! thank you!
barronlouise recently posted..“Grown Ups 2” releases teaser and poster
And I salute back!
Thanks for dropping by as well.
Twitter: http://www.nigamainfo.com
says:
Hi,
Such a innovative site i like it so much….
Simple and nice! You have such a great site. I’m using it. Thanks
Jerome Morada recently posted..What is Down Payment in Buying Properties?
Hey Don, I think I posted this in another thread but guess this is the right place. How about a button for COMMENTS as in Huffpost added to the box? I use DISCUS or facebook comment both on the posts.
Many thanks
Shred Pillai recently posted..Is Andrew Sullivan’s Way the Only Way for Bloggers Who Want to Make Real Money?
It may be possible but I’ve never tried anything like it. It’s gonna require some custom coding which is gonna take a while to figure out especially on Blogger.
Twitter: maureen4all
says:
very good on my site. thanks bro.
denco d denco recently posted..Amazing Ways To Track Sent Mail Messages
Thanks a ton man, the best social buttons i found ever. Looks awesome , much better than sharethis and addthis buttons
Himanshu Dureja recently posted..Enjoy Stick Cricket Partnership Game on Facebook
You are a lifesaver man. I tried different methods, but my blog got messed up. Your tutorial works fine.
Rahul recently posted..How To Get Quality Backlinks To Your Blog Or Website
Good article!
But…how do you make that bar shorter?
tinel recently posted..Peisaje post-apocaliptice
Under
margin: 10px;, you can add a line to define the width… something likewidth: 400px;Twitter: TechStake
says:
I have visited minimum 30 websites to get this done…but none can help me it until I landed up here at your blog…..Thanks a lot….It helped me to get the share button working properly….I have become a huge fan of this blog, and will follow it regularly from now on……
Aditya Dey recently posted..Yahoo acquires ‘PlayerScale’, Popular Gaming Cross-Platform Company