Add a Social Share popup to your WordPress blog (no plugin)
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!
🎉 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 ☕.
One Comment
Real clear internet site, thanks for this post.