Responsive Share Buttons CSS and jQuery
Today let’s create a cool looking responsive share buttons for your website contents, which will be adjusted 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, you can modify it to your heart content to fit your layout. And you don’t have to rely on bulky scripts that are loaded from anonymous servers, which could also slow down your page 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> elements, I have used <LI> list elements as shown below, the 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 different social sites as per your needs as shown below.
<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.
Share Button CSS
If you review CSS code below you will discover that I have placed share button on the left side of the page position: fixed, this way the buttons will stay fixed even if page is scrolled down or up. But if the screen size goes below 699 pixels it will have to change position and move it to the bottom, which can be done using Media Queries.
.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;
}Each list element is 32 pixel height/width, which will scale upto 38 pixel width on hover, and gets own background icon from image sprite I had created for this particular tutorial.
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 share buttons from left 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.
@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 media” websites have different share links, we need to find those links in order to share our content to that website. For example you can directly share a content to Facebook using link below :
https://www.facebook.com/sharer/sharer.php?u={Site URL}&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&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:
$(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) + '&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 the corresponding share page, along with our page title and 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!
