Enter

Plugins / 3 min read

Social Share for Devs: WordPress Plugin Overview

A smartphone with multiple social media apps installed

Social Share for Devs is a free and straightforward plugin for social media sharing buttons.

WordPress plugins for social sharing streamline the process of sharing your website’s content on multiple social media platforms, leveraging social media’s ability to drive traffic and engagement. 

Social Share for Devs is designed to be as lightweight and dependency-free as possible, it doesn’t use jQuery, JavaScript, or any third-party libraries, instead relying on WordPress core functionalities and PHP.

Let’s explore how to use Social Share for Devs to quickly and easily display social media sharing buttons on your site.

Why Social Share for Devs?

The main inspiration for this plugin is that WordPress sites often struggle with load times due to heavy plugins. We at the White Canvas team wanted to provide a solution to adding social media sharing buttons without adding unnecessary weight to the site.

Since social sharing is fundamental for website engagement, our goal was clear: crafting a lightweight yet useful plugin for every WordPress site.

Supported Social Networks

Deciding on which social networks to include was crucial. The plugin supports:

  • Facebook
  • Twitter (now X)
  • LinkedIn
  • Pinterest
  • Email
  • WhatsApp

Each platform was chosen for its popularity and the value it brings to site owners in various niches.

No Dependencies, No Problem

One of the unique features of Social Share for Devs is its independence from jQuery, JavaScript, and any third-party libraries. This was a challenge but also an interesting test for the team.

By using PHP and leveraging WordPress’s core functionalities, we kept the plugin light and fast while delivering its intended function.

A web browser displaying various developer tools on a WordPress site

Customization Options

The plugin allows users to customize button types, display options (icon only or icon + name), and even the button’s CSS class. This ensures it seamlessly integrates with any theme, device, or browser.

Technical Details

At the heart of the plugin lies its PHP backbone. Structured around the MVC pattern, it ensures a separation of concerns and ease of maintenance.

As for the assets, the plugin comes with SVG icons for each social network. This ensures sharp visuals at any resolution without additional overhead. CSS and no JavaScript are compiled using native tools to ensure compatibility and speed.

How to Use Social Share for Devs

Go to Plugins > Add New Plugin and search for “Social Share for Devs”. Install it and activate it.

Once activated, click Social Share for Devs on the dashboard’s sidebar.

The WordPress admin dashboard, highlighting the Social Share for Devs

The interface is very simple and focuses only on the features.

Settings for the Social Share for Devs WordPress plugin

The settings are the following:

  • Choosing which buttons to display. The options are Facebook, X, LinkedIn, WhatsApp, Pinterest, and Email.
  • The shape of the buttons. The options are rounded, square, circle, and custom.
  • A custom class for the buttons, allowing you to add custom rules for the buttons.

After selecting your preferred settings and clicking on Save Changes, all you have to do is add the following shortcode to your page or post:

