In this article, I will show you how to add custom social share icons with popup without a plugin in WordPress. Although there are many social share plugins out there to make your job easier, there are disadvantages as well for using many plugins. And one of the main disadvantage is they bring some unnecessary PHP, JavaScript, HTML code and makes unnecessary HTTP requests which can impact on your website performance and speed. Which can be bad for your SEO as well. Adding social share icons with popup does not need whole lot of codes. And there is no reason to add another plugin on your WordPress website for that.
Before I get started on showing you you how you can add custom social share icons with popup without a plugin in WordPress, I would recommend you to make a child theme of your main theme so that when an update comes to your main theme the custom codes does not go away. And the simplest way to make a child theme is to install a child theme generator plugin, and after you generate your child theme, remove the plugin as you won’t need it anymore. After creating your child theme goto Appearance -> Themes and activate the child theme. Also make sure to export your customizer options and import back to your child theme as child theme will reset the customizer options. But if you developed your theme, then you are good to go with your main theme.
Add sticky social share icons
Let’s get started and add sticky social share icons to the left side of your blog post. Since you don’t need to add social share icons on your homepage or standard pages, the icons I will only show them in single post page.
Goto Appearance -> Theme editor and open up functions.php file. First let’s add the FontAwesome 5 icons, to do that simply paste the following codes at the bottom of functions.php. If your theme already have FontAwesome 5 icons loaded then you can ignore this.
/*===== Enqueue Font Awesome 5 in WordPress =====*/
function crafthemes_load_font_awesome() {
wp_enqueue_style( 'font-awesome-free', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'crafthemes_load_font_awesome' );
Now let’s add the icons and the JavaScript that initiates the popup. To do that, paste the following code on your functions.php file. If you want to show the share icons to your entire website regardless of pages/posts, remove the highlighted codes below.
/*===== Add sticky social share icon with popup =====*/
function crafthemes_social_share_popup() {
if (is_single()) {
?>
<div class="crafthemes-ss">
<a class="crafthemes-icon crafthemes-popup-fb"><span class="fab fa-facebook-f"></span></a>
<a class="crafthemes-icon crafthemes-popup-tw"><span class="fab fa-twitter"></span></a>
<a class="crafthemes-icon crafthemes-popup-in"><span class="fab fa-linkedin-in"></span></a>
<a class="crafthemes-icon crafthemes-popup-pin"><span class="fab fa-pinterest-p"></span></a>
<a class="crafthemes-icon crafthemes-popup-wapp"><span class="fab fa-whatsapp"></span></a>
</div>
<script type="text/javascript">
( function ( $ ) {
function crafthemes_social_popup( css_class, sharer ) {
$( '.' + css_class ).on( 'click', function() {
switch( sharer ) {
case 'facebook':
sharer = 'http://www.facebook.com/sharer.php?u=';
break;
case 'twitter':
sharer = 'https://twitter.com/share?url=';
break;
case 'linkedin':
sharer = 'https://www.linkedin.com/shareArticle?mini=true&url=';
break;
case 'pinterest':
sharer = 'http://pinterest.com/pin/create/button/?url=';
break;
case 'whatsapp':
sharer = 'whatsapp://send?text=';
break;
default:
sharer = 'http://www.facebook.com/sharer.php?u=';
}
var url = window.location.href; // Get the page url
var share_url = sharer + url;
window.open( share_url, "", "width=700, height=500, scrollbars=yes" );
return false;
} );
}
crafthemes_social_popup( 'crafthemes-popup-fb', 'facebook' );
crafthemes_social_popup( 'crafthemes-popup-tw', 'twitter' );
crafthemes_social_popup( 'crafthemes-popup-in', 'linkedin' );
crafthemes_social_popup( 'crafthemes-popup-pin', 'pinterest' );
crafthemes_social_popup( 'crafthemes-popup-wapp', 'whatsapp' );
} )( jQuery );
</script>
<?php
} // is single
}
add_action( 'wp_footer', 'crafthemes_social_share_popup' );
Explanation: In the above code, line 6 to 11 adds the HTML markup of the social icons. If you like remove any icon, you can remove the HTML anchors from there. After that line 13-53 adds the popup functionality.
And finally, add the following CSS code to your style.css file.
/**
* Sticky Social share with popup
*/
.crafthemes-ss {
position: fixed;
left: 0;
top: 50%;
transform: translateY( -50% );
}
.crafthemes-icon {
display: block;
cursor: pointer;
}
.crafthemes-icon span {
color: #fff;
font-size: 20px;
padding: 10px;
width: 45px;
height: 45px;
line-height: 24px;
text-align: center;
}
.crafthemes-icon .fa-facebook-f {
background-color: #425798;
}
.crafthemes-icon .fa-twitter {
background-color: #529df2;
}
.crafthemes-icon .fa-linkedin-in {
background-color: #356eaf;
}
.crafthemes-icon .fa-pinterest-p {
background-color: #b6342e;
}
.crafthemes-icon .fa-whatsapp {
background-color: #43d854;
}
/**
* Media query for responsiveness
* Hides the sitcky share icons
*/
@media screen and ( max-width: 782px ) {
.crafthemes-ss {
display: none;
}
}
Make sure to clear your browser cache before testing.
Add regular share icons at the bottom of article content
Here is how you can add regular share icons right after the article content ends. Lets start from fresh again and remove the earlier codes. First load FontAwesome 5 icons if your theme doesn’t already have. Goto your functions.php file and paste this code.
/*===== Enqueue Font Awesome 5 in WordPress =====*/
function crafthemes_load_font_awesome() {
wp_enqueue_style( 'font-awesome-free', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'crafthemes_load_font_awesome' );
Now, let’s add the HTML codes for the share icons and the JavaScript to initiate the popup. To do that, paste the following code on your functions.php file.
/*===== Add Regular Share icons after post content with popup =====*/
function crafthemes_after_post_content($content){
if (is_single()) {
$content .= '<div class="crafthemes-ss">
<span class="crafthemes-sharemeta">Share</span>
<a class="crafthemes-icon crafthemes-icon-fb crafthemes-popup-fb"><span class="fab fa-facebook-f"></span><span class="share-text">Share</span></a>
<a class="crafthemes-icon crafthemes-icon-tw crafthemes-popup-tw"><span class="fab fa-twitter"></span><span class="share-text">Tweet</span></a>
<a class="crafthemes-icon crafthemes-icon-in crafthemes-popup-in"><span class="fab fa-linkedin-in"></span><span class="share-text">Share</span></a>
<a class="crafthemes-icon crafthemes-icon-pin crafthemes-popup-pin"><span class="fab fa-pinterest-p"></span><span class="share-text">Pin</span></a>
<a class="crafthemes-icon crafthemes-icon-wapp crafthemes-popup-wapp"><span class="fab fa-whatsapp"></span><span class="share-text">Send</span></a>
</div>';
} // is single
return $content;
}
add_filter( "the_content", "crafthemes_after_post_content" );
// Add sticky social share icon with popup
function crafthemes_social_share_popup() {
if (is_single()) {
?>
<script type="text/javascript">
( function ( $ ) {
function crafthemes_social_popup( css_class, sharer ) {
$( '.' + css_class ).on( 'click', function() {
switch( sharer ) {
case 'facebook':
sharer = 'http://www.facebook.com/sharer.php?u=';
break;
case 'twitter':
sharer = 'https://twitter.com/share?url=';
break;
case 'linkedin':
sharer = 'https://www.linkedin.com/shareArticle?mini=true&url=';
break;
case 'pinterest':
sharer = 'http://pinterest.com/pin/create/button/?url=';
break;
case 'whatsapp':
sharer = 'whatsapp://send?text=';
break;
default:
sharer = 'http://www.facebook.com/sharer.php?u=';
}
var url = window.location.href; // Get the page url
var share_url = sharer + url;
window.open( share_url, "", "width=700, height=500, scrollbars=yes" );
return false;
} );
}
crafthemes_social_popup( 'crafthemes-popup-fb', 'facebook' );
crafthemes_social_popup( 'crafthemes-popup-tw', 'twitter' );
crafthemes_social_popup( 'crafthemes-popup-in', 'linkedin' );
crafthemes_social_popup( 'crafthemes-popup-pin', 'pinterest' );
crafthemes_social_popup( 'crafthemes-popup-wapp', 'whatsapp' );
} )( jQuery );
</script>
<?php
} // is single
}
add_action( 'wp_footer', 'crafthemes_social_share_popup' );
Explanation: Similar to the Sticky icons, here from line 4-10 adds the HTML code for displaying the icons. If you like to remove any icon, you can do so from there.
And finally, add the CSS codes on your style.css file.
/**
* Regular Social share icons after content
*/
.crafthemes-ss {
position: relative;
font-size: 0;
text-align: center;
padding-top: 22px;
padding-bottom: 22px;
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
}
.crafthemes-sharemeta {
font-size: 20px;
margin-right: 20px;
}
.crafthemes-icon {
display: inline-block;
color: #fff;
font-size: 14px;
line-height: 24px;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
margin-left: 5px;
margin-right: 5px;
}
.crafthemes-icon:hover {
color: #fff;
font-weight: normal;
}
.crafthemes-icon .fab {
color: #fff;
margin-right: 6px;
font-size: 20px;
line-height: 24px;
text-align: center;
}
.crafthemes-icon-fb {
background-color: #425798;
}
.crafthemes-icon-tw {
background-color: #529df2;
}
.crafthemes-icon-in {
background-color: #356eaf;
}
.crafthemes-icon-pin {
background-color: #b6342e;
}
.crafthemes-icon-wapp {
background-color: #43d854;
}
/**
* Media query for responsiveness
* Hides the Share texts
*/
@media screen and ( max-width: 782px ) {
.crafthemes-ss-sticky,
.crafthemes-sharemeta,
.crafthemes-icon .share-text {
display: none;
}
.crafthemes-icon .fab {
margin-right: 0;
width: 45px;
height: 30px;
line-height: 30px;
}
.crafthemes-icon {
margin-bottom: 10px;
}
}
Add Both, Sticky and regular social share icons
How about adding both? Adding sticky social share icons along with adding another set right after the article content is also effective. Therefore, if you like to add both type of share icons, here is how you can do that.
First, check if FontAwesome 5 is loaded on your theme, if not, let’s load it first. Paste the following code on your functions.php file.
/*===== Enqueue Font Awesome 5 in WordPress =====*/
function crafthemes_load_font_awesome() {
wp_enqueue_style( 'font-awesome-free', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'crafthemes_load_font_awesome' );
After that, lets add the HTML code for regular share icons right after the article post content. To do that, paste the following codes at the bottom of your functions.php file.
/*===== Add Regular Share icons after post content with popup =====*/
function crafthemes_after_post_content( $content ){
if ( is_single() ) {
$content .= '<div class="crafthemes-ss">
<span class="crafthemes-sharemeta">Share</span>
<a class="crafthemes-icon crafthemes-icon-fb crafthemes-popup-fb"><span class="fab fa-facebook-f"></span><span class="share-text">Share</span></a>
<a class="crafthemes-icon crafthemes-icon-tw crafthemes-popup-tw"><span class="fab fa-twitter"></span><span class="share-text">Tweet</span></a>
<a class="crafthemes-icon crafthemes-icon-in crafthemes-popup-in"><span class="fab fa-linkedin-in"></span><span class="share-text">Share</span></a>
<a class="crafthemes-icon crafthemes-icon-pin crafthemes-popup-pin"><span class="fab fa-pinterest-p"></span><span class="share-text">Pin</span></a>
<a class="crafthemes-icon crafthemes-icon-wapp crafthemes-popup-wapp"><span class="fab fa-whatsapp"></span><span class="share-text">Send</span></a>
</div>';
} // is single
return $content;
}
add_filter( 'the_content', 'crafthemes_after_post_content' );
Now, let’s add the HTML code for sticky icons and the JavaScript code for initiating the popup. To do that, add the following code on your functions.php file right after the previous code.
/*===== Add sticky social share icon with popup =====*/
function crafthemes_social_share_popup() {
if ( is_single() ) {
?>
<div class="crafthemes-ss-sticky">
<a class="crafthemes-icon crafthemes-icon-fb crafthemes-popup-fb"><span class="fab fa-facebook-f"></span></a>
<a class="crafthemes-icon crafthemes-icon-tw crafthemes-popup-tw"><span class="fab fa-twitter"></span></a>
<a class="crafthemes-icon crafthemes-icon-in crafthemes-popup-in"><span class="fab fa-linkedin-in"></span></a>
<a class="crafthemes-icon crafthemes-icon-pin crafthemes-popup-pin"><span class="fab fa-pinterest-p"></span></a>
<a class="crafthemes-icon crafthemes-icon-wapp crafthemes-popup-wapp"><span class="fab fa-whatsapp"></span></a>
</div>
<script type="text/javascript">
( function ( $ ) {
function crafthemes_social_popup( css_class, sharer ) {
$( '.' + css_class ).on( 'click', function() {
switch( sharer ) {
case 'facebook':
sharer = 'http://www.facebook.com/sharer.php?u=';
break;
case 'twitter':
sharer = 'https://twitter.com/share?url=';
break;
case 'linkedin':
sharer = 'https://www.linkedin.com/shareArticle?mini=true&url=';
break;
case 'pinterest':
sharer = 'http://pinterest.com/pin/create/button/?url=';
break;
case 'whatsapp':
sharer = 'whatsapp://send?text=';
break;
default:
sharer = 'http://www.facebook.com/sharer.php?u=';
}
var url = window.location.href; // Get the page url
var share_url = sharer + url;
window.open( share_url, "", "width=700, height=500, scrollbars=yes" );
return false;
} );
}
crafthemes_social_popup( 'crafthemes-popup-fb', 'facebook' );
crafthemes_social_popup( 'crafthemes-popup-tw', 'twitter' );
crafthemes_social_popup( 'crafthemes-popup-in', 'linkedin' );
crafthemes_social_popup( 'crafthemes-popup-pin', 'pinterest' );
crafthemes_social_popup( 'crafthemes-popup-wapp', 'whatsapp' );
} )( jQuery );
</script>
<?php
} // is single
}
add_action( 'wp_footer', 'crafthemes_social_share_popup' );
Lastly, add the CSS to your style.css file.
/**
* Social share with popup for both sticky and regular
*/
.crafthemes-ss {
position: relative;
font-size: 0;
text-align: center;
padding-top: 22px;
padding-bottom: 22px;
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
}
.crafthemes-ss-sticky {
position: fixed;
left: 0;
top: 50%;
transform: translateY( -50% );
}
.crafthemes-ss-sticky .crafthemes-icon {
margin: 0;
padding: 0;
border-radius: 0;
display: block;
}
.crafthemes-ss-sticky .crafthemes-icon span {
margin-right: 0;
width: 45px;
height: 45px;
line-height: 45px;
}
.crafthemes-sharemeta {
font-size: 20px;
margin-right: 20px;
}
.crafthemes-icon {
display: inline-block;
color: #fff;
font-size: 14px;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
margin-left: 5px;
margin-right: 5px;
}
.crafthemes-icon:hover {
color: #fff;
font-weight: normal;
}
.crafthemes-icon .share-text {
font-size: 16px;
}
.crafthemes-icon .fab {
color: #fff;
margin-right: 6px;
font-size: 20px;
line-height: 24px;
text-align: center;
}
.crafthemes-icon-fb {
background-color: #425798;
}
.crafthemes-icon-tw {
background-color: #529df2;
}
.crafthemes-icon-in {
background-color: #356eaf;
}
.crafthemes-icon-pin {
background-color: #b6342e;
}
.crafthemes-icon-wapp {
background-color: #43d854;
}
/**
* Media query for responsiveness
* Hides the sitcky share icons
* Hides the Share texts
*/
@media screen and ( max-width: 782px ) {
.crafthemes-ss-sticky,
.crafthemes-sharemeta,
.crafthemes-icon .share-text {
display: none;
}
.crafthemes-icon .fab {
margin-right: 0;
width: 45px;
height: 30px;
line-height: 30px;
}
.crafthemes-icon {
margin-bottom: 10px;
}
}
And there you go! You have your own Social Share icons with popup, which does the same job like the other plugins but with much less code.
ALSO READ: How to highlight author comments and add author badge in WordPress
So, from the three types of share icon types which one do you prefer most? Let me know in the comment section. Also if you have any question regarding adding social icons, feel free to ask in the comment section.
I hope you found this article helpful. If that, can you do me a favor and share this article to your friends on social media?
One Response
Comments are closed.