Welcome to ThemesGadget. In this post, we are going to learn How To Add Social Media Buttons Widget In Blogger and Wordpress too, just follow our steps carefully for avoiding any errors. but first, Let's talk about it a little.
Social media sites like LinkedIn, Facebook, and Twitter are great ways to connect with other professionals and businesses. However, it can be difficult to keep up with which social media sites your customers are using.
To make it easier for people to stay connected with you, you can add social media buttons to your blogger or wordpress website. This will allow them to follow your page or profile without having to navigate away from your site. Here is how to do it in 2 simple steps.
What Are Social Media Buttons Widget?
Social media buttons are visual widgets that allow your customers to connect with you on social media sites like LinkedIn, Facebook, and Twitter. Buttons are typically simple images(icons) that link to your social media accounts, but can also be small interactive components that allow users to share your content.
Why Is This Important?
It’s important to make it easy for people to follow you on social media. This will help you to keep up with what your customers want and make it easier for them to interact with your brand.
If you want to make it easier for people to connect to your social media profiles, then adding social media buttons on your website is the perfect way to do that. You can use social buttons to link to any social media page you want, like Facebook, LinkedIn, and Twitter.
Advantages of Adding Social Media Buttons
Adding social media widgets to your site is a great way to reach out to new customers. Your website will be able to engage with people who are interested in your products and services. Plus, it will be easier for people to stay connected with you.
The first step is to choose which social media you want to add. You can find a variety of different types of social media buttons on the web.
Next, you will need to create a code for the social media button you want to use. This code will allow your site to embed the button and track clicks and engagement on it.
Finally, you will need to add the code to your website. You can use widgets, which are pre-packaged, or scripts, which work with languages like HTML, and CSS, etc.
Adding social media buttons to your website is a simple and effective way to market yourself and stay connected with your customers. To learn how to do it in 2 easy steps, keep reading!
How To Add Social Media Buttons Widget?
To add social media widget to your blogger or wordpress site, you need to add HTML, CSS, and JavaScript codes. These codes have to be added in 2 steps. We will add HTML code in the 1st step and CSS In the last step.
Add this below Highlighted piece of code in your head section if you are in wordpress or making an HTML file, otherwise, copy and paste as it is.
Step 1 - Adding HTML for Social Media Buttons
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"/>
<div class="middle-socl">
<a class="btn-socl" href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a class="btn-socl" href="#">
<i class="fab fa-twitter"></i>
</a>
<a class="btn-socl" href="#">
<i class="fab fa-google"></i>
</a>
<a class="btn-socl" href="#">
<i class="fab fa-instagram"></i>
</a>
<a class="btn-socl" href="#">
<i class="fab fa-youtube"></i>
</a>
</div>
Step 2 - Adding CSS
These CSS Codes are formatted if you want to minify you can use our tool by Following this Link - CSS Minifier Tool
<style type="text/css">
.middle-socl {
width: 100%;
text-align: center;
}
.btn-socl {
display: inline-block;
width: 70px;
height: 70px;
background: #f1f1f1;
margin: 10px;
border-radius: 30%;
box-shadow: 0 5px 15px -5px #00000070;
color: #555eed;
overflow: hidden;
position: relative;
}
.btn-socl i {
line-height: 73px;
font-size: 26px;
transition: 0.2s linear;
}
.btn-socl:hover i {
transform: scale(1.3);
color: #f1f1f1;
}
.btn-socl::before {
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #555eed;
transform: rotate(45deg);
left: -110%;
top: 90%;
}
.btn-socl:hover::before {
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}
@keyframes aaa {
0% {
left: -110%;
top: 90%;
}
50% {
left: 10%;
top: -30%;
}
100% {
top: -10%;
left: -10%;
}
}
</style>
Conclusion
The social media widget is a great way to show off your social media channels to your customers. It's also a way to make it easier for them to stay connected with you. If you haven't already, it's time to start adding social media buttons to your website!
This post covered how to add social media buttons to your website in just 2 steps. Now, you have all the information you need to easily add the social media widget to your website.
