Have you ever used Jetpack Sharing module? This is a great module that displays sharing buttons at your will with enough settings to customise which social media you want to use and how will the buttons be displayed. In this tutorial we will create the sharing functionality similar to Jetpack.
This is another article on using OOP when creating solutions, themes or plugins for WordPress. The code from this tutorial is also available to be used in themes, plugins or any other custom WordPress solution.
This is not Jetpack
Before we begin coding I want to point out that this is not Jetpack and the code we are creating will not be something copied from Jetpack. The logic behind the display of a social media sharing pop-up is similar but not so detailed as it is in Jetpack.
We will not create a settings panel, drag and drop features or similar. We will only create a simple sharing functionality using object oriented programming.
If you are a developer and you want to learn more, I would recommend that you dig into the Jetpack code and see how they have done that.
Sharing Buttons
We will first add our social sharing buttons to our content. Add this to your code:
Here we are starting the buffer and after we did print some html we get the contents from the buffer and append them to the variable $content which will contain all the other contents from the post or page. After that we end the buffer, clean it, close it and then return the variable $content.
This is quite simple. A more complex solution would check if the user wants to use a social media for sharing and if not we would not display that link. This is a more simpler approach because the purpose of this article is to show you how you can easily share your content using OOP.
Add some Simple Styling to our Sharing Buttons
You can add this styles to a separate file and enqueue it which is the preferred way or you can even just paste that styles inside our function where we do render our sharing buttons. This will be up to you, but if you want to do it the right way I would recommend you to read the WordPress Theme Handbook.
This are the style definitions:
Add JavaScript for Sharing Pop-ups
In the same manner as we have added CSS we will also add JavaScript. If you have chosen to use WordPress API then the only difference is the name of the enqueue function and the arguments we pass into those function. I would recommend to enqueue this script in the footer. If you have decided to add the script in the content function then add it at the bottom of the function before the opening <?php tag.
In this script we are adding a trigger function on our links/buttons for the click event. When the visitor clicks on our sharing buttons, the default behaviour will be prevented. After that we will get the value of our attribute href and use that in the window.open method.
The value of our href attribute is the actual permalink to our content with the query string my_share. If the JavaScript is disabled, the button will go to our content with that query string and it will generate the sharing dialog of our social media.
Sharing Functions
Now fun can begin 🙂
Before we can redirect our visitor to the appropriate sharing dialog we will need to check if our query string does exist. Here is the code that will be used for that:
This function uses another function which is used to choose the right social sharing class. Those classes will be made after all this logic has been explained. We have hooked this function to the action template_redirect which is used when choosing the right template or file to render. By using that action we are sure that the redirection will happen before any template has been displayed.
Function to Instantiate the Appropriate Sharing Class
We will have an associative array of all our implemented sharing classes with their query strings. By providing the query string we will check if such sharing class exists. If that sharing class exists, we will dynamically instantiate the chosen sharing class thereby creating a sharing object. The last thing will be to invoke the method share.
This is the code:
Sharing Classes
The fun begun in the last chapter. Now it will be really thrilling! 🙂
Before we create our two sharing classes that do exist in our function my_share_social, we will need to create an abstract class that will contain almost everything so that our extended sharing classes are really small in code and easily maintainable.
The Abstract Class WordPressShare
First things first. We will create our attributes and our constructor method. Add this code:
The attribute $text is used to have the text that will be rendered in the sharing dialog. Most of the time that is the actual title of our content.
The attribute $url is the url to our content that will be shared next to our text.
The attribute $share_url is the social media sharing url to which we will redirect our visitor.
The attribute $post is the variable that will contain the post object from which we can then easily get any information we need.
In the constructor method we are getting the post object by using WordPress API function get_post. After that, if the attribute $post is not null anymore, then we are getting the meta we need.
Let’s define our get_meta method:
We are here simply assigning the title from our post object to our attribute $text and we are also getting the permalink to our content by using the WordPress API function get_permalink.
Now we need to define our share method that will be called in our my_share_social function. Add the last part of our abstract class definiton:
In the bottom part of this definition the method share is calling another method get_link which is still empty in our abstract class. If that link does return a link, our method share will redirect our visitor to that link.
There are also two other methods get_url and get_text that can be then used in our sharing classes to easily get url and text that are formatted as they have to be. The first method return the raw url and the second method return and url encoded text that is safe to pass in the url.
Now it’s the time to define our two sharing classes.
Facebook Sharing Class
Twitter Sharing Class
In both classes we have defined a fixed $share_url that is specific to each social media. The second part of those classes is the method get_url. In that method we are using our $share_url with the appropriate query strings that need to be passed to those links.
Conclusion
In this tutorial we have created a really simple OOP sharing classes that are using together with some JavaScript and HTML to create a sharing experience quite similar to Jetpack. Again, I need to point out that this is not the code from the Jetpack and everything has been coded manually by me.
To intermediate developers and everyone who likes to learn new things I would advise to look at the sharing module of Jetpack to learn how to properly define a good sharing experience since this is just a simple example which can be then extended by you 🙂
Have you used another sharing plugin? Are you eager to learn how that plugin works when sharing? Did you have some other experience when sharing? Please do share in the comments below! 🙂
Become a Sponsor
Share this: