Social media, a big part of our daily lives online, can be a powerful tool for website owners and creators like you! Sharing your content on these platforms lets you reach more people, connect better with your audience, and bring more visitors to your website. This guide will take you on a journey into the world of social media sharing. We’ll look into various methods of incorporating “share buttons” onto your website, utilizing tools such as custom PHP, JavaScript, and CSS. Whether you’re a pro website owner looking to improve your sharing strategy or just starting out and want to learn the basics. This guide offers straightforward tips and tricks to help you make the most of social media sharing and enhance your visibility online.

Why it is important?

Nowadays, having buttons on your website that allow people to share your content on social media is really important. This is because social media is an excellent way to increase the visibility of your content. By including buttons for popular platforms like Facebook and Twitter on your website, visitors can effortlessly share what they enjoy with their friends and followers. This means more people will see your website and what you have to offer! This guide will explain how to do this, even if you’re new to building websites.

What is new on our Floating Social Media Share Buttons?

The Floating Social Media Share Bar offers an interactive method to enhance user engagement and increase content visibility on websites. Its main features include a floating design that stays with website content, customizable icon placement for smooth integration, and responsive design for optimal display on different devices. The share bar supports popular social media platforms like Facebook, Twitter, LinkedIn, Pinterest, and Telegram, facilitating easy content sharing. Users can share website content with a single click, streamlining the sharing process and encouraging interaction. Overall, the Floating Social Media Share Bar offers an intuitive and visually appealing solution for enhancing brand visibility and driving user engagement through social media sharing.

Features of our Floating Social Media Share Bar?

The Floating Social Media Share Bar offers several key features to enhance user engagement and content visibility on websites:

• Dynamic Floating Design: The share bar dynamically floats alongside website content, ensuring easy access to social sharing options as users scroll through the page.
• Customizable Icon Placement: Website owners can customize the positioning of social media icons to suit their design preferences, allowing for seamless integration with existing layouts.
• Responsive Design: The share bar adapts to different screen sizes and devices, ensuring a consistent user experience across desktops, tablets, and mobile devices.
• Multi-Platform Support: It provides share buttons for popular social media platforms such as Facebook, Twitter, Instagram, LinkedIn, Pinterest, Telegram, and more, enabling users to share content across various networks.
• Click-to-Share Functionality: Users can easily share website content with a single click, streamlining the sharing process and encouraging greater user engagement.

Overall, the Floating Social Media Share Bar offers a user-friendly and visually appealing solution for promoting social sharing and maximizing content visibility on websites.

Read also, How to add sticky Social Media bar in WordPress Websites / What is meta tags and how to add on WordPress Websites / Automatic Table of Contents in WordPress Website without plugin

Here we are using PHP, CSS and JavaScript to create a our dynamic Social Media Share Buttons. Here we go…….!!

First Steps, Adding Custom PHP Coding

1. Log in to your WordPress dashboard.
2. Navigate to “Appearance” > ” Theme File Editor”.
3. In the Theme File Editor, single.php for post-specific functionality. If you want to show Social Media Share Buttons every ware in your website open functions.php .
4. Copy the given PHP code and past on single.php or if you want to show Social Media Share Buttons every ware of you website past code in functions.php.

<?php
// Start the loop.
while ( have_posts() ) : the_post();

    // Include the post content template.
    get_template_part( 'template-parts/content', get_post_type() );

    
    ?>

    <!-- Social Media Share Icons -->
    <div class="social-media-share-bar">
        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" class="social-media-share-icon" data-share="facebook"><i class="fab fa-facebook-f"></i></a>
    	<a href="https://www.pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink()); ?>&media=<?php echo urlencode(get_the_post_thumbnail_url()); ?>&description=<?php echo urlencode(get_the_title()); ?>" class="social-media-share-icon" data-share="pinterest" target="_blank"><i class="fab fa-pinterest"></i> </a>


        <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>" class="social-media-share-icon" data-share="twitter"><i class="fab fa-twitter"></i></a>
        <a href="https://www.linkedin.com/shareArticle?url=<?php echo urlencode(get_permalink()); ?>" class="social-media-share-icon" data-share="linkedin"><i class="fab fa-linkedin-in"></i></a>
        <a href="https://telegram.me/share/url?url=<?php echo urlencode(get_permalink()); ?>" class="social-media-share-icon" data-share="telegram"><i class="fab fa-telegram-plane"></i></a>
    </div>

    <?php
    // End of the loop.
endwhile; // End of the loop.
?>

5. Past the code here is a sample where you have to past code. I am placing this code on single.php because I want to show Social Media Share Buttonst only on post.

6. After placing the code click on update.

Here, We done first step of adding Social Media Share Buttons on WordPress website let’s do second steps.

Second Steps, Adding Custom CSS Coding

1. From the WordPress dashboard, go to “Appearance” > “Customize”.
2. In the Customizer, look for the “Additional CSS” option.
3. Copy the given CSS code.

.social-media-share-bar {
    position: fixed;
    left: 20px; /* Adjust as needed for the middle left positioning */
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column; /* Display icons vertically */
}

