Add Custom Share Buttons to Blogger OR any website

Hello World,

In this post, I will be explaining on how to get those cool share buttons, which you see on the left of the screen. So straightaway here is my Javascript cum HTML for the same which is reusable without any tweak.

<script type="text/javascript">
 document.body.onload = getShareLink
 function getShareLink() {
  var url = window.location.href   
  document.getElementById("twi-tter").href = ["https://twitter.com/home?status=", encodeURIComponent(url)].join("")
  document.getElementById("face-book").href = ["https://www.facebook.com/sharer/sharer.php?u=", encodeURIComponent(url)].join("")
  document.getElementById("google-plus").href = ["https://plus.google.com/share?url=", encodeURIComponent(url)].join("")
  document.getElementById("linked-in").href = ["https://www.linkedin.com/shareArticle?mini=true&summary=&source=&url=", encodeURIComponent(url)].join("")
  document.getElementById("p-interest").href = ["https://pinterest.com/pin/create/button/?media=&description=&url=", encodeURIComponent(url)].join("")
 }
</script>
<div id= "shareButtonsContainer">
 <a style="text-decoration:none;" id="twi-tter" href="#" target="_blank">
  <img  style="display:inline; height:40px; width:40px" src="http://cdn2.hubspot.net/hub/53/file-954863050-png/00-MARKETING-OFFERS-hide-from-search/social-icons-01.png" alt="Share on Twitter" />
 </a>
 <a style="text-decoration:none;" id="face-book" href="#" target="_blank">
  <img style="display:inline; height:40px; width:40px" src="http://cdn2.hubspot.net/hub/53/file-953681786-png/social-icons-02-1.png" alt="social-icons-02-1" />
 </a>
 <a style="text-decoration:none;" id="google-plus" href="#" target="_blank">
  <img style="display:inline; height:40px; width:40px" src="http://cdn2.hubspot.net/hub/53/file-951108319-png/social-icons-05.png" alt="social-icons-05" />
 </a>
 <a style="text-decoration:none;" id="linked-in" href="#" target="_blank">
  <img style="display:inline; height:40px; width:40px" src="http://cdn2.hubspot.net/hub/53/file-951108339-png/social-icons-03-1.png" alt="social-icons-03-1" />
 </a>
 <a style="text-decoration:none;" id="p-interest" href="#" target="_blank">
  <img style="display:inline; height:40px; width:40px" src="http://cdn2.hubspot.net/hub/53/file-951108354-png/social-icons-04.png" alt="social-icons-04" />
 </a> 
</div>      
 

For blogger implementation, follow these steps :-
1. Go to Layout tab in the bloggers' Dashboard.
2. Click "Add a widget" on the right side bar. An extra window will open.
3. Select the HTML/Javascript widget. A text editor will show up.
4. Give a suitable title like "Share this Page".
5. Copy the above code and paste it into the big text area placed after the title Input box.
6. Click on Save Button and you are done.

In blogger, you can control the placement of the widgt, up down. But when you are implementing this code in a webpage other than blogger, you may have to do some extra CSS to place it where you want.

A little note on Javascript and how things are working in the HTML code :-
As you can see, I have added a bit of javascript in the script tag. It gets triggered just after the body loads during browser loads of the whole page. The getShareLink function is just amending the href attributes of the 5 <a> tags in the #shareButtonsContainer div, according to the current url of the webpage and each social media button. I have used www.sharelinkgenerator.com to generate the links.

Customizing Share button Icons :-
As you can see in the <img> tags, I am sourcing the image from some other website. You can pass you own url there. If you want to host your images on the google drive then here is a trick to make a permalink for the images in the Google Drive. Here are the steps :-
1. Upload an Image on Google drive.
2. Share it with Public and with viewing rights.
3. You will get a Url which would look like this.
https://drive.google.com/file/d/0BztaImknhgDFeXNQa1NnNWktQ1E/view?usp=sharing
4. The bold part in the above url is the ID. Copy that ID and use it to make a URL look like this:-
https://drive.google.com/uc?id=0BztaImknhgDFeXNQa1NnNWktQ1E
You can use this url as the src attribute of <img> tag for your Google Drive Images.
5. For resizing the images, you can change the height and width css attributes in the <img> tags. Currently its 40 X 40.

That is it for making you own share buttons. If you have any comments and suggestions, please comment below.

Thanks