You all who have blog or site are using social media icons to promote your information, page or website to social networking sites.In this article, I am going to share the ready to use solution with how you can create your own fast and beautiful social sharing button.To take the benefits and allow users to share your links in social networks is necessary. However, you need to sacrifice performance and seriously affect page loading time especially when the user is using the mobile or device which is also not desirable.
What is use of Social Sharing Buttons?
Social networking sites promotion is essential nowadays to get tremendous exposure to your content.
You want to get very easy way to set up social sharing buttons on your website. The first idea comes in mind is let’s use the plugin as it is a very easiest way to install and use. But let me clear you, sometimes plugin break your site or plugin use a javascript which might affect the speed of a website.To solve such problems, Here I come with the article which shows you how you can set up social sharing button without any plugin or any other file.
Bootstrap is the most popular framework and using it you can easily setup icons.Here, I have created the example to use the own social sharing buttons using pure CSS3 which is displayed when you click the button.These social sharing buttons uses the font awesome and bootstrap.And you just need to copy and paste the code, I will explain in the following line.
First create basic HTML structure, In this HTML code, I have to create the two buttons with some transition effect, You can change transition as per your requirement.HTML code is mainly the main div which contain share Button and other social media buttons. You can add more other social media icons/buttons if you require.
Remember, You need to replace the URL, title and media information as per your site details.
How To Create HTML code
Here is the HTML code.Let’s get start quickly with a basic structure and allows you to dive quickly into code.In this HTML code, you might need to replace URL with your specific desired one.Also, you can do some CSS changes as per your theme.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <button type="button" class="btn btn-success share-btn">Share</button> <div class="social top center networks-5 "> <a class="fbtn share facebook" href="https://www.facebook.com/sharer/sharer.php?u=url"><i class="fa fa-facebook"></i></a> <a class="fbtn share gplus" href="https://plus.google.com/share?url=url"><i class="fa fa-google-plus"></i></a> <a class="fbtn share twitter" href="https://twitter.com/intent/tweet?text=title&url=url&via=creativedevs"><i class="fa fa-twitter"></i></a> <!-- Pinterest Share Button --> <a class="fbtn share pinterest" href="http://pinterest.com/pin/create/button/?url=url&description=data&media=image"><i class="fa fa-pinterest"></i></a> <!-- LinkedIn Share Button --> <a class="fbtn share linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url=url&title=title&source=url/"><i class="fa fa-linkedin"></i></a> </div> </div> |
HTML is very simple and easily understandable. I have added button in the main div directly and create an another div within the main div for setting sharing icons.
Now, Let’s see the CSS code is relatively simple. Mostly you don’t need to make any change in CSS.
How to Add some CSS
Here is the CSS code used primarily set your sharing buttons. I have provided basic CSS code, but you can make changes as per your design.
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | .social .fbtn { width: 50px; display: inline-block; color: #fff; text-align: center; line-height: 18px; float: left; } .social .fa { padding: 15px 0px } .facebook { background-color: #3b5998; } .gplus { background-color: #dd4b39; } .twitter { background-color: #55acee; } .stumbleupon { background-color: #eb4924; } .pinterest { background-color: #cc2127; } .linkedin { background-color: #0077b5; } .buffer { background-color: #323b43; } .share-button.sharer { height: 20px; padding: 100px; } .share-button.sharer .social.active.top { transform: scale(1) translateY(-10px); } .share-button.sharer .social.active { opacity: 1; transition: all 0.4s ease 0s; visibility: visible; } .share-button.sharer .social.networks-5 {} .share-button.sharer .social.top { margin-top: -80px; transform-origin: 0 0 0; } .share-button.sharer .social { margin-left: -65px; opacity: 0; transition: all 0.4s ease 0s; visibility: hidden; } |
In CSS, I have added color code for social icons but if you don’t want to use, you can remove CSS. Also, you can use your icons or CSS. CSS code is applying the transition effect when sharing icons display especially you click on the share button. I have applied scale and translate effect, but you can use any CSS3 effect.
After adding CSS, you need to add JavaScript code which will give the effect to show and hide the buttons on click event. You can also change the event as per your requirement. I have used the jQuery code so Make sure you have added jQuery core files to work this code as expected.
How to add JavaScript
You can add Javascript code in the head section or footer section of your HTML.
1 2 3 4 5 6 7 8 9 10 11 | //custom button for homepage $( ".share-btn" ).click(function(e) { $('.networks-5').not($(this).next( ".networks-5" )).each(function(){ $(this).removeClass("active"); }); $(this).next( ".networks-5" ).toggleClass( "active" ); }); }); |
Above code is applying toggle effect on an active class so that class is compulsory. It is removing active class from each tag before applying toggle effect so this code will work if you are using multiple sharing buttons on one page without any conflicts.
By doing this, You will get the Sharing button very easily without any worries about site breaking.This approach emerges less code and more efficiency.You can see the demo on below code. Also, You can view working code on the homepage of a site.
The Final Output
Your turn now! I would love to hear more ideas and thoughts to improve or create social sharing buttons.Do share your creative ideas in the comment section.
