Adding Floating Social Share Buttons To Your Blog Posts With Elementor

Change Custom Width Of Floating Bar
A great way to boost engagement is to have people share your content and to get more eyeballs at your beautifully composed content.
A floating social media share bar can help your readers to make the decision of sharing the content they like and drive more readers to your website.
Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Table of Contents
    Add a header to begin generating the table of contents

    Floating Buttons in Blog Posts without Coding

    Just recently I had a friend tell me that she wanted some floating share buttons for her website. The company who has been creating her website and is managing it for her as well was however telling her it would involve a few hours of work which they would invoice her for.

    For many websites I build, I am using the Elementor Page Builder, which makes it very easy to add floating buttons to your WordPress pages, blog posts, or archive pages.

    I will be demonstrating how to add floating buttons in all of your blog posts at once with the Elementor Theme Builder.
    The best part, you need no coding, HTML or CSS capabilities to get this done!

    Why You Want To Use Social Share Buttons On Your Content Pages?

    Whether you are blogging regularly or occasionally, write full-time or use content for as a marketing strategy for your business, you are most likely putting a lot of effort into writing excellent copy.

    Either about helpful or inspiring topics. In online marketing terms, we call this sharable content. And that really is what great copy does; it makes people want to share it with their peers to also help them out. And yet, many websites don’t make it easy for their audience to share content.
    On mobile, it takes a bunch of clicks to copy a URL, which sets up unnecessary roadblocks on the way to a successful share. And that is where social share buttons can make a huge difference. The easier it is to share great content, the more it is going to be shared.
    Floating share buttons make it extremely easy as your readers don’t even need to scroll to the top or bottom of the content piece to share it.

    Social Proof Matters

    Some people like to have social share buttons also display a counter for how many shares a certain post has. If you are not a big news site that has tons of readers and tons of shares, I will urge you not to put a share count alongside your social share buttons. That said, it can act as social proof for viable content, but so do search rankings.

    No Social Share Plugin Needed

    In the world of WordPress websites, many plugins fight for more installs. And so, there is a plugin for everything. Something to consider, though, that every single plugin brings in extra code to be loaded, sometimes poorly optimized, or they might be a potential security risk as they have to get regular patches to close unwanted security holes.
    All that should make you think twice if you want to use plugins for such simple tasks as to add social media share buttons to your pages.

    Adding Social Share Buttons To A Page Template for Blog Posts Or Custom Post Types

    Elementor Pro has something called the theme builder. It is used, for example, to create one custom layout for all of your blog posts. Historically, such stylings are implemented via a WordPress theme, hence the name Theme Builder.
    To add the floating buttons, we will enhance an already existing page template for the blog posts and ad the floating buttons into the central layout.

    Add The Elementor Social Buttons To Your Page or Page Template

    Elementor, even the free version, comes with a native element called “Social Buttons”. We will be using this element to create our floating bar.
    To add an element to a template, just click-drag the Social Buttons element to the WYSIWYG Editor. It can be added pretty much anywhere as we will position it later on.
    HAGER MEDIA elementor-social-buttons-1024x563 Adding Floating Social Share Buttons To Your Blog Posts With Elementor How To's  Wordpress Elementor

    Add Your preferred Social Networks

    In the second step, you can add all the destinations you want people to share your content to. Here it is important to not overcrowd your social share bar, but at the same time, choose the right platforms your readers might be on.
    HAGER MEDIA add-social-networks-to-share-to-1024x562 Adding Floating Social Share Buttons To Your Blog Posts With Elementor How To's  Wordpress Elementor

    Make it a Floating Share Bar

    For an element to “float”, we have to position it outside of the content. The CSS value that does this is called “Position: Fixed”.

    We then can position it to be a few pixels from the left side (to your liking) and position it vertically at around 50% VH (view height). This will put the element at this screen position, no matter where they will be scrolling. And that’s what makes the social share bar float over the page.
    HAGER MEDIA position-fixed-1024x786 Adding Floating Social Share Buttons To Your Blog Posts With Elementor How To's  Wordpress Elementor

    Styling The Social Share Buttons

    Out of the box, the social share buttons come with the dedicated colors of each destination. Elementor also puts the icons of all the destinations they let you choose from, which is super handy.

    To make the element more align with your brand and your website, we can customize the buttons to fit in properly.
    In the styling tab on the left side, you can change all sorts of values, colors, button- or icon size to your liking.

    Dedicated social icons of the most common social media sites are natively supported with the Elementor widget we are using.

    HAGER MEDIA style-social-media-share-bar-1024x666 Adding Floating Social Share Buttons To Your Blog Posts With Elementor How To's  Wordpress Elementor

    Change The Width Of The Social Share Bar

    As you can see, the element now stretches all over the page. That’s not what we want.

    Generally, the buttons align next to each other. By giving it a fixed width value, we can decide when the elements break their lines to arrange underneath each other. So, if we make the element width in the positioning settings just slightly larger than what the elements are, they will always arrange as a vertically aligned bar.

    HAGER MEDIA change-custom-width-of-floating-bar-1024x551 Adding Floating Social Share Buttons To Your Blog Posts With Elementor How To's  Wordpress Elementor

    Publish changes

    Finally, once you are satisfied with your social share buttons, you can update your existing Elementor template, or, if you are creating a new one, you can first set display conditions to determine when and where this template gets hooked into or is going to be applied. In most cases, this is going to be all singles or all posts.

    After saving, you can jump onto the frontend of your website and check out how the styling applies to the actual website.

    But also, it does not hurt to occasionally ask your users to share your content.

    Leave a Reply
    Sign up for our Newsletter
    Scroll to Top
    Get A FREE Site Audit Of Your Domain!
    Which industry does your company do business in
    Please describe your area of responsibility
    Have you previously had a site audit conducted by another company?
    Which goals are you aiming to achieve with your website over the next six months?
    HAGER MEDIA needs the contact information you provide to us to contact you about our products and services. You may unsubscribe from these communications at any time. For information on how to unsubscribe, as well as our privacy practices and commitment to protecting your privacy, please review our Privacy Policy.