How to Add Social Media Follow Button Plugin Free to a WordPress Website
Add Social Follow Button Without Plugin is essential when aiming to establish a community of visitors and boost follower numbers on social platforms, thereby enhancing overall brand authority. In this guide, you’ll discover how to incorporate social follow buttons without relying on plugins.
Follow as a Step by Step Guide
1. Access WordPress Dashboard:
Log in to your WordPress Dashboard.
2. Navigate to Customization:
Go to “Dashboard > Appearance > Customize.”
3. Locate Widgets Section:
Once on the customization page, find and click on “Widgets.”
4. Add Custom HTML Widget:
Under “Widgets,” select “Sidebar” and then click on “Add a Widget > Custom HTML.”
5. Insert HTML Code:
Paste the provided HTML code inside the Custom HTML widget. You can customize the links within the <#> tags with your own social media profiles.
<div class="raju-digitalservices"> <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> </ul> </div>
6. Apply Styling (CSS):
To style the elements, go back to the customization page.
Look for ‘Additional CSS’ at the bottom and click on it.
Copy and paste the provided CSS code inside the ‘Additional CSS’ section. This separates the styling from the HTML, making it more SEO-friendly.
/* Rajudigitalservices Follow Buttons */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
.raju-digitalservices {
text-align: center;
display: table;
border: 1px solid #ddd;
padding: 10px 10px 5px;
border-radius: 10px;
width:100%;
margin:0;
}
.raju-digitalservices .fttl {
font-size: 18px;
font-weight:600;
letter-spacing: 1px;
color:black;border-bottom: 1px solid #ddd;
padding-bottom:12px;
}
.raju-digitalservices .ffttl {
font-size: 16px;
letter-spacing: 0.5px;
color:black;border-bottom: 1px solid #ddd;
padding-bottom:15px;
margin-top:-15px;
}
.raju-digitalservices ul{
padding: 0px;
margin: 0px;
margin-left:15px;
}
.raju-digitalservices li {
float: left;
list-style: none;
font-size: 20px;
text-align: center;
margin-right:8px;
}
.raju-digitalservices li a i {
background-color: #f1f1f1;
color: #fff;
border-radius: 100%;
height: 40px;
width: 40px;
line-height: 43px !important;
}
.raju-digitalservices li a i:hover{
opacity: 0.8;
}
.raju-digitalservices li a i.fa.fa-facebook {
background-color: #3b5997;
}
.raju-digitalservices li a i.fa.fa-whatsapp {
background-color: #25D366;
}
.raju-digitalservices li a i.fa.fa-instagram {
background-color: #3e729a;
}
.raju-digitalservices li a i.fa.fa-paper-plane {
background-color: #1DA1F2;
}
.raju-digitalservices li a i.fa.fa-youtube-play {
background-color: #c42f2b;
}
.raju-digitalservices li a i.fa.fa-twitter {
background-color: #57aced;
}
.raju-digitalservices li a i.fa.fa-pinterest-p {
background-color: #cb2026;
}
/* End of Rajudigitalservices Follow Buttons *Thank you for your business! We look forward to working with you again.
7. Save Changes:
After inserting both HTML and CSS codes, remember to save the changes.
By following these step-by-step instructions, you can add social follow button without plugin
Conclusion for Add Social Follow Button Without Plugin
In conclusion, this tutorial provided a swift and clear guide on ‘Adding Social Follow Buttons Without Plugins.’ I trust that this article has proven beneficial for you. If you encounter any difficulties throughout the process, feel free to leave a comment below or reach out to us, and we’ll do our best to assist you.
By steering clear of external plugins, you can celebrate the fact that incorporating this feature won’t compromise your site speed. Add Social Follow Button Without Plugin, However, if you’re experiencing slow loading times, consider exploring Hostinger for discounted rates on top-notch shared hosting plans. Cheers to optimizing your site without unnecessary plugins!
For more WordPress Tutorials Subscribe to Raju Digital Services
And Also Read How to Speed Up WordPress Website
