How to create social media share buttons using HTML & JavaScript? (no external library)

Hello, I would like to add social media share buttons on a website without using any external javascript plugin, as I am already using external JS plugins which increases page-load time, so I want to create custom social media buttons using HTML,CSS and Javascript or jquery only (without external plugins) to decrease page load time.

Any code help or link will work

thanks

Asked by:- neena

: 9767 At:- 10/27/2017 6:34:42 AM

HTML javascript social media share buttons without External plugin

add comment to question

3 Answers

Answered by:- jaiprakash

Yes, it is good idea to create Social media buttons without any external plugin, it decreases page load time.

You can create it using below HTML/CSS/javascript

<div class=" ShareWrapper">
            
          <div class="Share">
            
              <a href="javascript:void(0)" class="ShareIcon" title="Share"><i class="fa fa-share social-button"></i></a>
              <a href="javascript:void(0)" onclick="twitter()" data-title="Title" data-tags="Tags" title="Share on Twitter" class="social-button twitter-button"> <i class="fa fa-twitter"></i></a>
              <a href="javascript:void(0)" title="Share on Facebook" onclick="share(0)" class="social-button facebook-button"> <i class="fa fa-facebook"></i></a>
              <a href="javascript:void(0)" title="Share on Google plus" onclick="share(1)" class="social-button googleplus-button"><i class="fa fa-google-plus"></i></a>
              <a href="javascript:void(0)" onclick="share(7)" class="social-button pinterest-button" title="Share on Pinterest"><i class="fa fa-pinterest"></i></a>
              <a href="javascript:void(0)" onclick="share(3)" class="social-button reddit-button" title="Share on Reddit">
                  <i class="fa fa-reddit-alien"></i>
              </a>

              <!-- StumbleUpon-->
              <a href="javascript:void(0)" onclick="share(5)" class="social-button stumbleupon-button" title="Share on Stumbleupon">
                  <i class="fa fa-stumbleupon"></i>
              </a>

              <a href="javascript:void(0)" onclick="share(4)" class="social-button facebook-button" title="Share on LinkedIn">
                  <i class="fa fa-linkedin"></i>
              </a>
         </div>
              </div>

CSS

ShareWrapper {
    position: absolute;
    bottom: 20%;
    background-color:white;
    z-index:20;
    left: -50px;
}
.Share {
    position: fixed;
    bottom: 150px
}
.ShareIcon {
    margin-left: 15px;
    vertical-align: middle;
    line-height: 30px;
}
.Share a{
    display:block;
}
.socialLinks ul{
    margin:0;
    padding:0
}
.socialLinks ul li{
    list-style-type:none;
}


a.social-button {
    
    width: 30px;
    height: 30px;
    border-radius: 15px;
    line-height: 30px;
    margin: 4px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #f0f0f0;
    overflow: hidden;
    padding: 0px;
}

    a.social-button:hover {
        text-decoration: none;
    }

    a.social-button.twitter-button {
        background-color: #4099ff;
    }

        /*a.social-button.twitter-button:before {
            content: 't';
        }*/

        a.social-button.twitter-button:hover {
            background-color: #303030;
        }

    a.social-button.facebook-button {
        background-color: #3b5998;
    }

     
        a.social-button.facebook-button:hover {
            background-color: #303030;
        }

    a.social-button.googleplus-button {
        background-color: #dd4b39;
    }


        a.social-button.googleplus-button:hover {
            background-color: #303030;
        }

    a.social-button.pinterest-button {
        background-color: #c8232c;
    }

      
        a.social-button.pinterest-button:hover {
            background-color: #303030;
        }

    a.social-button.email-button {
        background-color: #35c05f;
        font-size: 10px;
    }

     

        a.social-button.email-button:hover {
            background-color: #303030;
        }


    a.social-button.stumbleupon-button {
        background-color: #EB4823;
        font-size: 10px;
    }



        a.social-button.stumbleupon-button:hover {
            background-color: #EB4823;
        }

    a.social-button.reddit-button {
        background-color: #7ebbde;
        font-size: 10px;
    }



        a.social-button.reddit-button:hover {
            background-color: #7ebbde;
        }

Javascript

var wSize = "width=600,height=460",
    loc = encodeURIComponent(window.location.href),
    title = "share",
    // Sharer URLs
    fb = "https://www.facebook.com/sharer/sharer.php?u=", // 0. Facebook
    tw = "https://twitter.com/share?url=", // Twitter (separate function)
    gp = "https://plus.google.com/share?url=", // 1. Google+
    tb = "http://www.tumblr.com/share?v=3&u=", // 2. Tumblr
    rd = "http://reddit.com/submit?url=", // 3. Reddit
    li = "http://www.linkedin.com/shareArticle?mini=true&url=", // 4. LinkedIn
    su = "http://www.stumbleupon.com/submit?url=", // 5. StumbleUpon
    digg = "http://www.digg.com/submit?url=", // 6. Digg
    pt = "http://pinterest.com/pin/create/button/?url=", // 7. Pinterest
    // Twitter custom texts
    text = $(this).attr('data-title'),
    hashtag = "hashtags=" + $(this).attr('data-tags'),
    via = "via=qawithexperts",
    // URLs array
    url = [fb, gp, tb, rd, li, su, digg, pt];
