PHP JavaScript

how to create social media share buttons

Ankit

In this post we learn how to create social media share buttons with the help of font awesome icons , bootstrap and CSS and learn how to deploy it for any website.


so before start this tutorial we should take an small overview about fontawesome and learn the implementation process of icons.

we are living in the era of digital. we have a lots of digital platform like facebook, twitter, instagram, linkedin, whatsapp, google plus and many more.

Today most of the business and companies are holding their social account. so they can reach to their customers or client base via sharing some important and relatable contents according to their niche, and sharing all the offers and information over there.

most of the developers are uses small images of social media platform or uses favicons of also .fontawesome and glyphicons are the two third party icon providers which have a good library of favicons and easy to implement.

If we want to share this article with different type of social media platforms so this article with reach more readers than i use this .

In the below code we will learn how to add share button to website. so just copy the code and paste it to your website.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" rel="stylesheet">
<!-- Include the above in your HEAD tag -->
<div class="container-fluid" id="cont">
	<div class="row">
		<div class="col-sm-12">
		    <div class="middle">
                <a class="btn2" href="http://www.facebook.com/sharer.php?u=<?=$site_url?>">
                    <i class="fab fa-facebook-f"></i>
                </a>

                <a class="btn2" href="https://twitter.com/share?url=<?=$site_url?>&amp;text=Simple%20Share%20Buttons&amp;hashtags=shortlearner">
                    <i class="fab fa-twitter"></i>
                </a>
<a class="btn2" href="https://plus.google.com/share?url=<?=$site_url?>">
                    <i class="fab fa-google"></i>
                </a>

<a href="whatsapp://send?text=The text to share!" data-action="share/whatsapp/share"> <i class="fab fa-whatsapp"></i></a>

  </div>
		</div>
	</div>
</div>

now we are adding some CSS to creating our button responsive and attractive. just copy the below CSS part and paste it in the head section of your html code.

#cont {
    background-color: #002147;
    padding: 100px;
}

.middle {
    text-align: center;
}
.btn2 {
	display: inline-block;
	width: 50px;
	height: 50px;
	background: #f1f1f1;
	margin: 10px;
	border-radius: 30%;
	box-shadow: 0 5px 15px -5px #ecf0f1;
	color: #3498db;
	overflow: hidden;
	position: relative;
}

a.btn2:hover {
	transform: scale(1.3);
	color: #f1f1f1;
}

.btn2 i {
	line-height: 50px;
	font-size: 20px;
	transition: 0.2s linear;
}

.btn2:hover i {
	transform: scale(1.3);
	color: #f1f1f1;
}

.fa-facebook-f {
    color: #3c5a99;
}

.fa-twitter {
    color: #1da1f2;
}
.fa-google {
    color: #dd4b39;
}


.btn2::before {
	content: "";
	position: absolute;
	width: 120%;
	height: 120%;
	background: #3498db;
	transform: rotate(45deg);
	left: -110%;
	top: 90%;
}

.btn2:hover::before {
	animation: aaa 0.7s 1;
	top: -10%;
	left: -10%;
}

@keyframes aaa {
	0% {
		left: -110%;
		top: 90%;
	}
	50% {
		left: 10%;
		top: -30%;
	}
	100% {
		left: -10%;
		top: -10%;
	}
}

this is the customization of social network sharing buttons. if you are trying to add on WordPress website than there are some best plugins that will help you.

WordPress to Buffer
Simple Social Icons
Social Icons Widget by WPZoom
WordPress Social Login
Revive Old Posts
AddtoAny

hope this article will helps you. please share this article with all your developer buddies and help them.