Simple jQuery and html script to share your content on Social networks. Social sharing buttons are necessary to make it easy for visitors to share your content on professional networks like Facebook, Google, Twitter, linkedin, tumbler etc. In this tutorial you can see how to share your page content on social sites without redirect to that page. This example open a popup on same page to share your page.

As web developers, we have to be weary of the slow down that sharing buttons bring. Every button that you include in your page loads its own set of scripts and stylesheets which make your pages slower to load. So if you don't want to make your page loading speed down, Add html and a simple jQuery to share your page on social network. Now let see how to make it working.

Demo

First you need to add hyper links where you want to share

  
  <!-- Facebook -->
  <a class="nohover" href="http://www.facebook.com/sharer.php?u=http://hkpatel201.blogspot.com" target="_blank">
     <img alt="Facebook" src="/images/developersarea-facebook-share.png" />
  </a>

  <!-- Google+ -->
  <a class="nohover" href="https://plus.google.com/share?url=http://hkpatel201.blogspot.com" target="_blank">
     <img alt="Google" src="/images/developersarea-share-google.png" />
  </a>

  <!-- LinkedIn -->
  <a class="nohover" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://hkpatel201.blogspot.com" target="_blank">
     <img alt="LinkedIn" src="/images/developersarea-share-linkedin.png" />
  </a>

  <!-- Twitter -->
  <a class="nohover" href="https://twitter.com/share?url=http://hkpatel201.blogspot.com&amp;text=Developersarea%20Share%20Buttons&amp;hashtags=developersareasharebuttons" target="_blank">
     <img alt="Twitter" src="/images/developersarea-share-twitter.png" />
  </a>

Now it's time to add jQuery

<script type="text/javascript">
     jQuery(document).ready(function($) {
           jQuery('#share-buttons a').on('click', function(){
               var width  = 575,
               height = 520,
               left = (jQuery(window).width()  - width)  / 2,
               top = (jQuery(window).height() - height) / 2,
               opts = 'status=1' +
                    ',width='  + width  +
                    ',height=' + height +
                    ',top='    + top    +
                    ',left='   + left;
               newwindow=window.open($(this).attr('href'),'',opts);
               if (window.focus) {newwindow.focus()}
                  return false;
            });
       });
 </script>