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 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.
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.
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.
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.
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 :
Similarly site like Twitter, Digg, Google have their own share links serving the same purpose.
Now we can simply open the window and redirect user to share page, along with our website URL.
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!