function share(i) {
    "use strict";
    window.open(url[i] + loc, title, wSize);
}
function twitter() {
    "use strict";
    window.open(tw + loc + "&" + text + "&" + hashtag + "&" + via, title, wSize);
}

In the above javascript, we are simply opening a new tab, by clicking on any social media buttons & then appending the url of social media in the tab with Page title and URL

Here is the working fiddle, copy paste this code and try it in the browser to check javascript results, not sure why pop-up is not opening in fiddle, but this is tested code.

Note: do not forget to include font-awesome and jQuery(although it's a little jQuery you can change it to javascript also)

At:- 10/28/2017 9:06:53 AM Updated at:- 5/3/2018 11:49:13 AM

I tried to copy paste above code with instructions in my .html page and it works, good thing i don't need to add any external js, except jQuery, which i am already using :) 0

By : neena - at :- 11/1/2017 7:22:55 AM

Updated fiddle link which is more working https://jsfiddle.net/kprusy95/6/ 0

By : Vinnu - at :- 3/28/2018 1:10:39 PM

Thanks Vinnu for pointing the error, I have updated fiddle link in my answer 0

By : jaiprakash - at :- 5/3/2018 11:49:38 AM

comment to above answer

Answered by:- french

hi,

Thank you for the script,

I would like to outsource the javascript in a file.js and in another folder but in this case the social buttons do not work, could you help?

At:- 3/14/2018 8:48:51 PM

It should work even when the script file is external, in the above code provided by @jaiprakash, there is no dependency that JS code must be in same html file, there must be some conflicts or errors when you are placing the code in external js file, you can check about issue by right clicking your page and check console, it will be show errors of page load or on button click, or to help us better understand the issue please add your current source code, using a fiddle link or directly pasting the code in the comments. 0

By : vikas_jk - at :- 3/15/2018 6:47:48 AM

@french, check the fiddle link, It should work in your HTML even if javascript is external, as it is not compulsory to have JS on same HTML page 0

By : jaiprakash - at :- 5/3/2018 11:50:58 AM

comment to above answer

Answered by:- bhanu

Here is simple social media button without any external library, using plain HTML, CSS

<!-- 

replace items in {{ }}s with details specific to your content 

-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.min.css" integrity="sha512-FEQLazq9ecqLN5T6wWq26hCZf7kPqUbFC9vsHNbXMJtSZZWAcbJspT+/NEAQkBfFReZ8r9QlA9JHaAuo28MTJA==" crossorigin="anonymous" referrerpolicy="no-referrer" />



<div id="share">

  <!-- facebook -->
  <a class="facebook" href="https://www.facebook.com/share.php?u={{url}}&title={{title}}" target="blank"><i class="fa fa-facebook"></i></a>

  <!-- twitter -->
  <a class="twitter" href="https://twitter.com/intent/tweet?status={{title}}+{{url}}" target="blank"><i class="fa fa-twitter"></i></a>

  <!-- linkedin -->
  <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url={{url}}&title={{title}}&source={{source}}" target="blank"><i class="fa fa-linkedin"></i></a>
  
  <!-- pinterest -->
  <a class="pinterest" href="https://pinterest.com/pin/create/bookmarklet/?media={{media}}&url={{url}}&is_video=false&description={{title}}" target="blank"><i class="fa fa-pinterest-p"></i></a>
  
</div>

CSS

/* container */

#share {
	width: 100%;
  	margin: 100px auto;
  	text-align: center;
}

/* buttons */

#share a {
	width: 50px;
  	height: 50px;
  	display: inline-block;
  	margin: 8px;
  	border-radius: 50%;
  	font-size: 24px;
  	color: #fff;
	opacity: 0.75;
	transition: opacity 0.15s linear;
}

#share a:hover {
	opacity: 1;
}

/* icons */

#share i {
  	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
}

/* colors */

.facebook {
 	background: #3b5998;
}

.twitter {
  	background: #55acee;
}

.linkedin {
  	background: #0077b5;
}

.pinterest {
  	background: #cb2027;
}

Here is the Fiddle link https://jsfiddle.net/0jgrkt8p/

You can also review various examples of Social media icons with hover effects: Social media icons hover effect (CSS Based)

Hope it helps.

At:- 9/16/2021 8:27:07 AM Updated at:- 9/16/2021 8:28:02 AM