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.
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. 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.
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.
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.
CSS3 has special feature called Media Queries, it helps us detect the user screen size, because no one knows for sure, what users might be holding these days to browse your website! Smart phones, tablets or regular laptops. Using Media Queries we can have that little information, like width and height, and we can use them to actually rearrange HTML output to fit different user’s 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.
It’s time to add functionality to our CSS for smaller screen sizes with the Media Queries. The goal is to move those share buttons from left fixed position to bottom of the screen when width is changed, and hopefully have that little share icons aligned to the center, no matter how smaller screen size gets.
We will be using jQuery to achieve two things, first is to get that slide effect when user mouse hovers on share icon, and second is to construct share URLs, which will pop open where users can share the content on different social media websites.
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 work only when the screen size is more than 699 pixel.
Share Link Construction
Different social network websites have different share links, which we can use to share the URL content of our website. For example you can directly share your link to Facebook using link below :
Similarly, The Twitter, Digg, Google have different share links.
Now we can simply open the window and redirect user to share page, along with our website URL.
Here’s how our jQuery code looks, once we put everything together :
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, the best solution is to create our own set of share buttons that match our website layout. I just hope we could also customize the Facebook like and Google 1+ buttons the way we want. Good luck!
Saran Chamling. (He loves the web technology, and enjoys designing, exploring and writing about it @saaraan.com).