Home
Blogging
Button

How to Add floating social share buttons in Blogger and WordPress websites?

In the world of blogging, sharing your content is essential to reach a wider audience. One effective way to encourage readers to share your posts is by adding floating social share buttons to your Blogger or WordPress website. These buttons stay visible as visitors scroll down the page, making it convenient for them to share your content with just a click. In this article, we'll explore simple ways to add floating social share buttons using HTML code for both Blogger and WordPress platforms.

For Blogger:

Blogger is a user-friendly platform, and adding floating social share buttons is a breeze. Here's a step-by-step guide:

  • Go to your Blogger Dashboard : Log in to your Blogger account and access the dashboard.
  • Navigate to the Theme section :In the left sidebar, click on "Theme.
  • Edit HTML :Find and click on the "Edit HTML" button. Be sure to back up your current theme before making any changes.
  • Insert HTML Code :Look for the closing </head> tag in your HTML code.
    Just above it, paste the following HTML code:
HTML 
<style>
.floating-share-buttons {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    z-index: 999;
}
</style>
This code creates a style for the floating share buttons, positioning them on the right side of the screen.Now, paste the following code just above the closing </body> tag:
HTML 
<div class="floating-share-buttons">
    <a href="https://facebook.com" target="_blank"><img src="facebook-icon.png" alt="Facebook"></a>
    <a href="https://twitter.com" target="_blank"><img src="twitter-icon.png" alt="Twitter"></a>
    <a href="https://instagram.com" target="_blank"><img src="instagram-icon.png" alt="Instagram"></a>
</div>

Replace the placeholder URLs with the actual links to your social media profiles and customize the image sources accordingly.
  • Save Changes:Click on the "Save theme" button to apply the changes.

Now, when you visit your Blogger website, you should see floating social share buttons on the right side of the screen.

For WordPress:

WordPress offers various plugins that make adding floating social share buttons a breeze. One popular plugin for this purpose is "Easy Social Share Buttons." Here's how to use it:

  1. Install and Activate the Plugin:In your WordPress dashboard, go to "Plugins" > "Add New."
  2. Search for "Easy Social Share Buttons" and install the plugin.
  3. Activate the plugin once installation is complete.
  4. Configure the Plugin:After activation, go to "Easy Social Share Buttons" in your dashboard.
  5. Follow the setup wizard to configure the plugin settings. Customize the appearance, choose the social networks you want to display, and set the positioning as "Floating Sidebar."
  6. Save Changes:Once you've configured the settings, save the changes.
Now, your WordPress website should display floating social share buttons as visitors scroll down your posts.

Adding floating social share buttons enhances user experience and encourages readers to share your content effortlessly. Whether you're using Blogger or WordPress, these simple steps allow you to incorporate this valuable feature into your website, promoting greater visibility and engagement for your blog.

Post a Comment