Adding Social Share Buttons to Your WordPress Website Without a Plugin: A Step-by-Step Guide

Social media is undeniably a significant driver for website traffic. Making it effortless for visitors to share your content can increase its reach exponentially. While there are many plugins available to add social share buttons to your WordPress website, you might desire a lighter approach that doesn’t require adding another plugin to the mix. This guide will walk you through adding social share buttons to your WordPress site without using a plugin.

function add_social_share_buttons($content) {
  // Get the current page URL
  $url = esc_url(get_permalink());

  // Get the current page title
  $title = urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8'));

  // Create an array of social networks and their respective sharing URLs
  $social_networks = array(
    'Facebook' => 'https://www.facebook.com/sharer/sharer.php?u=' . $url,
    'Twitter' => 'https://twitter.com/intent/tweet?url=' . $url . '&text=' . $title,
    'LinkedIn' => 'https://www.linkedin.com/shareArticle?url=' . $url . '&title=' . $title,
    'Pinterest' => 'https://pinterest.com/pin/create/button/?url=' . $url . '&description=' . $title,
  );

  // Initialize the share buttons HTML
  $share_buttons = '<div class="social-share-buttons">';

  // Loop through the social networks and generate the share buttons HTML
  foreach ($social_networks as $network => $share_url) {
    $share_buttons .= '<a href="' . $share_url . '" target="_blank" rel="noopener">' . $network . '</a>';
  }

  // Close the share buttons HTML
  $share_buttons .= '</div>';

  // Append the share buttons HTML to the content
  $content .= $share_buttons;

  return $content;
}

// Add the social share buttons after the content
add_filter('the_content', 'add_social_share_buttons');

Understanding the Code

The code provided is a custom function that automatically adds social share buttons (for platforms such as Facebook, Twitter, LinkedIn, and Pinterest) to the content of your WordPress posts. Here’s a breakdown:

1. Getting the Current Page Details:
   The function retrieves the current page’s URL and title, which will be used in the sharing links.
2. Setting Up Social Media Platforms:
   A set of key-value pairs is established, where the keys are the social network names and the values are the respective sharing URLs.
3. Generating the Share Buttons:
   An HTML string is initialized to store the share buttons. The function then loops through each social network to create a share button for it.
4. Appending the Share Buttons to the Content:
   Finally, the social share buttons are appended to the content of the post.
5. Filter to Display the Buttons:
   The add_filter function is utilized to ensure that the social share buttons appear after the content of every post.

How to Implement This Code on Your WordPress Site

1. Backup Your Site:
   Always take a backup before making direct changes to your site. This ensures you have a fallback if anything goes wrong.
2. Access Your Theme’s Functions File:
   Navigate to your WordPress dashboard, then to Appearance > Theme Editor. Find the functions.php file of your active theme.
3. Insert the Code:
   Paste the provided code at the end of the functions.php file.
4. Save Changes:
   Click the “Update File” button to save the changes.
5. Review the Results:
   Visit one of your posts to see the social share buttons in action.

Customizing the Appearance

By default, the buttons will display as plain text links. If you wish to style them, you can add custom CSS styles. For example, to give each button a distinct color, you can add styles for the .social-share-buttons a class in your theme’s CSS.

Here is a simple and basic CSS code you can use as a starting point

/* Container Style */
.social-share-buttons {
  display: flex;
  justify-content: center; /* Center the buttons horizontally */
  margin-top: 20px; /* Add space above the button container */
  gap: 15px; /* Space between each button */
}

/* Individual Button Styles */
.social-share-buttons a {
  padding: 10px 15px; /* Button padding */
  text-decoration: none;/* Remove underline from the links */
  border-radius: 5px; /* Rounded corners for the buttons */
  font-weight: bold; /* Bold text for better visibility */
  transition: background-color 0.3s; /* Smooth background color transition for hover effect */
}

/* Color and Hover Styles for Each Social Network */
.social-share-buttons a[href*="facebook.com"] {
  background-color: #3b5998;
  color: white;
}

.social-share-buttons a[href*="facebook.com"]:hover {
  background-color: #2d4373;
}

.social-share-buttons a[href*="twitter.com"] {
  background-color: #1DA1F2;
  color: white;
}

.social-share-buttons a[href*="twitter.com"]:hover {
  background-color: #0c85d0;
}

.social-share-buttons a[href*="linkedin.com"] {
  background-color: #0077B5;
  color: white;
}

.social-share-buttons a[href*="linkedin.com"]:hover {
  background-color: #005582;
}

.social-share-buttons a[href*="pinterest.com"] {
  background-color: #BD081C;
  color: white;
}

.social-share-buttons a[href*="pinterest.com"]:hover {
  background-color: #8d0615;
}

Instructions for Implementation:

1. Navigate to Your Theme Customizer: From your WordPress dashboard, go to Appearance > Customize.
2. Access Additional CSS: In the Customizer, find the Additional CSS section.
3. Paste the CSS: Insert the provided CSS into the Additional CSS box.
4. Publish Changes: Click “Publish” to save and apply the styles.

This CSS will style your social share buttons with colors associated with each platform and make them stand out. Feel free to adjust the styles to better match your website’s design!

Conclusion

Integrating social share buttons without relying on plugins reduces bloat on your WordPress site and offers more control over customization. With this simple function, you’re just a few steps away from boosting your content’s visibility on social media platforms. Happy sharing!