Responsive Share Buttons

Mar 11, 2014 in Social & RSS 4152 views

Download

Overview
Documents

User Rating: 0/5 ( 0 votes)

Your Rating:

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.

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 understand and to work with in situations like this. The HTML below is the initial structure of elements for our new share buttons, you can add or remove the links as per your requirements.

<div id="share-wrapper">
    <ul class="share-inner-wrp">
        <!-- Facebook -->
        <li class="facebook button-wrap"><a href="#">Facebook</a></li>
        
        <!-- Twitter -->
        <li class="twitter button-wrap"><a href="#">Tweet</a></li>
        
         <!-- Digg -->
        <li class="digg button-wrap"><a href="#">Digg it</a></li>
        
        <!-- Stumbleupon -->
        <li class="stumbleupon button-wrap"><a href="#">Stumbleupon</a></li>
      
         <!-- Delicious -->
        <li class="delicious button-wrap"><a href="#">Delicious</a></li>
        
        <!-- Google -->
        <li class="google button-wrap"><a href="#">Plus Share</a></li>
    </ul>
</div>

It’s time to include Viewport meta tag within the head of your HTML page, this meta tag is used for responsive design to set the viewport initial-scale and width on mobile devices and allowing you to manipulate the page layout to fit user’ screen.

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

Main CSS

Let’s style our HTML blocks using the CSS, the main CSS is intended for large screens (desktop PC, laptops), and for smaller screen (smart phones, tablets) we will be writing different CSS with Media Queries. As you can see in code below, the social icons are placed as background image for the links within the list elements, and then we set the font size, color and font family for the share links. Few social icons I have used here are from simpleicons.org, you can go to their website and download if needed more.

/* outer wrapper, fixed to left */
#share-wrapper {
    margin-top: 100px;
    position:fixed;
    left: 0;
}

/* inner wrapper */
#share-wrapper ul.share-inner-wrp{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

/* the list */
#share-wrapper li.button-wrap {
    background: #E4EFF0;
    padding: 0px 0px 0px 10px;
    display: block;
    width: 140px;
    margin: 0px 0px 1px -117px;
}

/* share link */
#share-wrapper li.button-wrap > a {
    padding-right: 60px;
    height: 32px;
    display: block;
    line-height: 32px;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

Media Queries

These days no one knows for sure, what users might be holding to browse your website, smart phones, tablets or regular laptops, to deal with this circumstances, CSS3 has a special feature called Media Queries, it simply helps us detect user screen size. Using Media Queries we can have that vital information like screen width and height of the device, so we can rearrange our HTML output accordingly. In other words Media Queries lets us build responsive layouts which will fit perfectly in any screen.

Take a look at the example below, we can have alternate section of CSS3 (Media Queries) right below our regular CSS syntax, when screen size gets smaller it will overwrite the styles rules we set earlier for desktop browsers.

/* regular css */
.class a{
    font-size:20px;
}

/* change font-size of class if screen size goes below 700px */
@media all and (max-width: 699px) { 
    .class a{
        font-size:13px;
    }
}

It’s time to add functionality to our CSS for smaller screen sizes with the Media Queries. When the width changes, 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 suggest you play a bit with your CSS using tools like Chrome Developer tool to get it right.

@media all and (max-width: 699px) {
#share-wrapper {
    bottom: 0;
    position: fixed;
    padding: 5px 5px 0px 5px;
    background: #EBEBEB;
    width: 100%;
    margin: 0px;
    -webkit-box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 -1px 4px rgba(0,0,0,0.15);
    -o-box-shadow: 0 -1px 4px rgba(0,0,0,0.15);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}
#share-wrapper ul.share-inner-wrp {
    list-style: none;
    margin: 0px auto;
    padding: 0px;
    text-align: center;
    overflow: auto;
}
#share-wrapper li.button-wrap {
    display: inline-block;
    width: 32px!important;
    margin: 0px;
    padding: 0px;
    margin-left:0px!important;
}
#share-wrapper li.button-wrap > a {
    height: 32px;
    display: inline-block;
    text-indent: -10000px;
    width: 32px;
    padding-right: 0;
    float: left;
}
}

jQuery

We will be using jQuery to achieve two things here, first is to get that slide effect on mouse hover, and second is to construct share URLs, on click it should pop open a share window, where users will share the content on different social media websites.

Slide Effect

As you can see in code below, the slide effect is achieved using jQuery animate()method, it activates when user hovers the mouse on the element. But we can’t have slide effect on smaller screens, as it moves to bottom of the page. Therefore, we compare the width and make it slide only when the screen size is more than 699 pixel.

//user hovers on the share button   
$('#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');
        }
    }
});

Share Link Construction

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

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.

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}

JavaScript Switch

When user clicks on a share button of his choice, we need to pop open the share page of that particular social site, where our content will be shared. To deal with these kinds of situation where we need to perform actions based on different condition, Javascript Switch is an ideal choice. Look at the syntax below :

var pageTitle = document.title; //HTML page title
var pageUrl = location.href; //Location of the page

$('.button-wrap').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':
          var openLink = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(pageUrl) + '&amp;title=' + encodeURIComponent(pageTitle);
          break;

          case 'twitter':
          var openLink = 'http://twitter.com/home?status=' + encodeURIComponent(pageTitle + ' ' + pageUrl);
          break;
        }
});

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

window.open(openLink);

Here’s how our jQuery code looks, once we put everything together :

$(document).ready(function() {
    var pageTitle = document.title; //HTML page title
    var pageUrl = location.href; //Location of the page

    //user hovers on the share button   
    $('#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');
            }
        }
    });
        
    //user clicks on a share button
    $('.button-wrap').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':
                    var openLink = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(pageUrl) + '&amp;title=' + encodeURIComponent(pageTitle);
                    break;
                case 'twitter':
                    var openLink = 'http://twitter.com/home?status=' + encodeURIComponent(pageTitle + ' ' + pageUrl);
                    break;
                case 'digg':
                    var openLink = 'http://www.digg.com/submit?phase=2&amp;url=' + encodeURIComponent(pageUrl) + '&amp;title=' + encodeURIComponent(pageTitle);
                    break;
                case 'stumbleupon':
                    var openLink = 'http://www.stumbleupon.com/submit?url=' + encodeURIComponent(pageUrl) + '&amp;title=' + encodeURIComponent(pageTitle);
                    break;
                case 'delicious':
                    var openLink = 'http://del.icio.us/post?url=' + encodeURIComponent(pageUrl) + '&amp;title=' + encodeURIComponent(pageTitle);
                    break;
                case 'google':
                    var openLink = 'https://plus.google.com/share?url=' + encodeURIComponent(pageUrl) + '&amp;title=' + encodeURIComponent(pageTitle);
                    break;
                case 'email':
                    var openLink = 'mailto:?subject=' + pageTitle + '&body=Found this useful link for you : ' + pageUrl;
                    break;
            }
        
        //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;
        
        //open Popup window and redirect user to share website.
        window.open(openLink,'Share This Link',winOptions);
        return false;
    });
});

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!

JS Tutorial