How To Add Social Follow Button In WordPress Website Without Plugin

4.6/5 - (27 votes)

This video is all about how to add social follow buttons to a WordPress website or you can say how to add social icons in a WordPress website without plugins.

HTML Code To Create social follow button

<div class="web-insights">
<p class="fttl">Follow Us</p>
<p class="ffttl">Stay updated via social media</p>
<ul>
<li><a href="#" target="_blank"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-paper-plane" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
</ul>
</div>

CSS Code to customize the social follow button


/* Webinsights Follow Buttons */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

.web-insights {
    text-align: center;
    display: table;
    border: 1px solid #ddd;
    padding: 10px 10px 5px;
    border-radius: 10px;
		width:100%;
	margin:0;
	
}

.web-insights .fttl {
    font-size: 18px;
    font-weight:600;
	letter-spacing: 1px;
	color:black;border-bottom: 1px solid #ddd;
	padding-bottom:12px;
}

.web-insights .ffttl {
   font-size: 16px;
   
	letter-spacing: 0.5px;
	color:black;border-bottom: 1px solid #ddd;
	padding-bottom:15px;
	margin-top:-15px;

}

.web-insights ul{
    padding: 0px;
    margin: 0px;
	margin-left:15px;
}
.web-insights li {
    float: left;
    list-style: none;
    font-size: 20px;
    text-align: center;
    margin-right:8px;
}
.web-insights li a i {
    background-color: #f1f1f1;
    color: #fff;
    border-radius: 100%;
    height: 40px;
    width: 40px;
    line-height: 43px !important;
}
.web-insights li a i:hover{
    opacity: 0.8;
}
.web-insights li a i.fa.fa-facebook {
    background-color: #3b5997;
}
.web-insights li a i.fa.fa-whatsapp {
    background-color: #25D366;
}
.web-insights li a i.fa.fa-instagram {
    background-color: #3e729a;
}
.web-insights li a i.fa.fa-paper-plane {
    background-color: #1DA1F2;
}
.web-insights li a i.fa.fa-youtube-play {
    background-color: #c42f2b;
}
.web-insights li a i.fa.fa-twitter {
    background-color: #57aced;
}
.web-insights li a i.fa.fa-pinterest-p {
    background-color: #cb2026;
}

/* End of Webinsights Follow Buttons */

Sharing Is Caring:

An aspiring MCA student formed an obsession with Blogging, SEO, Digital Marketing, and Helping Beginners To Build Amazing WordPress Websites.

1 thought on “How To Add Social Follow Button In WordPress Website Without Plugin”

  1. Hello, Sir, I Love Your Work. Please Muja app ki kuch help chaya thi. Muja app ke Social Icons jo Top Right sidebar mai hai uska Code chaya tha. or Search Box Jo Sidebar mai he hai uska be Code chaya tha. Please Sir Reply Zarror kerna. i,m Waiting for your Reply. and Thank youuuuu so much for Everything.

    Reply

Leave a Comment