Social share buttons are a great way to encourage your website visitors to share your content on various social media platforms easily.
While there are many plugins available that can help you add these buttons to your WordPress site, you might prefer a more lightweight and customized solution.
In this tutorial, we’ll show you how to add social share buttons to your WordPress website without using a plugin. With a little bit of code and customization, you can have social share buttons that match your site’s design perfectly.
Table of Contents
How Share Buttons Boost Website Traffic
Adding social share buttons to your WordPress website without using a plugin can significantly help boost your website traffic in several ways:
- Increased Social Engagement: Social share buttons make it easier for visitors to share your content with their social networks. When users find your content valuable, they are more likely to share it with their friends and followers. This can lead to an organic increase in traffic as more people are exposed to your content through social media shares.
- Viral Potential: When your content is shared on social media, it has the potential to go viral. Viral content can generate an exponential increase in traffic as more and more people share and engage with your posts. Without social share buttons, this viral effect is limited, but with them, your content has a better chance to spread rapidly.
- Improved Search Engine Ranking: Social signals, such as the number of social media shares, likes, and comments, are considered by search engines as a measure of content quality and user engagement. When your content is shared on social media, it can positively impact your search engine rankings. Higher rankings mean more organic search traffic to your website.
- Enhanced User Experience: Offering social share buttons on your website provides a user-friendly experience. Visitors can easily share content they find interesting, and this convenience can encourage them to return to your site in the future. A positive user experience can lead to repeat visits and increased brand loyalty.
- Broader Audience Reach: Social share buttons allow your content to reach a wider and more diverse audience. As different users share your content on various social platforms, it can attract a range of demographics and interests. This diversity can lead to a more diverse set of visitors and, potentially, a broader readership.
- Community Building: Social sharing can help you build a community around your content. When users engage with your content on social media, it can lead to discussions and interactions. Encouraging user participation and engagement can create a sense of community and loyalty among your audience, leading to more frequent visits and increased traffic.
Create the Social Share Button Icons
The first step is to create the social share button icons that you want to use on your website. You can either design custom icons or find free icon sets online. Make sure these icons are in a format like SVG or PNG with a transparent background for a clean look. Save them in a location where you can easily access them.
In this tutorial, we will use PNG images as our icons. Upload your social share button icons to your WordPress media Library and name them exactly the same as the social media (name the Facebook icon as facebook.png).
You can download the PNG file from here or from any other source.
PHP code for the Share Buttons
Now, you’ll need to add the following function in the function.php file on your WordPress site. To do this, you need to edit your theme’s template files in the WordPress Customizer/Theme File Editor.
Here’s a code for the Facebook, Twitter, and Reddit share buttons:
function add_social_share_buttons($content) {
if (is_single()) {
$url = site_url();
// Get the current post's URL
$post_url = get_permalink();
$post_title = get_the_title();
// Create an array of social networks and their share URLs
$social_networks = array(
'Facebook' => 'https://www.facebook.com/sharer/sharer.php?u=' . $post_url,
'Twitter' => 'https://twitter.com/share?url=' . $post_url . '&text=' . rawurlencode($post_title),
'Reddit' => 'https://www.reddit.com/submit?url=' . $post_url . '&title=' . rawurlencode($post_title),
);
$share_buttons = '<div class="gy-grid share-buttons">';
foreach ($social_networks as $network => $share_url) {
$share_buttons .= '<div class="' . strtolower($network) . '-share-button">';
$share_buttons .= '<a href="' . esc_url($share_url) . '" target="_blank" rel="noopener" class="social-share-icon">';
$share_buttons .= '<img src="'. esc_url($url) .'/wp-content/uploads/2024/04/' . strtolower($network) . '.png" width="20px" height="20px" alt="' . strtolower($network) . '-share"/>';
$share_buttons .= '</a>';
$share_buttons .= '</div>';
}
$share_buttons .= '</div>';
$content .= $share_buttons;
}
return $content;
}
add_filter('the_content', 'add_social_share_buttons');Style Your Social Share Buttons
You’ll likely want to style your social share buttons to match your website’s design. You can use CSS to do this. Here’s a basic example to get you started, in this example, your social share buttons will be placed at the bottom left corner on the desktop and at the end of the post on mobile.
Desktop Share button
Mobile Share button
.share-buttons {
display:grid;
max-width:var(--wp--style--global--wide-size);
grid-template-columns: repeat(auto-fit,minmax(80px,1fr));
gap: 4px;
margin: 32px auto;
}
.share-buttons div {
padding: 12px 12px 2px;
text-align:center;
border-radius:12px;
margin:6px 0;
}
@media (min-width:1200px) {
.share-buttons{
display: block;
position: fixed;
bottom: 72px;
left: 42px;
}
.share-buttons div{
min-width:72px;
border-radius:4px;
}
}Finally, make sure to test your social share buttons to ensure they’re working as expected. Click on the buttons to share your content on Facebook, Twitter, or other platforms.
By following these steps, you can add social share buttons to your WordPress website without relying on a plugin. This approach gives you more control over the design and behavior of the buttons while keeping your site lightweight and free from unnecessary plugins. Customizing your social share buttons can enhance the user experience and encourage more sharing of your valuable content.
Leave a Reply