How To add social follow buttons to a WordPress website

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.

Within the chosen template file, find the appropriate location to add the social follow button code. You can use the HTML <a> tag to create a link and the <img> tag to display the social media icon. For example, to add a Twitter , Youtube , Facebook , instagram follow button:

Table of Contents

HTML Code

<img src="https://laners.org/wp-content/uploads/2023/05/services-banner1.png" class="myimg" alt=""> 
<p> <a href="#" target="_blank" class="social yt"> YouTube</a> </p> 
<p> <a href="#" target="_blank" class="social fb"> Facebook</a> </p> 
<p> <a href="#" target="_blank" class="social insta"> Insta</a> </p>

CSS Code

.myimg{
        max-width: 100%; 
        margin-bottom:30px; 
      } 
.social{
         background-color: #10b98e; 
         padding: 10px; color:white; 
         text-decoration: none;
         display: block; border-radius: 30px;
         text-align: center; font-size: 16px; 
        } 
.social:hover{  
        box-shadow: 1px 1px 8px #888888; 
        color:white; 
        }
 .social.fb{
        background-color:#4267B2;
        margin-top: -10px;
          } 
.social.yt{  
        background-color:#c4302b;
        margin-top: -10px; 
          } 
.social.insta{
         background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); 
         4margin-top: -10px; 
}

LANERS's covers the latest developments and innovations in technology that can be leveraged to build rewarding careers. You'll find career guides, tech tutorials and industry news to keep yourself updated with the fast-changing world of tech and business.

Leave a Comment