How to create social media button into your website?

Posted By: Kanika Gupta Published: 14, Jan 2024

How to create social media button into your website?

Table of Contents
  1. 1. HTML FILE
  2. 2. CSS FILE
  3. 3. JAVASCRIPT FILE
Show More


Here is a blog to help you all in implementing responsive social sharing buttons on your websites or blogs as direct links. they will automatically make a short post containing your webpage/blog link to be shared on the social websites without any efforts.
So, let’s just dive into it!

We will start with creating a basic HTML page and adding the social media icons on our webpage.

HTML FILE

<!DOCTYPE HTML>
<HTML lang="en">
  <HEAD>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <TITLE>webpage sharing</TITLE>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  </HEAD>
  <BODY>
    <div class="container">		        //facebook
      <a href="#" class="facebook-btn">
        <i class="fab fa-facebook"></i>
      </a>
      <a href="#" class="twitter-btn">		//twitter
        <i class="fab fa-twitter"></i>
      </a>
      <a href="#" class="pinterest-btn">	//pinterest
        <i class="fab fa-pinterest"></i>
      </a>
      <a href="#" class="linkedin-btn">		//linkedin
        <i class="fab fa-linkedin"></i>
      </a>
      <a href="#" class="whatsapp-btn">	        //whatsapp
        <i class="fab fa-whatsapp"></i>
      </a>
    </div>
    <div class="content">
      <h1>Sharing webpage on social handles</h1>
      <p>
        Lets have a look!!
      </p>
      <img class="pinterest-img" src="page.png" alt="" ></img>
    </div>
    <script src="main.js"></script>
  </BODY>
</HTML>

Then we add some styling to our webpage.

CSS FILE

.content {
  padding: 8px 90px;
  font-family: sans-serif;
}
.content img {
  max-height: 500px;
}
.container {
  background: black;
  display: flex;
  flex-direction: column;
  padding: 16px;
  position: fixed;
}
.container a i {
  font-size: 32px;
}
.container a {
  margin: 12px 0;
  transition: 500ms;
}
.container a:hover {
  transform: scale(1.2);
}
.container .fa-facebook {
  color: #3b5998;
}
.container .fa-twitter {
  color: #1da1f2;
}
.container .fa-linkedin {
  color: #0077b5;
}
.container .fa-pinterest {
  color: #bd081c;
}
.container .fa-whatsapp {
  color: #25d366;
}

@media (max-width: 750px) {
  .content {
    padding: 8px 32px;
  }
  .container {
    left: 0;
    bottom: 0;
    width: 100%;
    flex-direction: row;
    padding: 16px 0;
    justify-content: center;
  }
  .container a {
    margin: 0 32px;
  }
}

Lastly, we add a JavaScript file to complete the functioning of our social icons.

JAVASCRIPT FILE

const facebookBtn = document.querySelector(".facebook-btn");
const twitterBtn = document.querySelector(".twitter-btn");
const pinterestBtn = document.querySelector(".pinterest-btn");
const linkedinBtn = document.querySelector(".linkedin-btn");
const whatsappBtn = document.querySelector(".whatsapp-btn");

function init() {
  const pinterestImg = document.querySelector(".pinterest-img");
  let postUrl = encodeURI(document.location.href);
  let postTitle = encodeURI("Guys, do check this out: ");
  let postImg = encodeURI(pinterestImg.src);

  facebookBtn.setAttribute(
"href",
    `https://www.facebook.com/sharer/sharer.php?u=${postUrl}`
  );
  twitterBtn.setAttribute(
    "href",
    `https://twitter.com/share?url=${postUrl}&text=${postTitle}`
  );
  pinterestBtn.setAttribute(
    "href",
`https://pinterest.com/pin/create/bookmarklet/?media=${postImg}&url=${postUrl}&description=${postTitle}`
  );
  linkedinBtn.setAttribute(
    "href",
    `https://www.linkedin.com/shareArticle?url=${postUrl}&title=${postTitle}`
  );
  whatsappBtn.setAttribute(
    "href",
    `https://wa.me/?text=${postTitle} ${postUrl}`
  );
}

init();

And that’s how easily we are able to add social media icons as webpage shareable links in our websites or blogs!!!

Categories


Recent Blog