How to Create Social Sharing Buttons in GeneratePress without Plugin

Adding social sharing buttons to your website can dramatically increase the visibility and engagement of your content. While many people use plugins to accomplish this, having too many plugins might slow down your site and pose security issues. 

If you’re using the GeneratePress theme, you can manually add social sharing buttons instead of utilizing a plugin. 

This strategy results in faster page load times and a cleaner, more secure website. Here’s a step-by-step instruction for how to create social sharing buttons in GeneratePress without Plugin.

Why Avoid Plugins for Social Sharing Buttons?

Before getting into the how-to, you should understand why you might wish to avoid plugins:

1. Performance: Plugins might add more scripts and styles to your site, slowing it down.
2. Security: Each plugin contains a potential security flaw. Fewer plugins imply fewer potential security vulnerabilities.
3. Control: Manually adding features allows you to completely customize their design and functionality.

Preparation

Manually adding social sharing buttons requires a basic understanding of HTML, CSS, and JavaScript. The method includes adding HTML code to the buttons, styling them with CSS, and making them functional with JavaScript.

Step 1: Add HTML Code

First, provide the HTML code for the social sharing buttons. You can accomplish this by modifying the template files of your GeneratePress theme. Here’s how.

1. Establish a Child Theme: It is preferable to establish a child theme to avoid losing modifications when the theme is updated. If you don’t have a child theme, here’s how to make one.
2. Edit the single post template: Open your child theme folder and look for the content-single.php file. If it does not exist, make it. This file specifies the layout of individual postings.
3. Add HTML code: Place the following HTML code where you want the social sharing buttons to display (often at the end of the post content):

<div class="social-sharing">
    <a href="#" class="social-link" id="facebook-share">Share on Facebook</a>
    <a href="#" class="social-link" id="twitter-share">Tweet</a>
    <a href="#" class="social-link" id="linkedin-share">Share on LinkedIn</a>
</div>

Step 2: Add CSS for Styling

Next, use CSS to style the buttons. Add the following CSS to your child theme’s stylesheet.CSS file:

.social-sharing {
    margin-top: 20px;
}

.social-link {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 15px;
    color: #fff;
    background-color: #0073aa;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
}

.social-link:hover {
    background-color: #005a87;
}

This CSS will give your social sharing buttons a simple appearance. Feel free to change the colors, padding, margins, and other attributes to match your website’s style.

Step 3: Add JavaScript for Functionality

To make the buttons usable, add JavaScript. Add the JavaScript code below to your child theme’s functions.php file. When a button is pressed, this code opens a new sharing window.

function custom_social_sharing_scripts() {
    ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var facebookShare = document.getElementById('facebook-share');
            var twitterShare = document.getElementById('twitter-share');
            var linkedinShare = document.getElementById('linkedin-share');

            facebookShare.addEventListener('click', function(event) {
                event.preventDefault();
                var url = window.location.href;
                var shareUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url);
                window.open(shareUrl, 'facebook-share-dialog', 'width=800,height=600');
                return false;
            });

            twitterShare.addEventListener('click', function(event) {
                event.preventDefault();
                var url = window.location.href;
                var shareUrl = 'https://twitter.com/share?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(document.title);
                window.open(shareUrl, 'twitter-share-dialog', 'width=800,height=600');
                return false;
            });

            linkedinShare.addEventListener('click', function(event) {
                event.preventDefault();
                var url = window.location.href;
                var shareUrl = 'https://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(url);
                window.open(shareUrl, 'linkedin-share-dialog', 'width=800,height=600');
                return false;
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'custom_social_sharing_scripts');

This JavaScript code listens for clicks on the social sharing buttons and opens the respective sharing dialog in a new window. It retrieves the current URL and the page title to include in the share.

Step 4: Testing and Refinement

After you’ve added the HTML, CSS, and JavaScript, test the social sharing buttons to confirm they work properly. Visit a single post on your website and click on each social sharing icon to examine if the sharing dialogues appear as intended.

Testing Checklist

1. Functionality: Ensure that each button opens the appropriate sharing dialogue with the current URL.
2. Appearance: Check the buttons’ styling to ensure they look good on all devices.
3. Performance: Make sure the inclusion of social sharing buttons does not significantly slow down your website.

Customizing the Buttons

You can further personalize the social sharing buttons to meet your website’s design and branding. Here are a few ideas:

1. Custom Icons: To have a more current appearance, replace the text with social networking icons. You can utilize icon fonts such as FontAwesome and SVG icons.
2. Different colors: For the buttons, use the official brand colors of each social network.
3. Animation: Use CSS animations to make the buttons more dynamic when hovered over.

Example: Using FontAwesome Icons

1. Include FontAwesome on your website. You may accomplish this by adding the FontAwesome CDN URL to your header.php file or enqueuing it in your functions.php file.

function enqueue_fontawesome() {
    wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_fontawesome');

Update HTML: Replace the text in your HTML with FontAwesome icons.
<div class="social-sharing">
    <a href="#" class="social-link" id="facebook-share"><i class="fab fa-facebook-f"></i></a>
    <a href="#" class="social-link" id="twitter-share"><i class="fab fa-twitter"></i></a>
    <a href="#" class="social-link" id="linkedin-share"><i class="fab fa-linkedin-in"></i></a>
</div>
Adjust CSS: Update your CSS to style the icons appropriately.
.social-link i {
    font-size: 18px;
}

Conclusion

Adding social sharing buttons to your GeneratePress theme without a plugin is a great way to keep your site lean and fast. With a bit of HTML, CSS, and JavaScript, you can create custom, stylish, and functional social sharing buttons. 

This approach not only improves your site’s performance but also gives you complete control over the appearance and functionality of your social sharing buttons.

By following this guide, you’ll be able to enhance your website’s social sharing capabilities while maintaining optimal performance and security. Happy coding!

FAQ’s