Do you want to add floating social sharing buttons in Kadence theme? If you are looking for a simple but efficient tutorial, keep reading this article!
Adding floating social sharing buttons to your Kadence Theme website is one of the easiest ways to increase visibility and reach on social media platforms.
These floating social share icons remain fixed on the screen as users scroll, making it easy for them to share your content instantly across various social networks. Besides improving user experience, they also boost social signals that help with online visibility.
Kadence makes it easy to style and position these social sharing buttons to fit your site design.
If you need to boost your reach on social media, keep reading this article. Here, we are going to show you how to add floating social sharing buttons in Kadence theme.
First, we will take a look at why adding a social sharing button to your Kadence theme is a good idea.
☲ Table of Contents
- Why Adding Social Sharing Buttons in Kadence Theme Is a Good Idea
- How to Add Floating Social Sharing Buttons in Kadence Theme
- Frequently Asked Questions
- Why should I use floating social sharing buttons in Kadence Theme?
- Do floating social share icons affect website speed?
- Can I display share counts with social sharing buttons?
- Where can social icons be placed in Kadence Theme?
- Are floating social sharing buttons mobile-friendly?
- Can I customize the design of my social sharing buttons?
- Do floating social share bars improve user experience?
- Conclusion
Adding Social sharing buttons in the Kadence theme is one of the easiest ways to grow your audience.
By placing social share icons directly on your posts, readers can quickly share content across different social media platforms and social networks.
Features like floating social sharing buttons or a social share bar ensure your content gets noticed and encourages ongoing interaction.
Now you know why adding a social media sharing button in Kadence is a good idea. In the next section, we will show you how to properly finish this task.
Here is how you can tweak the Kadence theme to add a floating social share button without using any plugins.
Step 1: Insert the PHP Code
The very first thing you need to do is add this code to your website. To add custom PHP snippets to the website, use a site-specific plugin like the Code Snippets (or use a child theme).
The code you need to be using is:
add_action('kadence_single_after_content', function() {
// Check if the page is a singular
if (is_singular()){
$technumeroURL = urlencode(get_the_permalink());
$technumeroTitle = urlencode(get_the_title());
$technumeroImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<!-- Floating Social Sharing Buttons HTML -->
<?php
}
});
We will be using the Code Snippets method for this. So, install and activate the plugin. Once you have done that, add a new snippet. You can give any name to the code. After that, paste the code we mentioned above.
Now, if you take a closer look at the code, you can see a line that says <!– Floating Social Sharing Buttons HTML –>. You will need to add the HTML code to display the sharing button there.
Now, we will need to paste this code in the place we mentioned below:
<div class="technumero-float-social-wrapper hide-on-mobile hide-on-tablet">
<a class="technumero-float-social-sharing technumero-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $technumeroURL; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg></a>
<a class="technumero-float-social-sharing technumero-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $technumeroTitle;?>&url=<?php echo $technumeroURL;?>&via=technumero" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a>
<a class="technumero-float-social-sharing technumero-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $technumeroURL; ?>&media=<?php echo $technumeroImage; ?>&description=<?php echo $technumeroTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg></a>
<a class="technumero-float-social-sharing technumero-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $technumeroURL; ?>&title=<?php echo $technumeroTitle; ?>&mini=true" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg></a>
<a class="technumero-float-social-sharing technumero-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $technumeroTitle; echo " "; echo $technumeroURL;?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg></a>
<a class="technumero-float-social-sharing technumero-social-reddit" href="https://reddit.com/submit?url=<?php echo $technumeroURL;?>&title=<?php echo $technumeroTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg></a>
</div>
After pasting the code, you can activate the snippet.
After activating the code, you need to add a little bit of CSS to style the floating bar.
Here is the code for that:
.technumero-float-social-wrapper {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 9999;
}
.technumero-float-social-sharing {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 30px;
font-size: 12px;
padding: 14px;
}
.technumero-social-facebook,
.technumero-social-twitter,
.technumero-social-pinterest,
.technumero-social-linkedin,
.technumero-social-whatsapp,
.technumero-social-reddit {
fill: #fff;
opacity: 1;
transition: opacity 0.3s ease;
}
.technumero-social-facebook {
background-color: rgba(59, 89, 152, 1);
}
.technumero-social-twitter {
background-color: rgba(29, 161, 242, 1);
}
.technumero-social-pinterest {
background-color: rgba(189, 8, 28, 1);
}
.technumero-social-linkedin {
background-color: rgba(0, 119, 181, 1);
}
.technumero-social-whatsapp {
background-color: rgba(37, 211, 102, 1);
}
.technumero-social-reddit {
background-color: rgba(255, 87, 0, 1);
}
.technumero-social-facebook svg:hover {
opacity: 0.8;
}
@media (max-width: 768px) {
.hide-on-tablet {
display: none;
}
}
@media (max-width: 480px) {
.hide-on-mobile {
display: none;
}
}
After adding the code to the Additional CSS section, your floating social share button will be live.
As you can see in the image, the floating social share button is working perfectly without any issues. You can publish the changes, and you are ready to move forward.
That’s it!
This is how you can add floating social sharing buttons in the Kadence theme. As you can see, the method is super simple, and you do not need to use any bulky social media sharing buttons on your website.
Frequently Asked Questions
Now, let’s take a look at some of the frequently asked questions regarding this topic.
Floating social share buttons make it easier for visitors to share content across popular social media platforms. This increases engagement, builds social signals, and drives more traffic from social networks.
When implemented properly with lightweight tools, floating social sharing icons have minimal impact. Optimized SVG icons, responsive design, and clean CSS style ensure smooth performance.
Yes, some plugins and setups allow showing share counts alongside social media icons. Displaying the total share count adds credibility and encourages more users to interact with your content.
Apart from floating bars or sidebars, you can add social links in the header social, footer social, or within content using the Social Icons block. This gives flexibility to place social sharing icons where they fit best.
Yes, most floating elements and floating action buttons adapt well to smaller screens. With proper preview settings and responsive design, buttons’ position and button size can be adjusted for mobile users.
Absolutely. You can modify button shape, add tooltip text, or even upload custom social network icons from your Media Library. Many users also align icons with their brand colors for consistency.
Yes, a well-placed floating sidebar or floating bar enhances user experience by keeping sharing options always accessible without distracting from the content.
Conclusion
Adding floating social sharing buttons in the Kadence Theme is a straightforward way to improve visibility across social media networks and social platforms.
From the WordPress dashboard, you can insert CSS code, manage custom icons, and adjust element settings to match your site’s branding.
You can display this foaling social share button on your pages, posts, archives, custom post types, or wherever you need. All you need to do is tweak the code accordingly.
Also, if you are not using the Code Snippets method, consider using a child theme for customization.
Plus, by using the Kadence Blocks or Kadence Blocks Pro, you can even take the customization to the next level.
What other things would you do to customize your website?
We recommend tweaking the navigation menu, displaying sticky promotional banners, a scroll to top, a reading bar, and so on.
Let us know in the comments.
