Webberhub.com Logo
webberhub.com Intro

Building WordPress Social Media Sharing Plugin


Building WordPress Social Media Sharing Plugin

This post guide you to develop your own WordPress social media sharing plugin step by step. WebberHub tutorials provide best WordPress coding supports.



If you are like to build and use your own WordPress plugin and use it for your WordPress project, then this tutorial for you. In this tutorial I am going to explain how to develop your own social media sharing WordPress plugin by yourself.

So, I would like to name this social media sharing plugin as “WH Social Share“. Let’s start to make WH Social Share plugin.

This social media sharing plugin give an opportunity to your website visitors to share your website content easily on social media websites. By doing social media sharing, it helps to increase the overall awareness and traffic of your website.

There are lots of social media sharing plugin are available for free to use. But, by developing this social media sharing plugin by yourself, you can include it to many more functions you need. And also can get lots of fun as well as lots of knowledge about WordPress plugin development.

Why you’re content need social media sharing buttons?

Considering user response about content in the internet, it reported that 75% of users consider reading content based on their friends’ recommendations.

By using social media sharing button with your content, you give your website users the ability to share your content with their own networks of friends.

So, There are more than 40 billion shares are clicked each day on the internet, therefore, by adding social media sharing buttons for your WordPress website, That will be the first step of helping to marketing and ranking your website.

Make Directory and Files for Plugin

For making tour own plugin you need to make directory for that plugin inside the folder of your WordPress installation plugin directory (in my example I create directory called “wh-social-share”).

Then you need to make following file inside the folder of “wh-social-share“.

  • wh-social-share.php
  • style.css

In the wh-social-share.php file add the following comment in the top of file to make the plugin installable.

/*
Plugin Name: WH Social Share
Plugin URI: https://webberhub.com
Description: Display Social media sharing button in your every single posts.
Version: 1.0.0
Author: Nirosh Webber
*/

Admin Menu Item Creating

When developing a plugin it need a control option page for admin. By using that admin can select what buttons for which social media sites should be displayed.

For creating a plugin options page first need to create a menu item to which the options page will be attached to. Following is the code for creating an admin menu item under Settings top level menu item.

function wh_social_share_menu_item()
{
add_submenu_page(“options-general.php”, “WH Social Share”, “WH Social Share”, “manage_options”, “wh-social-share”, “social_share_page”);
}

add_action(“admin_menu”, “wh_social_share_menu_item”);

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

Following is the menu item look inside the admin menu.

WordPress menu item look inside the admin menu.

 

Creating an Admin Options Page

For creating admin option page need to create wh_social_share_page function for displaying the options page content.

Creating an Admin Options Page

 

Above function add a section called wh_social_share_config_section, and registering the settings as wh-social-share.

Now we can coding for displaying the section and their option fields.

function wh_social_share_settings()
{
	add_settings_section("wh_social_share_config_section", "", null, "wh-social-share");

	add_settings_field("social-share-facebook", "Display Facebook button?", "social_share_facebook_checkbox", "wh-social-share", "wh_social_share_config_section");
	add_settings_field("social-share-twitter", "Display Twitter button?", "social_share_twitter_checkbox", "wh-social-share", "wh_social_share_config_section");
	add_settings_field("social-share-reddit", "Display Reddit button?", "social_share_reddit_checkbox", "wh-social-share", "wh_social_share_config_section");

	register_setting("wh_social_share_config_section", "social-share-facebook");
	register_setting("wh_social_share_config_section", "social-share-twitter");
	register_setting("wh_social_share_config_section", "social-share-reddit");
}

By using above code add option to admin for selecting required social media button to show in the post section.

Following is the admin option page look of our WH Social Media Sharing plugin.

displaying the section and their option fields

 

Displaying the Social Sharing Buttons on Post

To display social sharing button in your every web post. We need to filter the post content and add social share button for that content.

Following is the code for how to filter post content and display social media buttons.

Building WordPress Social Media Sharing Plugin

This is the way of working above code. First we are adding a wrapper for our social sharing links. After that, retrieving the complete URL of the current post which need to share to the social media sites.

Then, check which button need to display in the post content and finally, adding the current post URL to the end of the social sharing links of the related social media sites.

Following is the post view of after compliantly adding above codes in your plugin.

Displaying the Social Sharing Buttons on Post

 

Add Styles for Social Media Buttons

Before adding CSS style to Social media buttons, need to add style.css file to front end of your website. By adding following code, you can attach style.css file to front end your website.

function wh_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”, “wh_social_share_style”);

Following CSS styles you can add for your plugin style.css file and can see it effect on the social media button. So, you can change these style as you need.

.wh_social_wrapper div{ float: left; margin-right: 10px; }
.wh_social_wrapper div.share-to{ padding: 5px; font-weight: bold; }
.wh_social_wrapper div a{ border: none; text-decoration: none !important; }
.clear{ clear: left;}
.wh_social_wrapper div.facebook{ background-color: #3a5795; padding: 5px; }
.wh_social_wrapper div.twitter{ background-color: #55acee; padding: 5px; }
.wh_social_wrapper div.reddit{ background-color: #ACD4FC; padding: 5px; }
.wh_social_wrapper div.facebook a{ color: white; }
.wh_social_wrapper div.twitter a{ color: white; }
.wh_social_wrapper div.reddit a{ color: white; }

Following show the social media sharing icons after adding styles.

Following show the social media sharing icons after adding styles.

Conclusion

In this post, we discussed the way of creating WordPress plugin for social media sharing of your website post. We designed plugin add social media icon after the post content.

Here, we mainly discussed about things such as Make Directory and Files for Plugin, Admin Menu Item Creating, Creating an Admin Options Page, Displaying the Social Sharing Buttons on Post and Add Styles for Social Media Buttons.

Here, you can download full plugin developed in this article >> WH Social Sharing Plugin Download

So, If you need to basic knowledge about designing a WordPress website you can use this complete tutorial of Complete Guide to Create Website using WordPress by Yourself

If you don’t have any previous knowledge about WordPress plugin creating, you can read Guide to develop premium WordPress plugin to earn tons of Money tutorial.


Related Posts..