How To Add Social Follow Button In WordPress Website Without Plugin

4.5/5 - (49 votes)

This article 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.

13 thoughts 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
  2. Sir, when I added your html code and css in generate press theme.
    It is not showing any icons in my site
    Can you help me please

    Reply
  3. I created a website with a GeneratePress theme to look like you…
    Check my website to see if there are any problems infotechbot dotcom

    Reply

Leave a Comment

Limited Time Offer
10% Discount on WP rocket
10
days
10
hours
10
minutes
10
seconds
Hurry! The Offer Will Expire In
Limited Time Offer
10% Discount on Rank math Pro
10
days
10
hours
10
minutes
10
seconds
Hurry! The Offer Will Expire In
Copy This Code And Click On Claim Now
Increase Your Website Speed With Cloud Hosting (Limited Time Deal)
10
days
10
hours
10
minutes
10
seconds
Increase Your Website Speed With Cloud Hosting
10
days
10
hours
10
minutes
10
seconds