Adding Sharing Buttons

Adding Sharing Buttons

September 12, 2013 Web Design 0

While hand-coding another site, I wanted to add some share buttons for each blog post I wrote. I could have done this the easy way and used a service like AddToAny, AddThis, or ShareThis. All of these are great services, but I wanted complete control over the buttons and I wanted to learn how to do it from scratch. The share buttons above are the end result. Here is how I did it.

Creating the buttons was actually simple enough. Simply go to Twitter, Facebook, and LinkedIn and use their button generators to make the code snippets for you. If you want to share the link to the page where you placed the buttons, make sure that the URL to be shared is blank.

Once you have created the buttons to your liking, simply cut and paste the code snippets provided into a <div> in your HTML code. At this point everything should work and you are technically done! Your HTML should look something like this:

<div class="social-buttons">
   <p class="share-title">Share: </p>
   <!-- Facebook -->
   <div class="share">
      <span class="fb-like" data-width="450" data-layout="button_count" data-show-faces="false" data-send="false"></span> 
   </div>
   <!-- Twitter -->
   <div class="share">
      <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>
   <!-- LinkedIn -->
   <div class="share">
      <script src="//platform.linkedin.com/in.js" type="text/javascript">
         lang: en_US
      </script>
      <script type="IN/Share" data-counter="right"></script>
   </div>
</div>

The difficult part I found was styling the buttons. Because each button has its own built-in style, not all the buttons position themselves in the same way. As you can see in the following screenshot, the Twitter button has way more white space on the right than the other buttons do. Example of the uneven spacing of buttons

In order to fix this I noticed that the Twitter button was the widest at 115px. I assume this is to allow for a large share count number on the right. I decided that this should be the width of all the buttons to make them uniform. In order to do this I put each button into its own <div> and gave each one a width of 115px like this:

.share {
   position: relative;
   top: -2px;
   width: 115px;
   float: left;
   padding: 4px;
}

I then grouped all the buttons inside another <div> and styled that like so:

.social-buttons {
  clear: both;
  overflow: hidden;
}

In the end I ended up with something like this:

Share button spacing final result

Leave a Reply