Adding Social Media Buttons to Blog.

Like, Tweet, Share, Digg there so much you can do these days with your blog posts, simple and efficient way to spread your posts. But how is it done, because blogger doesn't provides you with this facility. So here is a very simple tutorial which will give your blog some popular Social Media Buttons.

We will be including Tweet Button, Digg Button and Facebook Like button, below the Posts title, i think that's the best area where these buttons fits.


Start your stop watches, we will be finished with this in 5 minutes.


1. First thing to do is to login into your Blogger account. Go to page where you customize your Template, and Click on Edit Html button.


2. Now Blogger will ask you not to do this until you know how to edit template, click on Proceed , and you will be presented with the codes of your template.

3. Do not get afraid by seeing those hundreds of lines of coding, we will make things easy for you. Above the box containing the lines of code, you will see a checkbox "Expand Widget Templates" , mark it with a tick.

4. Now press cntrl+F , a small box will slide down your browser window at the top-right corner, some what like this,

Now just copy paste, <data:post.body/>  inside that box and press enter, you'll see a line of code marked orange.

Just above that line paste these codes,

For TWEET BUTTON 


<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

For DIGG BUTTON

<script type="text/javascript">(function() {

var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggCompact"></a>

This will give you compact Digg button, digg provides us with different buttons, you can choose any out of these buttons.

Just replace Compact with Wide, Medium or Icon to customize your button.

For FACEBOOK SHARE BUTTON

<a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a>

<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>




This is it, now you can see what we did in the last 5 minutes by clicking on Preview, and if you are satisfied, just Save Template.