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
    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.
      Elementor Social Buttons

      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.
      Add Social Networks To Share To

      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.
      Position Fixed

      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.

      Style Social Media Share Bar

      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.

      Change Custom Width Of Floating Bar

      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.