Add a Social Share popup to your WordPress blog (no plugin)

Adding a social share popup to your WordPress blog can greatly enhance the visibility of your content and increase its reach. In this tutorial, we will guide you through the process of implementing a social share feature without using any plugins. By following these steps, you’ll be able to customize and place social media icons within your blog posts, allowing visitors to easily share your content on various platforms. Let’s get started!

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Go ahead and start editing the single.php in your child theme. Depending on your current child theme this file could vary. If you can’t find it, you have to copy the original single.php file from your parent theme and add it to your child theme. Scroll to the section where you want to add your social share call to action code.

We will create a new div for out social share wrapper, like below:

<div class="social-share">
</div>
Code language: HTML, XML (xml)

Next, we will create a <a> element and add a class for example social-popup and a class to define the social network for example ss-facebook. Also add img for the icon. I find my icons on: flaticon.com but there a so many other websites that can provide icons. You could also use an icon-font like Font Awesome. But if you only need it for social media icons, I recommend you to use SVG or PNG.

I will add a demo download link add the bottom of this article with the icons I used.

Upload the chosen icons to your media library.

<div class="social-share">
    <a class="social-popup ss-facebook" itemprop="url" href="#" target="_self">
        <img src="" />
    </a>
</div>
Code language: HTML, XML (xml)

Let’s fill in the blanks and start with the href. Since this is for WordPress we can easily get the permalink from our blogpost by using the get_permalink() function. Also copy the URL from your icon you uploaded in the media library and set it as your image src. In my example I used ./img/ so it will work in the html demo file.

<div class="social-share">
    <a class="social-popup ss-facebook" itemprop="url" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo esc_url( get_permalink() ); ?>" target="_self">
        <img src="./img/facebook.svg" />
    </a>
</div>
Code language: PHP (php)


In your PHP code you should use something like this for your images:

<img src="<?php echo esc_url( get_site_url() ); ?>/wp-content/uploads/2021/07/facebook.svg" />
Code language: PHP (php)

Cool! Let’s add our other social media like twitter, LinkedIn, email and WhatsApp. You can easily use the code below or download the demo file at the bottom of this page.

<div class="social-share">
    <a class="social-popup ss-facebook" itemprop="url" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo esc_url( get_permalink() ); ?>" target="_self">
        <img src="./img/facebook.svg" />
    </a>

    <a class="social-popup ss-twitter" itemprop="url" href="https://twitter.com/intent/tweet?text=<?php echo esc_html( get_the_title() ); ?>&url=<?php echo esc_url( get_permalink() ); ?>" target="_self">
        <img src="./img/twitter.svg" />
    </a>

    <a class="social-popup ss-linkedin" itemprop="url" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo esc_url( get_permalink() ); ?>&title=<?php echo esc_html( get_the_title() ); ?>&summary=&source=<?php echo esc_url( get_site_url() ); ?>" target="_self">
        <img src="./img/linkedin.svg" />
    </a>

    <a class="social-popup ss-email" itemprop="url" href="mailto:?&subject=<?php echo esc_html( get_the_title() ); ?>" target="_self">
        <img src="./img/email.svg" />
    </a>

    <a class="social-popup ss-whatsapp mobile-icon" itemprop="url" href="whatsapp://send?text=<?php echo esc_html( get_the_title() ); ?> <?php echo esc_url( get_permalink() ); ?>" target="_self">
        <img src="./img/whatsapp.svg" />
    </a>
</div>
Code language: PHP (php)

Next we will need some styling. Let’s use flex instead of inline li. Of course it’s totally up to you on how you’re planning to use it.
In the CSS below I already added some styling to the icons so you can easy re-use or remove it. Add the custom CSS to your theme.

/* Social Share: CSS */
.social-share {
    display: flex;
    flex-wrap: wrap;
}

.social-share a {
    margin-right: 16px;
    margin-bottom: 16px;
    transition: ease all .3s;
}

.social-share a:last-child {
    margin-right: 0;
}

.social-share img {
    max-width: 25px;
    max-height: 25px;
}

.social-share .ss-facebook,
.social-share .ss-twitter,
.social-share .ss-linkedin,
.social-share .ss-whatsapp,
.social-share .ss-email {
    padding: 16px;
    margin: 8px;
    display: block;
    border-radius: 10px;
}

.social-share .ss-facebook {
    background-color: #3b5998;
}

.social-share .ss-twitter {
    background-color: #1da1f2
}

.social-share .ss-linkedin {
    background: #0a66c2
}

.social-share .ss-whatsapp {
    background: #25d366
}

.social-share .ss-email {
    background: #312651
}

@media all and (min-width: 768px) {
    .social-share .mobile-icon {
        display: none;
    }
}
Code language: CSS (css)

As last you will need to add jQuery so the social media popup will open in a new tab to make it more user friendly. Add the folowing code to your custom Javascript section.

/* Social Share: jQuery */
if ((".social-share").length) {
    jQuery(document).ready(function() {
        jQuery(".social-popup").click(function (e) {
            e.preventDefault();
            window.open(jQuery(this).attr("href"), "fbShareWindow", "height=450, width=550, top=" + (jQuery(window).height() / 2 - 275) + ", left = " + (jQuery(window).width() / 2 - 225) + ", toolbar = 0, location = 0, menubar = 0, directories = 0, scrollbars = 0");
            return false;
        });
    });
}
Code language: JavaScript (javascript)

Not sure where you can add the jQuery? You could also add it via functions.php Use the code below and add the jQuery. You can remove the is_single() check if you’re planning to use the social sharing for the whole website (not only single posts).

function add_my_jquery() {
    if ( is_single() ) {
        ?>
            <script>
            // Your JavaScript code goes here!
            </script>
        <?php
    }
}
add_action( 'wp_head', 'add_my_jquery' );
Code language: PHP (php)

You can download the demo files here on GitHub.

That’s it! You have successfully learned how to add a social share popup to your WordPress blog without relying on plugins. By implementing this feature, you have empowered your visitors to share your valuable content with their social networks, expanding your reach and driving more traffic to your blog. Remember to regularly update your icons and customize the styling according to your theme’s design. By utilizing the power of social sharing, you can foster engagement and establish a wider online presence for your WordPress blog. If you have any questions or need further assistance, feel free to leave a comment below. Happy sharing!

Leave your feedback and help us improve 🐢

We hope you found this article helpful! If you have any questions, feedback, or spot any errors, please let us know in the comments. Your input is valuable and helps us improve. If you liked this article, please consider sharing it with others. And if you really enjoyed it, you can show your support by buying us a cup of coffee β˜•οΈ or donating via PayPal πŸ’°.

More free knowledge, because why not?

One Comment

Your thoughts matter, leave a reply πŸ’¬

Your email address will not be published. Required fields are marked *