Build Your Own BS Social Sharing Plugin – WP

Introduction

If you’re already familiar with WordPress, then you know that in the WordPress repository you can find plenty of plugins that you can download, install, and finish the job. But why not create a plugin by your own? This tutorial will show you basic steps on how to build your own BS Social Sharing Plugin for WordPress.

You’ll see It’s not that difficult, even if you are a beginner. You just need to have basic knowledge of PHP, MYSQL, HTML, CSS and jQuery.

Step 1: Create BS Social Sharing Plugin Directory and Files

Before we begin, it is necessary to check if you have successfully linked to the Bootstrap CDN or bundled the files with your WordPress theme. In case you don’t know how to do that, don’t worry and check this tutorial.

First of all, you’ll need to navigate to WordPress plugins folder (/wp-content/plugins). Then create a directory called bs-social-share, or call it as you wish, and the following files in it:

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

Open the file bs-social-share.php and paste the following information in it (this will make the plugin installable):

<?php
   /*
   Plugin Name: Your Plugin Name
   Plugin URI: http://your-plugin.com
   Description: Your Plugin Description
   Version: 1.0.0
   Author: Your Name
   Author URI: http://your-website.com
   License: GPL
   */
?>

Step 2: Create Admin Menu Item

When creating plugin, user must be able to select which social button want to display. To enable this, we need to create an options page, but first of all we’ll create a menu item in which the options page will be displayed (detailed explanations):

add_action("admin_menu", "bs_social_share_menu_item");

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

We are adding menu item inside the admin_menu action using add_submenu_page. bs_social_share_page callback function will display the content of the options page.

Step 3: Create an BS Social Sharing Options Page

Next, we’ll display options page content through bs_social_share_page function. Basically, we are adding the bs_social_share_config_section and register the settings as bs-social-share:

function bs_social_share_page() {
   ?>
     <div class="">
       <h1> Bootstrap Social Sharing Options</h1>

       <form method="post" action="options.php">
       <?php
           settings_fields("bs_social_share_config_section");

           do_settings_sections("bs-social-share");

           submit_button(); 
       ?>
       </form>
    </div>
  <?php
}

Step 4: Display Option Fields

Through the bs_social_share_settings function users will be able to display Facebook, Twitter, LinkedIn and GPlus share buttons.

add_action("admin_init", "bs_social_share_settings");
function bs_social_share_settings() {
    add_settings_section("bs_social_share_config_section", "", null, "social-share");

    add_settings_field("bs-social-share-facebook", "Display Facebook share button?", "bs_social_share_facebook_checkbox", "bs-social-share", "bs_social_share_config_section");
    add_settings_field("bs-social-share-twitter", "Display Twitter share button?", "bs_social_share_twitter_checkbox", "bs-social-share", "bs_social_share_config_section");
    add_settings_field("bs-social-share-linkedin", "Display LinkedIn share button?", "bs_social_share_linkedin_checkbox", "bs-social-share", "bs_social_share_config_section");
    add_settings_field("bs-social-share-googleplus", "Display GPlus share button?", "bs_social_share_googleplus_checkbox", "bs-social-share", "bs_social_share_config_section");

    register_setting("bs_social_share_config_section", "bs-social-share-facebook");
    register_setting("bs_social_share_config_section", "bs-social-share-twitter");
    register_setting("bs_social_share_config_section", "bs-social-share-linkedin");
    register_setting("bs_social_share_config_section", "bs-social-share-googleplus");
}

function bs_social_share_facebook_checkbox() { 
    ?>
        <input type="checkbox" name="bs-social-share-facebook" value="1" <?php checked(1, get_option('bs-social-share-facebook'), true); ?> >
    <?php
}
function bs_social_share_twitter_checkbox() { 
    ?>
        <input type="checkbox" name="bs-social-share-twitter" value="1" <?php checked(1, get_option('bs-social-share-twitter'), true); ?> >
    <?php
}
function bs_social_share_linkedin_checkbox() { 
    ?>
       <input type="checkbox" name="bs-social-share-linkedin" value="1" <?php checked(1, get_option('bs-social-share-linkedin'), true); ?> > 
    <?php
}
function bs_social_share_googleplus_checkbox() { 
    ?>
        <input type="checkbox" name="bs-social-share-googleplus" value="1" <?php checked(1, get_option('bs-social-share-googleplus'), true); ?> > 
    <?php
}

Options page should looks like this:

Step 5: Display the BS Social Sharing Plugin buttons

In our example we’ll display social sharing buttons after every post as links, but you can show them as you like. To do this, we need to use the_content filter.

add_filter("the_content", "add_bs_social_share_lins");

function add_social_share_icons($content) {

    $html = "<div class='row social-share-wrapper'><div class='col-12 mt-3 mb-3'>";

    global $post;

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

    if(get_option("bs-social-share-facebook") == 1) {
        $html = $html . '<a class="facebook btn btn-outline-primary p-2 m-2" href='http://www.facebook.com/sharer.php?u=" . $url . "'><i class="fab fa-facebook-f"></i> Facebook</a>';
    }

    if(get_option("bs-social-share-twitter") == 1) {
        $html = $html . "<a class='twitter btn btn-info-primary p-2 m-2' href='https://twitter.com/share?url=" . $url . "'><i class='fab fa-twitter'></i> Twitter</a>";
    }

    if(get_option("bs-social-share-linkedin") == 1) {
        $html = $html . "<a class='linkedin btn btn-outline-primary p-2 mr-2' href='https://www.linkedin.com/shareArticle?url=" . $url . "'><i class='fab fa-linkedin-in'></i> LinkedIn</a>";
    }

    if(get_option("bs-social-share-googleplus") == 1) {
        $html = $html . "<a class='googleplus btn btn-outline-danger p-2 mr-2' target='_blank' href='https://plusone.google.com/_/+1/confirm?hl=en&url=$url'><i class='fab fa-google-plus-g'></i> GPlus</a>";
    }

    $html = $html . "</div></div>";

    return $content = $content . $html;
}

Style BS Social Sharing Plugin buttons

If you want, you can add some fancy style to your links/buttons. Enqueue style.css file:

add_action("wp_enqueue_scripts", "bs_social_share_style");

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

        wp_register_script('custom-script', plugins_url( 'custom.js', __FILE__ ), array( 'jquery' ));
        wp_enqueue_script( 'custom-script' );
    }
}

As you can see we’ve enqueue custom.js fajl. Feel free to add some custom JQuery code.

That’s it! You’ve just created your BS Social Sharing Plugin. Don’t stop here, experiment and  add some new sharing options…