Responsive Share Buttons CSS and jQuery

Today let’s create a cool looking responsive share buttons for your website contents, which will adjust according to the users’ screen size. If you are not satisfied with your current share buttons, you can try this solution. Advantage of creating own set of share buttons is that, it goes well with your layout, and you don’t have to rely on bulky files that are loaded from anonymous servers, which could also slow down the page loading time significantly.

Responsive share buttons

HTML

First lets start with HTML code, which can be placed anywhere within the body tag of your HTML page. Instead of using <DIV> element all the way, I have used <LI> list elements as shown below, because I feel list <LI> are much easier to work with. The HTML below is the initial structure of elements for our new share buttons, you can add or remove the <LI> for different social sites as per your needs.

1
2
3
4
5
6
7
8
9
<ul class="share-btn-wrp">
    <li class="facebook button-wrap">Facebook</li> <!-- Facebook -->
    <li class="twitter button-wrap">Tweet</li> <!-- Twitter -->
    <li class="digg button-wrap">Digg it</li> <!-- Digg -->
    <li class="stumbleupon button-wrap">Stumbleupon</li> <!-- Sumbleupon -->
    <li class="delicious button-wrap">Delicious</li> <!-- Delicious -->
    <li class="gplus button-wrap">Google Share</li> <!-- Google Plus -->
    <li class="email button-wrap">Email</li> <!-- Email -->
</ul>

For responsive layout, you should include viewport meta tag within head section of your HTML document. This meta tag is used to set initial viewport scale on mobile devices. It tells mobile devices to fit the page layout as-is, so we can define different CSS rules for different media types with Media Queries.

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Share Button CSS

If you review CSS code below you will discover that I have placed share button on the left of the page with fixed position, this way it will stay on fixed same position even if page content is scrolled down to the bottom. But once the browser is resized below 699 pixels, it will change position and move down, that is because we are using Media Queries for smaller screen such as smart phones, tablets. Each list element is 32 pixel height/width, which will scale to 38 pixel width on hover, and gets own background icon from image sprite I had created for this particular tutorial.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.share-btn-wrp {
    list-style: none;
    display: block;
    margin: 0px;
    padding: 0px;
    width: 32px;
    left: 0px;
    position: fixed;
}
.share-btn-wrp .button-wrap{
    text-indent:-100000px;
    width:32px;
    height: 32px;
    cursor:pointer;
    transition: width 0.1s ease-in-out;
}
.share-btn-wrp > .facebook{
    background: url(images/share-icons.png) no-repeat -42px 0px;
}
.share-btn-wrp > .facebook:hover{
    background: url(images/share-icons.png) no-repeat -4px -0px;
    width:38px;
}
.share-btn-wrp > .twitter{
    background: url(images/share-icons.png) no-repeat -42px -34px;
}
.share-btn-wrp > .twitter:hover{
    background: url(images/share-icons.png) no-repeat -4px -34px;
    width:38px;
}

Media Queries

As discussed above, it’s time to add more functionality to our CSS for smaller screen sizes with the Media Queries. When screen size goes below certain pixel, our goal is to move those share buttons from left fixed position to bottom of the screen, and hopefully have that little share icons aligned perfectly to the center no matter how smaller screen size gets. I advice you play a bit with your CSS to get it just right.

1
2
3
4
5
6
7
8
9
10
11
12
13
@media all and (max-width: 699px) {
    .share-btn-wrp{
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 1px;
    }
    .share-btn-wrp .button-wrap {
        display: inline-block;
        margin-left: -2px;
        margin-right: -2px;
    }
}

Share Link Construction

Different social network websites have different share links, which we can use to share the content of any of these social website. For example you can directly share a content to Facebook using link below :

1
https://www.facebook.com/sharer/sharer.php?u={Site URL}&amp;title={Page Title}

Similarly site like Twitter, Digg, Google have their own share links serving the same purpose.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Google+:
https://plus.google.com/share?url={URL}

Twitter:
http://twitter.com/home?status={Page Title}+{Site URL}

Digg:
http://www.digg.com/submit?phase=2&amp;url={Site URL}

StumbleUpon:
http://www.stumbleupon.com/submit?url={Site URL}

Delicious:
http://del.icio.us/post?url={Site URL}

Reddit:
http://www.reddit.com/submit?url={Site URL}

Technorati:
http://technorati.com/faves?add={Site URL}

jQuery

