The social sharing counter is a great way to show off your social media following and get more traffic to your website. In this tutorial, we will show you how to build a social sharing counter plugin for WordPress.
What You Will Need
- A WordPress site
- A text editor
- A social media account
Step 1: Create the Plugin Folder
First, you will need to create a new folder for your plugin. You can name it whatever you like, but we will call it “social-sharing-counter” for this example.
Step 2: Create the Plugin Files
Next, you will need to create two new files inside your plugin folder. The first file will be called “social-sharing-counter.php” and the second file will be called “README.txt”.
Step 3: Fill in the Plugin Header
Now, you will need to open your “social-sharing-counter.php” file in a text editor and add the following code:
<?php
/*
Plugin Name: Social Sharing Counter
Plugin URI: https://example.com/social-sharing-counter
Description: A simple social sharing counter plugin for WordPress.
Version: 1.0
Author: John Doe
Author URI: https://example.com
License: GPLv2 or later
*/
This code is known as the plugin header and it is required for all WordPress plugins. It tells WordPress what the plugin is called, who created it, and other important information.
Step 4: Create the Plugin Function
Next, you will need to add the following code to your “social-sharing-counter.php” file:
function social_sharing_counter() {
// your code goes here
}
add_action( ‘wp_footer’, ‘social_sharing_counter’ );
This code creates a new function called “social_sharing_counter” and tells WordPress to run this function when the “wp_footer” action is triggered.
Step 5: Get the Social Share Count
Now, you will need to add the following code to your “social_sharing_counter” function:
// Get the URL of the current page
$url = get_permalink();
// Get the share counts for Facebook, Twitter, and LinkedIn
$facebook_count = get_facebook_share_count( $url );
$twitter_count = get_twitter_share_count( $url );
$linkedin_count = get_linkedin_share_count( $url );
This code gets the URL of the current page and then gets the share counts for Facebook, Twitter, and LinkedIn.
Step 6: Display the Social Share Count
Finally, you will need to add the following code to your “social_sharing_counter” function:
// Display the social share counts
echo ‘
‘;
This code displays the social share counts in a div with the class “social-share-counts”.
Step 7: Activate the Plugin
Now that you have completed the plugin, you will need to activate it. You can do this by going to the “Plugins” page in your WordPress admin panel and clicking on the “Activate” link for your plugin.
Step 8: Customize the Output
You can now go to the “Appearance” -> “Editor” page in your WordPress admin panel and add the following code to your “style.css” file:
.social-share-counts {
text-align: center;
}
This code will center the social share counts on your web page.
Step 9: Add the Plugin to Your Site
Finally, you will need to add the social sharing counter to your WordPress site. You can do this by going to the “Appearance” -> “Widgets” page in your WordPress admin panel and adding the “Social Sharing Counter” widget to your sidebar.
Conclusion
That’s all there is to it! You should now have a working social sharing counter plugin for WordPress. If you have any questions or comments, please let us know.
In this final part, we’ll look at how to complete our plugin and add some finishing touches.
When a user clicks on one of the social sharing buttons, we need to update the social sharing counter. To do this, we’ll use AJAX.
First, we need to create a JavaScript file and enqueue it. We’ll name our file social-sharing-counter.js and place it in the /js directory.
Next, we’ll write the JavaScript code that will make an AJAX call to the WordPress backend. This code will go in the social-sharing-counter.js file:
jQuery(document).ready(function($){ $(‘.ssc-button’).on(‘click’, function(e){ e.preventDefault(); var post_id = $(this).data(‘post-id’); var network = $(this).data(‘network’); $.ajax({ url: ssc_ajax_url, type: ‘POST’, data: { action: ‘update_social_sharing_counter’, post_id: post_id, network: network }, success: function(response){ console.log(response); } }); }); });
In this code, we’re using jQuery to listen for when a user clicks on a social sharing button. When a button is clicked, we’re preventing the default action (which is to navigate to the social network’s website), and instead making an AJAX call to the WordPress backend.
In the AJAX call, we’re passing two pieces of data: the post ID and the social network. We’re also using the ssc_ajax_url variable, which we defined earlier in the plugin.
On the WordPress side, we need to process the AJAX request and update the social sharing counter. We’ll do this by adding the following code to our plugin:
add_action( ‘wp_ajax_update_social_sharing_counter’, ‘update_social_sharing_counter’ ); add_action( ‘wp_ajax_nopriv_update_social_sharing_counter’, ‘update_social_sharing_counter’ ); function update_social_sharing_counter() { $post_id = $_POST[‘post_id’]; $network = $_POST[‘network’]; $count = get_post_meta( $post_id, ‘_ssc_’.$network, true ); if( !$count ) { $count = 0; } $count++; update_post_meta( $post_id, ‘_ssc_’.$network, $count ); echo $count; wp_die(); }
This code consists of two functions. The first function ( update_social_sharing_counter() ) is the one that actually does the work of updating the social sharing counter. The second function ( wp_ajax_update_social_sharing_counter() ) is a WordPress hook that tells WordPress to run the first function when it receives an AJAX request.
In the update_social_sharing_counter() function, we first get the post ID and social network from the AJAX request. We then use the get_post_meta() function to get the current social sharing count for that post and social network.
If the social sharing count doesn’t exist yet (i.e. if this is the first time the post has been shared on that social network), we set the count to 0.
Next, we increment the social sharing count by 1, and then use the update_post_meta() function to save the new count. Finally, we echo the new social sharing count back to the browser.
Now that we’ve updated the social sharing counter, we need to update the social sharing buttons to reflect the new count. We’ll do this by adding the following code to our plugin:
add_filter( ‘the_content’, ‘update_social_sharing_buttons’ ); function update_social_sharing_buttons( $content ) { if( is_singular( ‘post’ ) ) { $post_id = get_the_ID(); $networks = array( ‘facebook’, ‘twitter’, ‘google-plus’ ); foreach( $networks as $network ) { $count = get_post_meta( $post_id, ‘_ssc_’.$network, true ); if( !$count ) { $count = 0; } $content = str_replace( ‘%’.$network.’_count%’, $count, $content ); } } return $content; }
In this code, we’re using the WordPress filter the_content to “hook into” the content of a post before it’s displayed on the screen. This allows us to search for our social sharing placeholder tags (e.g. %facebook_count%) and replace them with the actual social sharing counts.
We start by checking if the post is a singular post (i.e. if we’re on a single post page). If it is, we then loop through the social networks and get the social sharing count for each one.
For each social network, we then replace the social sharing placeholder tag with the actual social sharing count. Finally, we return the content so that it can be displayed on the screen.
And that’s it! We now have a working social sharing counter plugin.
Leave a Reply