How to create custom Social Share Links with Html,Css,Jquery

Today in this post i will teach you about the method to create custom share links button in your website. Creating floating share button is super easy with HTML and CSS. You can use the same method to your website and make it more dynamic and attractive.

custom social share links html css jquery
Custom Social Share Links


I have shared the most useful coding tutorial in the previous post you can check them all. Floating share buttons helps you to increase the user engagement in your website. Not only that users will share your links in other social media which can help you to get the good results. Overall, Social share links are very precious and everyone are requested to use it the websites.

# Fixed centered social share link on CLICK


First of all, learn how to create the centered social share link with jquery on onclick the button. This can be the by following way have a look.

Step 1 : First of all, you need is HTML code and the code is in the block below. See the copy the codes from block down.

  
<div class="float-overlay"></div>
<div class="float-social">
<div class="float-social-link float-social-color float-social-text">
<a href="" class="fb"></a>
<a href="" class="tw"></a>
<a href="" class="rd"></a>
<a href="" class="lk"></a>
<a href="" class="pt"></a>
<a href="" class="in"></a>
<a href="" class="wa"></a>
<a href="" class="flb"></a>
</div>
<div id="design-credit"/>
</div>
</div></div>
  
 


Step 2 : Now, we need to style the HTML code and you can style it using the following CSS styles. Look on the block down.

 
/** CSS STYLES **/
/* MAKING FLOAT SOCIAL VISIBILITY HIDDEN AND OPACITY :0 AND TOGGLE IT USING JQUERY WITH BUTTON CLICK **/
display:inline-block;background:#fff;border-radius:10px;box-shadow:0 2px 6px 2px rgba(0,0,0,0.5);width:auto;padding:20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);z-index:11;visibility:hidden;opacity:0;transition:0.8s ease;margin:0 auto;}
.float-social-link{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
.float-social-link a{display:flex;justify-content:center;align-items:center;width:34px;height:34px;text-decoration:none;color:#d7ccc8;font-size:20px;font-family:'Font Awesome 5 Brands';font-style:normal;font-weight:400;margin:10px 6px;flex-wrap:wrap;box-shadow:0 1px 4px 1px rgba(0,0,0,0.7);border-radius:4px;}
/* hover effect */
.float-social-link a:hover{background:#000;transition:0.8s ease;}
/* color effect background */
.float-social-link .fb{background:#3b5999;}
.float-social-link .fb:before{content:"\f09a";}
.float-social-link .tw{background:#00acee;}
.float-social-link .tw:before{content:"\f099";}
.float-social-link .rd{background:#ff4500;}
.float-social-link .rd:before{content:"\f1a1";}
.float-social-link .lk{background:#0077b5;}
.float-social-link .lk:before{content:"\f0e1";}
.float-social-link .pt{background:#ca2127;}
.float-social-link .pt:before{content:"\f0d2";}
.float-social-link .wa{background:#3fbb50;}
.float-social-link .wa:before{content:"\f232";}
.float-social-link .in{background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4);}
.float-social-link .in:before{content:"\f16d";}
.float-social-link .flb{background:#f52828;}
.float-social-link .flb:before{content:"\f44d";}
 




Step 3 : Adding media query to the social share links for set the width in small screen , look here.

 
/** MEDIA QUERY **/
@media screen and (max-width:768px){.float-social{width:70%;box-sizing:border-box;}}
 


Step 4 : Now , add the following Css code for overlay and design credit here is the way to do that.

 
/** Credit Design **/
#design-credit{text-align:center;color:#000;font-size:12px;font-weight:400;font-style:italic;}
#design-credit a{text-decoration:none;text-align:center;color:#000;}
/*overlay*/
.float-overlay{position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:10;left:0;top:0;visibility:hidden;opacity:0;transition:0.8s;}

/** ONclick Toggle **/

.toggle-float .float-social{opacity:1;visibility:visible;}
.toggle-float .float-overlay{opacity:1;visibility:visible;}
 


Step 5 : Print the credit name inside the credit design div and here is the code for do that with jQuery.


 
//Print credit name in the Id (Design-credit)
$("#design-credit").html("<center><span style='color:#000;font-style:italic;'>Designed :</span> <a href='https://buddhalimbu.com.np'>Buddha</a></center>");
 


Step 6 : Now, Create the button to toggle the Social share link with onclick.

 

<button class="share-me">Share me <span class="fa fa-share-alt"></span></button>
 


Step 7 : Now, the last step to toggle the Float social with onclick on button with jquery,here is the way how it can be used.

 
//Jquery toggle
//Toggle on button
//Toggle on overlay click
$('.share-me')['on']('click', function() {
$('body')['toggleClass']('toggle-float');
});
$('.float-overlay')['on']('click', function() {
$('body')['toggleClass']('toggle-float');
 });
 


This is how to create the social share links with html and css, if you did the same your item look like this following demo. Click on the demo to view it.



This only work on button onclick, If you did not click on the button it won't work , AS well as you can create the social share link in the fixed position to right or left site of the your website here is way how you can do to, small tutorial on that.

#Left float fixed social share link

We are going to create social share link in the left float then add the following code to your HTML.

Step 1 : Add the following code to your html and save it.

 

<div class="left-float left-float-color">
<a href="" class="fb"></a>
<a href="" class="tw"></a>
<a href="" class="rd"></a>
<a href="" class="lk"></a>
<a href="" class="pt"></a>
<a href="" class="in"></a>
<a href="" class="wa"></a>
<a href="" class="flb"></a>
</div>
 


Step 2 : Style your HTML with the following CSS Style and save it. This will let you float your HTML.

 
/* float left fixed */
.left-float{position:fixed;top:50%;left:0;background:#000;padding:1px;height:auto;transform:translate(-0,-50%);display:flex;justify-content:center;align-content:center;align-items:center;flex-direction:column;}
.left-float a{display:flex;justify-content:center;align-items:center;width:40px;height:40px;text-decoration:none;color:#d7ccc8;font-size:20px;font-family:'Font Awesome 5 Brands';font-style:normal;font-weight:400;margin:1px 0
/* hover */
.left-float a:hover{background:#000;transition:0.8s ease;}
/* background color */

.left-float .fb{background:#3b5999;}
.left-float .fb:before{content:"\f09a";}
.left-float .tw{background:#00acee;}
.left-float .tw:before{content:"\f099";}
.left-float .rd{background:#ff4500;}
.left-float .rd:before{content:"\f1a1";}
.left-float .lk{background:#0077b5;}
.left-float .lk:before{content:"\f0e1";}
.left-float .pt{background:#ca2127;}
.left-float .pt:before{content:"\f0d2";}
.left-float .wa{background:#3fbb50;}
.left-float .wa:before{content:"\f232";}
.left-float .in{background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4);}
.left-float .in:before{content:"\f16d";}
.left-float .flb{background:#f52828;}
.left-float .flb:before{content:"\f44d";}
 


This is all how you can do it in right way with ease, If you like to set the position of the item to bottom , you can add the following Media Query with CSS.

 
/** MEDIA QUERY **/
@media screen and (max-width:620px){.left-float{justify-content:space-between;align-content:none;align-items:center;flex-direction:row;position:fixed;top:inherit!important;left:0;bottom:0!important;width:100%;box-sizing:border-box;margin:0;}.left-float a{width:100%;max-width:12.4%;}}
 


If you didnot add the the fontawesome script in the <head> section of your HTML, Your icon won't work as well as you must have used the jQuery script in the <head> section, add the following jQuery and FontAwesome script.


# Fontawesome Link tag

This is fontawesome link tag you must use in the your HTML <head>.

 

<link href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' rel='stylesheet'/> 

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
 


# jQuery Link tag

This is jQuery link tag you must use in the your HTML <head>.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 


Well, this is all and you are completely created your Social Share Links with ease, Here you leant to make your own custom social share links and hope you liked it , if any issue send contact.

Post a comment

0 Comments