Now you know how we can share our content on these social websites, all we need to do now is write some JavaScript code to pop open these links in different window and share our content. Have a look at jQuery code below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(document).ready(function(){
    var pageTitle   = document.title; //HTML page title
    var pageUrl     = location.href; //Location of this page
   
    $('.share-btn-wrp li').click(function(event){
        var shareName = $(this).attr('class').split(' ')[0]; //get the first class name of clicked element
        switch(shareName) //switch to different links based on different social name
        {
            case 'facebook':
                OpenShareUrl('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(pageUrl) + '&amp;title=' + encodeURIComponent(pageTitle));
                break;
            case 'twitter':
                OpenShareUrl('http://twitter.com/home?status=' + encodeURIComponent(pageTitle + ' ' + pageUrl));
                break;
            case 'email':
                OpenShareUrl('mailto:?subject=' + pageTitle + '&body=Found this useful link for you : ' + pageUrl);
                break;
        }
       
    });
       
    function OpenShareUrl(openLink){
        //Parameters for the Popup window
        winWidth    = 650;
        winHeight   = 450;
        winLeft     = ($(window).width()  - winWidth)  / 2,
        winTop      = ($(window).height() - winHeight) / 2,
        winOptions   = 'width='  + winWidth  + ',height=' + winHeight + ',top='    + winTop    + ',left='   + winLeft;
        window.open(openLink,'Share This Link',winOptions); //open Popup window to share website.
        return false;
    }
});

Now we can simply open the window and redirect user to share page, along with our website URL.

Conclusion

Share buttons are the important part of your website, they help promote websites on various social networks and generate fans/followers. But every website is different and some of us are vary particular about the look and feel, if you are not satisfied with your current share buttons, the best solution is to create your own to match your website layout. This tutorial is just an idea, but I hope this will help you create even better share buttons, good luck!

Download Demo

41 Comments Add Comment

  • simple and nise sharing button. tnx.

     Reply
  • it’s great share, thanks :) now i think i don’t need bootstrap again :D

     Reply
  • قالب وردپرس

    thanks its useful

     Reply
  • قالب وردپرس

    It is very useful tnx .

     Reply
  • I tried but it isn’t working proper way. What exactly i want top of the page it can be show like same as demo. so please where i changes exactly.

     Reply
  • Yosshh, finally see also article I was looking .. thanks :D

     Reply
  • how about add whatsapp share button?

     Reply
  • nice share i’m looking for this share.. as we know “responsive” is very important thing in our site.. thanks..

     Reply
  • This code was really helpful for me. thanks!!

     Reply
  • قالب وردپرس

    tnx very god

     Reply
  • I added this widget on Communication Skills but it is not working on mobile chrome please can you help?

     Reply
  • قالب وردپرس

    Great this worked first time THANKS

     Reply
  • Thanks are very beautiful and practical

     Reply
  • Hi!
    I have your code working beautifully but wanted to ask you about how to finesse it for different language sites. I have different language translations in different folders on the site. They all call a single copy of your code which then always references the index.html in the root, rather than the index.html in the same directory that called your JavaScript. If there’s a way of modifying the JS to reference the tags in the calling page then the Social text that gets forwarded could be in the language of the calling page. Does that make sense? How can that be achieved please? Thank you!

     Reply
  • Hi There,
    Really good tutorial and share buttons Thank You!!
    I have 1 problem though. The Email button doesn’t seem to be working. In Firefox it opens a new minimized window with nothing in it and in IE nothing happens.
    I’ve noticed the same thing on the example page as well.
    Please could you advise how i can get this fixed?
    Thanks and Regards
    Toshi

     Reply
    • you can change it to something like this:

      1
       <li class="email button-wrap"><a href="#" onClick="alert('Click Ok to write your Email!')";>Email</a></li>
  • Thanks for this great tool, you can see a result on a full responsive site compatible with all devices
    at http://clipclic.lu

     Reply
  • Hi, Im using the drupal module version of this.
    I wanted to know how can I get the share buttons to not show up on each page.
    I want to have the ability to select or enable/disable which page I would like the share buttons to displayed.
    My immediate need is to only have the share buttons displayed on story pages for drupal 7.
    Some code example would be helpful.
    Thanks!

     Reply
  • Hi. how can I add anshare to email icon in this module?

     Reply
  • It was really helpful to me…Great code, thanks!!

     Reply
  • Thanks I was looking for since long time http://www.pcuserspanama.com

     Reply
  • Hi there. Great buttons. I would like to use them on my blog (blogger) and was wondering if there is any way to share the current post rather than simply the whole blog?

     Reply
  • Great job. Just one quirk for me.
    I found this did not work in IE9:

    1
    window.open(openLink, 'Share This Link', winOptions);

    but this did

    1
    window.open(openLink, 'Share', winOptions);

    Thanks to Gunaseelan and others for the right side mod – works great..

     Reply
  • Hi, this is a great tutorial i placed them on my website, two things:

    1 email button does not work any idea why?
    2 any idea how to share on Linkedin?

    Thanks a lot!

     Reply
    • For LinkedIn, add the following to the JS file:

      1
      2
      3
      case 'linkedin':
        var openLink = 'http://www.linkedin.com/shareArticle?mini=true&amp;url=' + encodeURIComponent(pageUrl) + '&amp;title=' + encodeURIComponent(pageTitle);
        break;

      and the following to the HTML:

      1
      <a href="#" rel="nofollow">LinkedIn</a>
  • Hi Saran Chamling, Thank you very much for this one.

    Currently the social sidebar is showing in Left side.

    How I can fix it in Right side with middle of the page.?

    #share-wrapper {
    position: absolute;
    right: 0;
    }

    I have replace left:0 with right:0 to bring it right side.

    How to proceed further. Looking forward to your solution.

     Reply
  • Animation should stop() when multiple mouseOver, mouseOut

     Reply
  • Hi Saran, very nice tutorial thanks for giving me raw file. i have used this your responsive share buttons looking very nice…

     Reply
  • Was curious about adding buttons to the front, but used more for navigation purposes. For instance the first would be a button that takes them back to the home page (index.html) in the main window without utilizing a pop-up. Any insight would be greatly appreciated. Functionality as described is amazing though. Thank you so much for this. Website is still in dev, but I will definitely leave a link here once it is completed. Also, this page will be linked in the credits section as well. Many thanks!

     Reply
  • Can you please help me in aligning it to right hand side of the screen. What all changes i need to make. Please help

     Reply
    • I also had the same issue. I have managed to solve this issue. The following things needs to be changed in order to make it in to right side.

      $(‘#share-wrapper li’).hover(function() {
      var hoverEl = $(this); //get element

      //browsers with width > 699 get button slide effect
      if($(window).width() > 699) {
      if (hoverEl.hasClass(‘visible’)){
      hoverEl.animate({“margin-left”:”117px”}, “fast”).removeClass(‘visible’);
      } else {
      hoverEl.animate({“margin-left”:”0px”}, “fast”).addClass(‘visible’);
      }
      }
      });

      In CSS, We need to make the following changes

      #share-wrapper {
      margin-top: 100px;
      position:fixed;
      right: 0;
      z-index:1;
      }
      #share-wrapper li.button-wrap {
      background: #E4EFF0;
      padding: 0px 0px 0px 0px;
      display: block;
      width: 150px;
      margin: 0px -117px 1px 0px;
      }
      #share-wrapper li.button-wrap > a {
      padding-left: 40px;
      height: 32px;
      display: block;
      line-height: 32px;
      font-weight: bold;
      color: #444;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      }
      At last, We have to change
      Change Background image position from right to left like the following for each social icon image
      #share-wrapper .facebook > a{
      background: url(buttons/facebook.jpg) no-repeat left;
      }

      This changes make it perfect to right side as we want. Hope this may help others

  • Great code, thanks. I still have a problem though. I’m using this code for a widget in iBooks. If I open the widget, the buttons are shown. If, say, I then click the FB button I get the FB dialog. So far, so good, and if I post, there is no problem. But there is a problem when I cancel. The FB dialogue takes me to my FB page, and I cannot get out of it, back to the buttons.
    When I close the widget, and reopen it, I’m still on the FB page. The only way to go back to the buttons is to close the iBook and reopen it.
    Would there be another solution?

     Reply
  • Great this worked first time THANKS
    I did tweak it a little, before the ‘.animate’ if you add ‘.stop(true)’
    it will stop the animation from going spazy when you hover over them fast try it and you will see what I mean :)

     Reply
  • Hi again. I’ve successfully installed the buttons on my website. The problem was the virtual path vs the true path to the js file. Changed that and it’s sorted. See here: http://www.jamiefurlongphotography.com

    Great bit of coding, love it, thanks.

     Reply
  • Hi the problem I have is that I can not make it show always in front, for example when you scroll the page a slide cover that I have installed the buttons when they are deployed, and the same happens with a small gallery that I have as well.

     Reply
  • I tried but it’s not working proper way. What exactly i want top of the page it can be show like same as demo. so please where i changes exactly.

    Thanks in advance.

     Reply
  • Excellent coding, but i want share buttons are top of the page.

    Thanks inadvance

     Reply
  • This is just brilliant. Unfortunately I can’t get the slide-out effect to work or the pop-up, even with all plugins disabled. I wondered if you were planning to make this into a WordPress plugin?

     Reply