Friday, 31 August 2012

Adding Stylish Share Buttons to Your Blogger/Wordpress Blog's Post

Comments
Share buttons is very important for your blog as it helps in traffic and also makes your blog look more advanced. Are you looking for share buttons for your blog? Here's the spot.Before you continue, you can read one of my post of how you can add floating share buttons to your blog sidebar.

As you can see on the picture above the share button includes:
  • Facebook share button
  • Facebook like buttton
  • Tweet button
  • Pinterest button
  • Digg button
  • Stumbleupon button
Well this share button was gotten from sharethis.com but you may not like the way it appears whenever you use their Worpress plugin or their blogger gadget. Adding it manually gives you more flexibility because you can choose how and where you want the widget to appear.
You can also add more share buttons or customised it's look and feel by editing it's CSS. But let's get this done first.

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>
.tripozia-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='tripozia-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.

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 how 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" src="http://w.sharethis.com/button/buttons.js"></script>
<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, 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:
<style>
.tripozia-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='tripozia-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. If this post works perfectly on your blog, say thank you by sharing on Facebook or hitting the Google +1 button. Or if you have encountered problems implementing this tutorial please let me know.
There was an error in this gadget
Loading