Tutorial: Add Original Social Media Share button on Blogger

For any one who uses Blogger platform to create blog will be provided with stock old share button which would be hardly noticed by the readers. All of them are small icon which is most of them might ignore if someone do not read until end of the post.

Default Blogger Share Button At the end of Each Post

But most of us wish to have social share button which would stick at a fixed position, so that it might appeal to the reader for a share. Unlike Wordpress, Blogger is short of plugin libraries. But this fact will not going to stop us from creating our own floating Social Share Button for Blogger.

Floating Social
Share button

To create your own social share button, you do not need a expertise knowledge as a professional web designer would do. All you have to know is simple Ctrl+C and Ctrl+V technique. It would not even take 20 minutes to setup your own floating social share buttons on your new blog. All you have to do is simply follow the steps mentioned below. 

Unlike other tutorials, I am not going to instruct on how to edit Blogger Template to add Social Media Share Button.

Steps to Add floating Social Media Share Button:

Step 1: Collect code from all social media website to which you wish keep share button. This is important but tedious job as you have to collect share button code from all your desired social networking websites. But Search Engines would help you find relevant code.

Bing Search for Twitter Share button

In this instance, I made a search for Twitter share button in Bing. The first result was the official Twitter page which help you create 'share' button for twitter. 

Twitter Share Button Code

Now, copy and paste the code which is provided in the code box to a notepad or text editor which ever you wish to use.

Similarly, collect code for facebook, Tumblr, google+, etc.

Step 2: Now goto Blogger.com. Enter your credentials and open up your blog to which you wish to add Social Media share buttons. It is simple as adding a widget when it comes to blogger.

Step 3: Now Select 'Layout' from the side bar. You will see the layout of your  blog.

Select Layout

Then select 'Add a Gadget' in your layout window. And now select 'HTML/Javascript' gadget from the menu. 

HTML/Javascript Gadget

Step 4: A window will open with two text boxes. One for title and another for pasting your HTML/Javascript code.

HTML/Javascript Gadget box

Now copy and paste all the code from your notepad or text editor in the 2nd text box as shown in the figure. Next is to make it floating in your blog.

Code:

<style>
.pos_left{
float: left;
position: fixed;
left: 10px;
top: 200px;
}
</style>

This above mentioned piece of code is called CSS or Cascading Style Sheet. It is responsible for the design of you web blog. Now, it is made so that our share button floats on the left side of the screen.

Merely adding the above will not make your bar float. You have tell when the style code to get activated.
Code:
<style>
.pos_left{
float: left;
position: fixed;
left: 10px;
top: 200px;
}
</style>
<div class='pos_left'>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count"></div>
</div>

The above sample code contains share button for twitter and facebook. If you wish to add more button for shares, you can place your code between div tags.

For novice users, you can simple copy and paste the code in HTML/Javascript Gadget box in your blogger layout.

Note: All share code is from official Twitter and Facebook web page. No editing has been done to the code except for the CSS and div tag additions.

If you like the post, please share to all your social media. And this tutorial need some knowledge of HTML, CSS and javascript. So not everybody can understand in a single go. So patience is your best friend. Trail and error might get your problems fixed. If you find any problem please report it in comment section.