WordPress
Article

Building Your Own Social Sharing Plugin for WordPress

By Narayan Prusty

A social sharing plugin allows your website visitors to share your website content easily on social media sites. This helps to increase the overall awareness of your website.

There are already dozens of existing social sharing plugins that you can just install and be done with it, but where’s the fun in that?

In this tutorial, I’ll show you how to build your very own social sharing plugin for WordPress from scratch, which can add social sharing buttons below every post. Users can share the post simply by clicking on the desired social media site button.

Why Do You Need Social Media Share Buttons?

It’s often reported that more than 80% of users consider reading content based on their friends’ recommendations. With social sharing, you give users the ability to share your content with their own networks of friends.

More than 40 billion shares are clicked each day on the web, therefore adding social sharing buttons on your WordPress website is first step to helping to market your site.

Plugin Directory and Files

To kick things off, create a directory called social-share and create the following files in it:

--social-share
	-social-share.php
	-style.css

In the social-share.php file add the following text to make the plugin installable.

<?php

/*
Plugin Name: Social Share
Plugin URI: http://sitepoint.com
Description: Displays Social Share icons below every post
Version: 1.0
Author: Narayan Prusty
*/

Creating a Admin Menu Item

We need to create a options page for our plugin where user can select buttons for which social media sites should be displayed. For creating a options page first we need to create a menu item to which the options page will be attached to.

Here is the code to create a admin menu item under Settings top level menu item.

function social_share_menu_item()
{
  add_submenu_page("options-general.php", "Social Share", "Social Share", "manage_options", "social-share", "social_share_page"); 
}

add_action("admin_menu", "social_share_menu_item");

Here we’re adding a menu item using add_submenu_page which is indeed called inside the admin_menu action. social_share_page is the callback function which needs to display the contents of the options page.

Here is what our menu item looks like:

WordPress Settings

Creating an Options Page

Let’s code the social_share_page function to display the options page content.

function social_share_page()
{
   ?>
      <div class="wrap">
         <h1>Social Sharing Options</h1>
 
         <form method="post" action="options.php">
            <?php
               settings_fields("social_share_config_section");
 
               do_settings_sections("social-share");
                
               submit_button(); 
            ?>
         </form>
      </div>
   <?php
}

Here we’re adding a section named social_share_config_section, and registering the settings as social-share.

Now lets display the section and its option fields.

function social_share_settings()
{
    add_settings_section("social_share_config_section", "", null, "social-share");
 
    add_settings_field("social-share-facebook", "Do you want to display Facebook share button?", "social_share_facebook_checkbox", "social-share", "social_share_config_section");
    add_settings_field("social-share-twitter", "Do you want to display Twitter share button?", "social_share_twitter_checkbox", "social-share", "social_share_config_section");
    add_settings_field("social-share-linkedin", "Do you want to display LinkedIn share button?", "social_share_linkedin_checkbox", "social-share", "social_share_config_section");
    add_settings_field("social-share-reddit", "Do you want to display Reddit share button?", "social_share_reddit_checkbox", "social-share", "social_share_config_section");
 
    register_setting("social_share_config_section", "social-share-facebook");
    register_setting("social_share_config_section", "social-share-twitter");
    register_setting("social_share_config_section", "social-share-linkedin");
    register_setting("social_share_config_section", "social-share-reddit");
}
 
function social_share_facebook_checkbox()
{  
   ?>
        <input type="checkbox" name="social-share-facebook" value="1" <?php checked(1, get_option('social-share-facebook'), true); ?> /> Check for Yes
   <?php
}

function social_share_twitter_checkbox()
{  
   ?>
        <input type="checkbox" name="social-share-twitter" value="1" <?php checked(1, get_option('social-share-twitter'), true); ?> /> Check for Yes
   <?php
}

function social_share_linkedin_checkbox()
{  
   ?>
        <input type="checkbox" name="social-share-linkedin" value="1" <?php checked(1, get_option('social-share-linkedin'), true); ?> /> Check for Yes
   <?php
}

function social_share_reddit_checkbox()
{  
   ?>
        <input type="checkbox" name="social-share-reddit" value="1" <?php checked(1, get_option('social-share-reddit'), true); ?> /> Check for Yes
   <?php
}
 
add_action("admin_init", "social_share_settings");

Here we’re letting the user to choose from Facebook, Twitter, LinkedIn and Reddit sharing buttons. We are providing a checkbox interface to allow administrators to choose which buttons to display. You can expand the list to support more social media sites as needed.

Here is what our final options page looks like:

WordPress Social Sharing Options

Displaying the Social Sharing Buttons

To display social sharing buttons below every post, we need to filter the content of every post before it’s sent out. We need to use the the_content filter to add social sharing buttons to the end of the posts.

Here is code on how to filter post content and display social media buttons.

function add_social_share_icons($content)
{
    $html = "<div class='social-share-wrapper'><div class='share-on'>Share on: </div>";

    global $post;

    $url = get_permalink($post->ID);
    $url = esc_url($url);

    if(get_option("social-share-facebook") == 1)
    {
        $html = $html . "<div class='facebook'><a target='_blank' href='http://www.facebook.com/sharer.php?u=" . $url . "'>Facebook</a></div>";
    }

    if(get_option("social-share-twitter") == 1)
    {
        $html = $html . "<div class='twitter'><a target='_blank' href='https://twitter.com/share?url=" . $url . "'>Twitter</a></div>";
    }

    if(get_option("social-share-linkedin") == 1)
    {
        $html = $html . "<div class='linkedin'><a target='_blank' href='http://www.linkedin.com/shareArticle?url=" . $url . "'>LinkedIn</a></div>";
    }

    if(get_option("social-share-reddit") == 1)
    {
        $html = $html . "<div class='reddit'><a target='_blank' href='http://reddit.com/submit?url=" . $url . "'>Reddit</a></div>";
    }

    $html = $html . "<div class='clear'></div></div>";

    return $content = $content . $html;
}

