How To Add Social Follow Button In WordPress Website Without Plugin

4.7/5 - (74 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 */


One Request?

I worked hard on this post to help the blogging community. It would help me a lot if you consider sharing it on social media networks. Because Sharing Is Caring.. ♥️

Sharing Is Caring...
Avatar of ANAND

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

18 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
  4. Bhai
    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

Leave a Comment