.social-media-share-icon {
    display: inline-block;
    margin-bottom: 10px; /* Add space between icons */
    font-size: 18px; /* Adjust the font size as needed */
    color: #333; /* Default color */
    text-decoration: none;
    transition: transform 0.2s ease, font-size 0.2s ease; /* Add transition for both transform and font-size */
}

/* Facebook icon */
.social-media-share-icon[data-share="facebook"] {
    color: #3b5998; /* Facebook brand color */
}

/* Twitter icon */
.social-media-share-icon[data-share="twitter"] {
    color: #1DA1F2; /* Twitter brand color */
}

/* LinkedIn icon */
.social-media-share-icon[data-share="linkedin"] {
    color: #0077B5; /* LinkedIn brand color */
}

/* Pinterest icon */
.social-media-share-icon[data-share="pinterest"] {
    color: #E60023; /* Pinterest brand color */
}

/* Telegram icon */
.social-media-share-icon[data-share="telegram"] {
    color: #0088cc; /* Telegram brand color */
}

/* Add more styles for other social media icons as needed */


.social-media-share-icon:hover {
    transform: scale(1.1); /* Increase size on hover */
    font-size: 28px; /* Increase font size on hover */
}
@media (max-width: 768px) {
    .social-media-share-icon {
    font-size: 20px; /* Adjust size as needed for smaller screens */	
    display: inline-block;
    margin-bottom: 10px; /* Add space between icons */
    color: #333; /* Default color */
    transition: transform 0.2s ease, font-size 0.2s ease; /* Add transition for both transform and font-size */
    }
    .social-media-share-bar {
    left: 50%;
    transform: translate(-50%);
    top: unset;
    bottom: 0;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    }
}

4. Paste your CSS code into the text area provided. Write your CSS rules within <style> tags.
5. Click the “Publish” button to save your CSS changes.

Here, We done second step of adding Social Media Share Buttons on WordPress website let’s do third steps.

Third Steps, Adding Custom JavaScript Coding

If you have a separate JavaScript file for your theme, locate and open it in the Theme Editor. If not, you can create a new file. Paste your JavaScript code directly into the file. Make sure to follow proper JavaScript syntax. Once you’ve added the JavaScript code, click the “Update File” button to save your changes. How to add JavaScript without plugins on WordPress Websites. If you have problem with this steps you can do on another way here is a steps.

1. Log in to your WordPress dashboard. Navigate to “Plugins” > “Add New”. Search for “WPCode Light”. Click “Install Now” and then “Activate” to activate the plugin.
2. Click on />Code Snippet > +Add Snippet > Add Your Custom Code (New Snippet)

3. Choose code type JavaScript Snippet Paste given code on box.

document.addEventListener('DOMContentLoaded', function() {
    const shareIcons = document.querySelectorAll('.social-media-share-icon');

    shareIcons.forEach(icon => {
        icon.addEventListener('click', function(event) {
            event.preventDefault();
            const shareType = icon.getAttribute('data-share');
            switch (shareType) {
                case 'facebook':
                    window.open(icon.href, '_blank', 'width=600,height=400');
                    break;
		case 'pinterest':
                    window.open(icon.href, '_blank', 'width=600,height=400');
                    break;
                case 'instagram':
                    window.open(icon.href, '_blank', 'width=600,height=400');
                    break;
                case 'twitter':
                    window.open(icon.href, '_blank', 'width=600,height=300');
                    break;
                case 'linkedin':
                    window.open(icon.href, '_blank', 'width=600,height=400');
                    break;
                case 'telegram':
                    window.open(icon.href, '_blank', 'width=600,height=400');
                    break;
                
                // Add more cases for other social media platforms
                default:
                    break;
            }
        });
    });
});

4. Click on Save Snippet and click on Inactive button to active JavaScript.

Here, We done third step also, Please follow the steps very carefully. If you have any confusion on doing process those custom code watch this video.

Important Notes

• Placement: Choose strategic placements for social media share buttons, such as near the top or bottom of your content, to encourage users to share.
• Visibility: Make sure the share buttons are easily visible and accessible without being intrusive to the user experience.
• Mobile Optimization: Ensure that the share buttons are mobile-friendly and easy to use on various devices and screen sizes.
• Performance: Optimize the performance of share buttons to minimize impact on page load times and overall website performance.
• Testing: Test share buttons across different browsers, devices, and platforms to ensure consistent functionality and appearance.
• Customization: Customize the design and appearance of share buttons to match your website’s branding and aesthetics. For full customization information watch guide video.

By keeping these notes in mind, you can effectively implement social media share functionality on your website to increase engagement and visibility of your content.

Guide Video

Wrapping Up

Incorporating the Floating Social Media Share Bar onto your website can greatly improve user engagement and increase the visibility of your content. By carefully considering placement, customization, performance, analytics, user experience, privacy, optimization, and accessibility, you can ensure that the share bar effectively promotes social sharing while providing a seamless user experience. Remember to monitor performance metrics and continuously refine your strategy to maximize the impact of the share bar on your website. Taking these factors into account, you’re now ready to make the most of social media sharing and boost engagement with your website content. If you have any more questions or require assistance in the future, don’t hesitate to contact us. Good luck!