add_filter("the_content", "add_social_share_icons");

Here’s how this code works:

  • First we are adding a wrapper for our social media sharing links.
  • Then, we are retrieving the complete URL of the current post which will be shared on the social media sites. We are also escaping the URL using WordPress provided esc_url function.
  • Then we are checking which buttons users want to display and add the respective button markup to the post content.
  • Finally, we’re adding the current post URL to the end of the social sharing links of the respective social media sites.

Here is how our social media buttons looks on the front-end below every post:

Social Sharing WordPress

Styling the Social Media Buttons

Let’s attach style.css on the front-end inside which we will place the code for styling the buttons. Here’s the code enqueue the style.css file.

function social_share_style() 
{
    wp_register_style("social-share-style-file", plugin_dir_url(__FILE__) . "style.css");
    wp_enqueue_style("social-share-style-file");
}

add_action("wp_enqueue_scripts", "social_share_style");

Here’s the CSS code for styling the buttons:

.social-share-wrapper div
{
	float: left;
	margin-right: 10px;
}

.social-share-wrapper div.share-on
{
	padding: 5px;
	font-weight: bold;
}

.social-share-wrapper div.facebook
{
	background-color: #3a5795;
	padding: 5px;
}

.social-share-wrapper div.facebook a
{
	color: white;
}

.social-share-wrapper div.twitter
{
	background-color: #55acee;
	padding: 5px;
}

.social-share-wrapper div.twitter a
{
	color: white;
}

.social-share-wrapper div.linkedin
{
	background-color: #007bb6;
	padding: 5px;
}

.social-share-wrapper div.linkedin a
{
	color: white;
}

.social-share-wrapper div.reddit
{
	background-color: #ACD4FC;
	padding: 5px;
}

.social-share-wrapper div.reddit a
{
	color: white;
}

.social-share-wrapper div a
{
	text-decoration: none;
	border: none;
}

.clear
{
	clear: left;
}

Simple Social Sharing Buttons WordPress CSS

Conclusion

In this article I’ve shown you how to easily build your own a social media sharing plugin. You can now go ahead and expand on this to add buttons for more social media sites and also display the number of shares along with the buttons. Please share your experience with your own plugins below.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Comments
tbournewd

Hi, thanks for a great article.
I'm a WP noob, how can I show the Social Share above the post ? You show how to display it below, but not above.

narayanprusty

Replace

return $content = $content . $html;

with

return $content =  $html . $content;
tbournewd

Hi,

That's exactly what I thought, but it doesn't seem to work..

narayanprusty

Just tried It works for me. May be some plugin is stripping the HTML from post for your site.

tbournewd

Thanks, it was actually my theme, for some reason, but I managed to fix it. Thanks again for a great tutorial.

Chrismitchell

Great article. It is very helpful smile

saiful

I have a WordPress site and this article is very helpful, thank you.

abul

Thank you for your very very important information and sharing plugin for wordPress idea, really great article and very helpful, thanks again.

Regards
abul

Infi_Chandru

I need to display social sharing in my footer and it won't display in m post and page. For example your site footer . Plz help me out

chrisrcooper

Good stuff to get started rolling your own here. Take it a step further by integrating Font Awesome for social media icons (it's quick: add their CDN link code then drop the elements into the HTML as needed), for example:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Loads the library

<i class="fa fa-twitter"></i>

Would generate a nice Twitter icon without the use of an image and will allow you to style it up with stacked icons, colors, sizes, etc.

Take even a step further by integrating some call to actions with interactive toolbars that might slide in our out to emphasize your social media access. Hello Bar is well known for this. There's some other solutions and even a way to DIY your own Hello Bar if you're into rolling your own.

Ahmed_Elemam

I have the same problem of not appearing beside "share on" how do you fix this please?

Ahmed_Elemam

Thank you very much for this article smile
What about the idea of auto-posting????? please help?
what about the idea of choosing some people (friends) only or groups?? can we do this please help?

VirtuallyMarisa1

I'm not sure why, but the wp-admin panel under settings > social share is blank. :frowning: I cannot figure out that I'm doing anything wrong.

VirtuallyMarisa1

Problem with caching or something. It's there now. Silly Me.:flushed:

seoitdn2908

.Hi, thanks for a great article.
That's exactly what I thought, but it doesn't seem to work.

espo74

This was a great--super easy to implement and style. One issue, recently noticed that LinkedIn has stopped working?! Google+ and Facebook will pull the OG information but Linked in only populates with a generic article link--no featured image, no excerpt, no title...

Any ideas? Google+ and Facebook works as do the other options...just not LinkedIn.

AjayT

Hi great tutorial.. I have a question what if i want to add option where i can select where to show added social share buttons like only on posts, pages, homepage, categories, excerpts and archive etc.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in WordPress, once a week, for free.