How to create social media button into your website?
Posted By: Kanika Gupta Published: 14, Jan 2024
Table of Contents
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!!!