Skip to content
Hoolite.be
  • Home
  • Tutorials
  • Downloads
  • Contact
Hoolite.be
  • Home
  • Tutorials
  • Downloads
  • Contact

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

Posted on July 2021

Having your posts shared on the web by your visitors is a good way to spread the word. In this tutorial I assume you already have a child theme set up and know how to edit your single post file.

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>

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>

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>


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" />

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>

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;
    }
}

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;
        });
    });
}

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' );

You can download the demo files here on GitHub.

If you have any questions related to this post, let me know in the comment section below!

🎁 Download for free!

Go ahead and download it for free. Show your love and let me know how you are using it!


📥 Download

🎉 Sharing is fun!


🎉 Sharing is fun!

Support 🐶

If you found this article helpful, got a question or spotted an error/typo... Do well to leave your feedback in the comment section or help spread it by sharing this article. If you're feeling generous (and I hope you do) you can definitely help me by getting me a cup of coffee ☕.

Filed under: WordPress


You may like these too!

wordpress

How to Fix “Scrape Key Check Failed” Error in WordPress Theme Editor

The WordPress theme editor is a powerful tool that allows you to customize your website's theme without editing code directly. However, sometimes when trying to…

wordpress

How to Enable Maintenance Mode in WordPress: A Step-by-Step Guide with Code Snippets

If you're planning to update your WordPress site or perform any major changes, enabling maintenance mode is a smart way to minimize any disruptions to…

wordpress

How to Display a List of Child Pages on a Parent Page in WordPress: A Step-by-Step Guide

Displaying a list of child pages on a parent page in WordPress can be useful for creating navigation menus, displaying related content, or simply providing…

One Comment

  • zortilo nrel November 11, 2021

    Real clear internet site, thanks for this post.

    Reply

Leave a Reply Cancel reply

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

Recent Posts

  • How to Fix “Scrape Key Check Failed” Error in WordPress Theme Editor
  • How to Enable Maintenance Mode in WordPress: A Step-by-Step Guide with Code Snippets
  • How to Display a List of Child Pages on a Parent Page in WordPress: A Step-by-Step Guide
  • How to Customize the “Read More” Text in WordPress Excerpts for Better User Experience and SEO
  • How to Add a Vimeo Background Video to Your WordPress Site: A Step-by-Step Guide
  • How to Change the Default WordPress Excerpt Length for Better Content Control

© 2023 | With 💗  and ☕  Hoolite.be

Cookies are used to count pageviews and show ads. That's it! However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie Settings🍪 Nomnom!
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-advertisement1 yearSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Advertisement" category .
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
PHPSESSIDsessionThis cookie is native to PHP applications. The cookie is used to store and identify a users' unique session ID for the purpose of managing user session on the website. The cookie is a session cookies and is deleted when all the browser windows are closed.
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
CookieDurationDescription
__gads1 year 24 daysThe __gads cookie, set by Google, is stored under DoubleClick domain and tracks the number of times users see an advert, measures the success of the campaign and calculates its revenue. This cookie can only be read from the domain they are set on and will not track any data while browsing through other sites.
_ga2 yearsThe _ga cookie, installed by Google Analytics, calculates visitor, session and campaign data and also keeps track of site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognize unique visitors.
_ga_BD9Q0XFBF82 yearsThis cookie is installed by Google Analytics.
_gat_gtag_UA_23883327_11 minuteSet by Google to distinguish users.
_gid1 dayInstalled by Google Analytics, _gid cookie stores information on how visitors use a website, while also creating an analytics report of the website's performance. Some of the data that are collected include the number of visitors, their source, and the pages they visit anonymously.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
CookieDurationDescription
IDE1 year 24 daysGoogle DoubleClick IDE cookies are used to store information about how the user uses the website to present them with relevant ads and according to the user profile.
test_cookie15 minutesThe test_cookie is set by doubleclick.net and is used to determine if the user's browser supports cookies.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT
Powered by CookieYes Logo