Add a Stylish Set of Share Buttons to Blogger

on
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, 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 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:
</head>
5. Paste this code above it:
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-47c9cca-cf33-f245-f3f6-43ed7a58f34f"}); </script>
6. Now search for this:
<data:post.body/>
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:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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.

Comments

Post a Comment