Nowadays, paying attention to engagement and interaction on your WordPress website is more than crucial. One effective way to achieve this is by adding social media share buttons to your pages and posts. Share buttons provide visitors with an easy and convenient means to share your content across various social platforms, expanding your reach and driving more traffic to your site. In this article, we’ll explore why share buttons are essential for website engagement and provide you with step-by-step instructions for adding them to your WordPress website. We’ll also discuss the benefits of this lightweight approach, allowing you to maintain optimal website performance without relying on resource-heavy plugins.
Why Share Buttons are Essential for Website Engagement
Share buttons play a crucial role in enhancing the user experience and boosting your website’s visibility. Here’s why they are a must-have feature:
- Increase Content Reach: Share buttons empower your audience to easily share your valuable content with their network of friends and followers on social media platforms, significantly increasing the exposure of your posts and pages.
- User Expectation: In today’s digital landscape, users expect to see share buttons on websites. It has become a standard feature, and visitors are more likely to engage with your content when share buttons are readily available.
- Enhanced Engagement: By providing a simple way for users to share your content, you encourage social interaction and engagement. Visitors are more likely to comment, like, or share when these options are easily accessible.
Add Social Share Buttons to WordPress without plugin
Now, let’s explore how to add share buttons to your WordPress website using a lightweight approach. This method is more efficient than using resource-intensive plugins and allows you to maintain optimal website performance. We’ll cover three approaches: using the functions.php file with the wp_body_open hook, creating a shortcode, and incorporating simple HTML.
Why a Lightweight Approach Matters
Opting for a lightweight approach to adding share buttons is essential for maintaining your website’s performance. Here’s why:
- Efficiency: Lightweight solutions, like the ones described above, do not introduce excessive code or database queries, ensuring efficient loading times for your pages.
- Control: With a lightweight approach, you have full control over the appearance and behavior of your share buttons, allowing for seamless integration with your website’s design.
- Speed: Plugins often add extra HTTP requests and assets to your website, potentially slowing it down. By using lightweight methods, you minimize these additional requests and optimize loading speed.
Implementing social share buttons using custom code instead of relying on plugins not only enhances website performance but also grants you greater control over the user experience. Many social sharing plugins come with additional functionalities that may not be required, contributing to unnecessary bloat and impacting page loading times. By crafting a tailored solution, you can ensure that your website remains lean and efficient, resulting in faster loading pages that offer a more responsive and user-friendly experience. Moreover, custom code allows you to integrate share buttons precisely where you want them, aligning with your site’s unique design and content layout.
Obtaining the proper icons to avoid brand infringements
Before we delve into the technical aspects, it’s essential to acquire icons that are allowed by the respective owners of the social media you would like to create the share link for. For example, LinkedIn® has a descriptive page for the accepted brand policies and logos used, where you can find the allowed logo by LinkedIn®. Follow these steps to obtain the image you need:
- Visit LinkedIn® branding page: Navigate to the companies website for the brand section by going to https://brand.linkedin.com/policies.
- Locate allowed logo: While we suggest you read all the information included in the policy you can jump straight to the location of the logo.
- Consider adding text: Browse through the available options presented below in case you prefer adding a text like the examples.
- Download Image: After choosing the perfect approach for the logo, download the image to your device.
- Repeat for images for the social media you want to use: For example Facebook brand resource center is located here and X brand resource toolkit is located here.
Adding Share Buttons via functions.php with wp_body_open Hook
This approach allows you to insert share buttons directly into the body of your website, ensuring they load efficiently and do not slow down your pages. To implement this method, follow these steps:
<?php //do not copy this line!
function add_share_buttons_to_content() {
?>
<div class="social-share-wpr">
<a class="linked-in-share-button-wpr" href="https://www.linkedin.com/sharing/share-offsite/?url=" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" title="Share on Linkedin" aria-label="Share on Linkedin"><img src="https://www.mywebsite.com/wp-content/uploads/social-media-icon-linkedin.svg" /></a>
<a class="twitter-share-button-wpr" href="https://twitter.com/intent/tweet?url=" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" title="Share on Twitter" aria-label="Share on Twitter"><img src="www.mywebsite.com/wp-content/uploads/social-media-icon-twitter.svg" /></a>
<a class="facebook-share-button-wpr" href="https://www.facebook.com/sharer.php?u=" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" title="Share on Facebook" aria-label="Share on Facebook"><img src="www.mywebsite.com/wp-content/uploads/social-media-icon-facebook.svg" /></a>
</div>
<?php
}
add_action('wp_body_open', 'add_share_buttons_to_content');Make the social buttons work with javascript:
After adding the above code, we need to add an extra code snippet that will append the current article (or page) URL to the share buttons. Add the code below after the previous code snippet:
<?php //do not copy this line!
function add_social_share_wpr(){
?>
<script >
jQuery(document).ready(function($) {
$.fn.appendAttr = function(attrName, suffix) {
this.attr(attrName, function(i, val) {
return val + suffix;
});
return this;
};
var currenturl = window.location.href;
var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));
var twiturl = currenturl.substring(0, currenturl.length - 1) + "&text=" + tweet;
$('.linked-in-share-button-wpr').appendAttr('href',currenturl);
$('.twitter-share-button-wpr').appendAttr('href',twiturl);
$('.facebook-share-button-wpr').appendAttr('href',currenturl);
});
</script>
<?php
}
add_action('wp_footer','add_social_share_wpr',99);
By now, we have the Social Share buttons displayed on all our pages, perfectly working:
Lastly, we need a little bit of CSS code to style the buttons (everybody likes a little bit of style). Add the below snippet in your child’s theme style.css or in the Customize -> Custom CSS section:
/*** Make the buttons float ***/
.social-share-wpr{
position:fixed;
right:10px;
bottom:40%;
}
/** Styling for the images **/
.social-share-wpr img{
max-width:60px;
}
If you decided to download images from different sources, they may have some inconsistency. You can use additional CSS according to your specific case. For example, we got the new X icon from another website, so we had to add some margin-left and reduce the max-width:
After adding the CSS code presented above, we now have the prefect floating result:
Creating a Share Buttons Shortcode
Creating a shortcode provides you with flexibility when placing share buttons within your content. You can add another snippet inside your Child’s theme functions.php, in order to create a custom shortcode which you can use in pages or posts editor. Here’s how to create a share button shortcode:
<?php //do not copy this line!
function share_button_shortcode() {
ob_start();
?>
<div class="social-share-wpr">
<a class="linked-in-share-button-wpr" href="https://www.linkedin.com/sharing/share-offsite/?url=" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" title="Share on Linkedin" aria-label="Share on Linkedin"><img src="https://www.mywebsite.com/wp-content/uploads/social-media-icon-linkedin.svg" /></a>
<a class="twitter-share-button-wpr" href="https://twitter.com/intent/tweet?url=" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" title="Share on Twitter" aria-label="Share on Twitter"><img src="www.mywebsite.com/wp-content/uploads/social-media-icon-twitter.svg" /></a>
<a class="facebook-share-button-wpr" href="https://www.facebook.com/sharer.php?u=" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" title="Share on Facebook" aria-label="Share on Facebook"><img src="www.mywebsite.com/wp-content/uploads/social-media-icon-facebook.svg" /></a>
</div>
<?php
return ob_get_clean();
}
add_shortcode('share_buttons', 'share_button_shortcode');To use the shortcode, insert [share_buttons] in the post or page editor where you want the share buttons to appear. This shortcode will render the share buttons based on the provided HTML structure:
Of course, do not forget to add the javascript snippet we mentioned above (if you didn’t add it already), otherwise the buttons will not share the current URL:
<?php //do not copy this line!
function add_social_share_wpr(){
?>
<script >
/* The script for sharing presented above */
</script>
<?php
}
add_action('wp_footer','add_social_share_wpr',99);
After adding the shortcode to editor and hitting Update, we now have the code displayed in the frond-end:
For using the Shortcode, we need to change the CSS to fit our new needs. Add the below snippet in your child’s theme style.css or in the Customize -> Custom CSS section to make the icons horizontal instead of vertical:
/*** Make the buttons display horizontally ***/
.social-share-wpr{
display:flex;
}
Adding Share Buttons with Simple HTML
For a straightforward solution, you can add share buttons directly using HTML in your WordPress pages and posts. This comes in handy for those looking to add the code straight into template files (in Child Theme). Insert the following HTML code wherever you want the buttons to appear:
<div class="social-share-wpr">
<a class="linked-in-share-button-wpr" href="https://www.linkedin.com/sharing/share-offsite/?url=" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" title="Share on Linkedin" aria-label="Share on Linkedin"><img src="https://www.mywebsite.com/wp-content/uploads/social-media-icon-linkedin.svg" /></a>
<a class="twitter-share-button-wpr" href="https://twitter.com/intent/tweet?url=" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" title="Share on Twitter" aria-label="Share on Twitter"><img src="www.mywebsite.com/wp-content/uploads/social-media-icon-twitter.svg" /></a>
<a class="facebook-share-button-wpr" href="https://www.facebook.com/sharer.php?u=" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" title="Share on Facebook" aria-label="Share on Facebook"><img src="www.mywebsite.com/wp-content/uploads/social-media-icon-facebook.svg" /></a>
</div>Again, in order for the buttons to work properly, make sure you add (if not already added) the javascript code presented above:
<?php //do not copy this line!
function add_social_share_wpr(){
?>
<script >
/* The script for sharing presented above */
</script>
<?php
}
add_action('wp_footer','add_social_share_wpr',99);
When you use the HTML code directly, make sure you adjust the CSS accordingly:
/*** Make the buttons float or horizontal ***/
.social-share-wpr{
position:fixed;
display:flex;
}
/** Styling for the images **/
.social-share-wpr img{
max-width:80px;
}
Allow your visitors to share WordPress pages and posts easily!
In conclusion, adding social media share buttons to your WordPress website enhances engagement and encourages visitors to spread your content. Utilizing a lightweight approach ensures optimal performance and user satisfaction, making it a superior choice to resource-heavy plugins. By following the steps outlined in this article, you can effortlessly integrate share buttons and reap the benefits of improved user engagement and website performance.