wc-ssb
Adding the shortcode <div class="wc-social-share-buttons-social"><a class="wc-social-share-circle-link wc-social-share-buttons-facebook " href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwcanvas.com%2Fresource%2Fsocial-share-for-devs-wordpress-plugin-overview%2F" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwcanvas.com%2Fresource%2Fsocial-share-for-devs-wordpress-plugin-overview%2F','popup','width=600,height=600,scrollbars=no,resizable=no'); return false;"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759H734V905H479V609h255V391q0-186 104-288.5T1115 0q147 0 228 12z" fill="#ffffff" class="fill-000000"></path></svg></a><a class="wc-social-share-circle-link wc-social-share-buttons-twitter " href="https://twitter.com/intent/tweet?text=Social%20Share%20for%20Devs%3A%20WordPress%20Plugin%20Overview&url=https%3A%2F%2Fwcanvas.com%2Fresource%2Fsocial-share-for-devs-wordpress-plugin-overview%2F&via=White Canvas" target="popup" onclick="window.open('https://twitter.com/intent/tweet?text=Social%20Share%20for%20Devs%3A%20WordPress%20Plugin%20Overview&url=https%3A%2F%2Fwcanvas.com%2Fresource%2Fsocial-share-for-devs-wordpress-plugin-overview%2F&via=White Canvas','popup','width=600,height=600,scrollbars=no,resizable=no'); return false;"><svg width="1684" height="1684" viewBox="0 0 1684 1684" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1280.1 157.875H1512.31L1005.14 737.408L1601.77 1526.12H1134.73L768.654 1047.9L350.285 1526.12H117.749L660.115 906.137L88.147 157.875H567.034L897.585 594.991L1280.1 157.875ZM1198.53 1387.33H1327.14L496.977 289.438H358.837L1198.53 1387.33Z" fill="white"/>
</svg>
</a><a class="wc-social-share-circle-link wc-social-share-buttons-linkedin " href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwcanvas.com%2Fresource%2Fsocial-share-for-devs-wordpress-plugin-overview%2F" target="popup" onclick="window.open('https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwcanvas.com%2Fresource%2Fsocial-share-for-devs-wordpress-plugin-overview%2F','popup','width=600,height=600,scrollbars=no,resizable=no'); return false;"><svg contentscripttype="text/ecmascript" viewBox="0 0 1536 2048" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M349 753v991H19V753h330zm21-306c.667 48.667-16.167 89.333-50.5 122S240 618 184 618h-2c-54.667 0-98.667-16.333-132-49S0 495.667 0 447c0-49.333 17.167-90.167 51.5-122.5S130.667 276 186 276s99.667 16.167 133 48.5 50.333 73.167 51 122.5zm1166 729v568h-329v-530c0-70-13.5-124.833-40.5-164.5S1097.333 990 1040 990c-42 0-77.167 11.5-105.5 34.5S885 1076 871 1110c-7.333 20-11 47-11 81v553H531c1.333-266 2-481.667 2-647s-.333-264-1-296l-1-48h329v144h-2c13.333-21.333 27-40 41-56s32.833-33.333 56.5-52 52.667-33.167 87-43.5c34.333-10.333 72.5-15.5 114.5-15.5 114 0 205.667 37.833 275 113.5s104 186.5 104 332.5z" fill="#ffffff" class="fill-000000"></path></svg></a><a class="wc-social-share-circle-link wc-social-share-buttons-whatsapp " href="https://api.whatsapp.com/send?text=Social%20Share%20for%20Devs%3A%20WordPress%20Plugin%20Overview https%3A%2F%2Fwcanvas.com%2Fresource%2Fsocial-share-for-devs-wordpress-plugin-overview%2F" target="popup" onclick="window.open('https://api.whatsapp.com/send?text=Social%20Share%20for%20Devs%3A%20WordPress%20Plugin%20Overview https%3A%2F%2Fwcanvas.com%2Fresource%2Fsocial-share-for-devs-wordpress-plugin-overview%2F','popup','width=600,height=600,scrollbars=no,resizable=no'); return false;"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1113 974q13 0 97.5 44t89.5 53q2 5 2 15 0 33-17 76-16 39-71 65.5t-102 26.5q-57 0-190-62-98-45-170-118T604 889q-72-107-71-194v-8q3-91 74-158 24-22 52-22 6 0 18 1.5t19 1.5q19 0 26.5 6.5T738 544q8 20 33 88t25 75q0 21-34.5 57.5T727 811q0 7 5 15 34 73 102 137 56 53 151 101 12 7 22 7 15 0 54-48.5t52-48.5zm-203 530q127 0 243.5-50t200.5-134 134-200.5 50-243.5-50-243.5T1354 432t-200.5-134T910 248t-243.5 50T466 432 332 632.5 282 876q0 203 120 368l-79 233 242-77q158 104 345 104zm0-1382q153 0 292.5 60T1443 343t161 240.5 60 292.5-60 292.5-161 240.5-240.5 161-292.5 60q-195 0-365-94l-417 134 136-405q-108-178-108-389 0-153 60-292.5T377 343t240.5-161T910 122z" fill="#ffffff" class="fill-000000"></path></svg></a><a class="wc-social-share-circle-link wc-social-share-buttons-email " href="mailto:?subject=Social%20Share%20for%20Devs%3A%20WordPress%20Plugin%20Overview&body=Check out this site: https%3A%2F%2Fwcanvas.com%2Fresource%2Fsocial-share-for-devs-wordpress-plugin-overview%2F"><svg contentscripttype="text/ecmascript" viewBox="0 0 1792 2048" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M1792 838v794c0 44-15.667 81.667-47 113s-69 47-113 47H160c-44 0-81.667-15.667-113-47s-47-69-47-113V838c29.333 32.667 63 61.667 101 87 241.333 164 407 279 497 345 38 28 68.833 49.833 92.5 65.5s55.167 31.667 94.5 48 76 24.5 110 24.5h2c34 0 70.667-8.167 110-24.5s70.833-32.333 94.5-48 54.5-37.5 92.5-65.5c113.333-82 279.333-197 498-345 38-26 71.333-55 100-87zm0-294c0 52.667-16.333 103-49 151s-73.333 89-122 123c-250.667 174-406.667 282.333-468 325-6.667 4.667-20.833 14.833-42.5 30.5s-39.667 28.333-54 38-31.667 20.5-52 32.5-39.5 21-57.5 27-34.667 9-50 9h-2c-15.333 0-32-3-50-9s-37.167-15-57.5-27-37.667-22.833-52-32.5-32.333-22.333-54-38-35.833-25.833-42.5-30.5c-60.667-42.667-148-103.5-262-182.5S194.667 834 172 818c-41.333-28-80.333-66.5-117-115.5S0 608 0 566c0-52 13.833-95.333 41.5-130s67.167-52 118.5-52h1472c43.333 0 80.833 15.667 112.5 47s47.5 69 47.5 113z" fill="#ffffff" class="fill-000000"></path></svg></a></div> to a WordPress page to enable social media sharing buttons

This is the final result.

Social media sharing buttons displayed with the Social Share for Devs plugin for WordPress

Download and Contribute

Social Share for Devs is open for download and contributions. We welcome developers and users to provide feedback and join in enhancing its capabilities.

Final Thoughts

Building the Social Share for Devs plugin was a journey of embracing the limitations of not using JavaScript, jQuery, or third-party libraries to foster creativity and function.

By focusing on performance, customization, and user experience, the White Canvas team hopes to offer a tool that not only serves its purpose but elevates the WordPress sites it’s installed in by providing a lightweight solution to the modern need for social sharing buttons.

We hope it can be helpful for your site.

If you found this post useful, read our blog for more WordPress insights and guides!