Build WordPress social sharing links in the theme itself
In this detailed tutorial, I explain how you can create your own WordPress social sharing links in just a few steps and integrate them into your WordPress theme using a self-programmed template function.
Social sharing buttons and data protection
The integration of social sharing buttons on your WordPress website is possible with a variety of plugins. Very often these plugins do not comply with German data protection, which is why you should not install a plugin at random.
For example, data protection is problematic with the Facebook share button. With the official Facebook code configurator, the complete JavaScript Facebook SDK is integrated for the share button.
With the mere display of the button, the data of your website visitors are transferred to Facebook. Since it is difficult for your visitors to agree to this transmission before they call up the website, the button is not compatible with the new GDPR, among other things.
Shariff wrappers and static sharing links
One possible solution is Shariff, with which the sharing buttons are only integrated after an additional click and thus the consent of the visitor. In my next post I will therefore introduce the popular Shariff wrapper plugin in more detail.
A second option is to use simple text links for sharing, which most social networks now provide. The URL and text of the shared post can usually be transferred in the parameters of the link.
www.facebook.com/sharer/sharer.php?u={URL}&t={TEXT} twitter.com/intent/tweet?text={TEXT}&url={URL} plus.google.com/share?url={URL}&t={TEXT} pinterest.com/pin/create/button/?url={URL}&description={TEXT} www.xing.com/spi/shares/new?url={URL}
No data is transmitted with these static links and there is no tracking. Only when you click on a link will you be forwarded to the share function of the network.
In the following code examples I show how you can automatically display the social sharing links in your WordPress theme under each post.
Own template function for share buttons
First of all, we create a new function that should output our social sharing links. You can copy the code into the functions.php of your own theme or use it in a child theme if you are adapting another theme.
function theme_slug_social_sharing() { // Get current page URL. $page_url = get_permalink(); // Get current page title. $page_title = get_the_title(); }
In this first step, the function only creates two variables, which contain the URL and the title of the current page on the website. These variables are later transferred to the respective social networks in the sharing links.
The share buttons should be visible under individual posts and static pages. Our template function is used within the WordPress loop . We can therefore call the WordPress functions get_permalink () and get_the_title () without specifying a post ID, with which they return the URL and title of the current post (in a loop).
Create an array of social sharing links
Next we define an array that should contain the complete URL and labeling of the social sharing links. For the sake of clarity, I limit myself to Facebook, Twitter and GooglePlus. Other networks are of course also possible.
// Create Array with Social Sharing links. $links = array( 'facebook' => array( 'url' => 'https://www.facebook.com/sharer/sharer.php?u=' . $page_url . '&t=' . $page_title, 'text' => 'Facebook', ), 'twitter' => array( 'url' => 'https://twitter.com/intent/tweet?text=' . $page_title . '&url=' . $page_url, 'text' => 'Twitter', ), 'googleplus' => array( 'url' => 'https://plus.google.com/share?url=' . $page_url . '&t=' . $page_title, 'text' => 'Google+', ) );
We put the entire URL of the social sharing links together from the share URL of the network and our two variables $ page_url and $ page_title from step 1.
Generate HTML code for social sharing buttons
As a last step, we just have to output our social sharing buttons.
We go through our array with the sharing links in a foreach loop and generate some HTML markup to display the links, which we save in the $ html variable. In my opinion, a list with ul works well for this.
// Create HTML list with Social Sharing links. $html = '<ul class="social-sharing-links">'; foreach( $links as $key => $link ) { $html .= '<li>'; $html .= '<a href="'. esc_url( $link['url'] ) .'" target="_blank">' . esc_html( $link['text'] ) . '</a>'; $html .= '</li>'; } $html .= '</ul>'; return $html;
I personally find the use of sprintf () in the loop a little nicer:
foreach( $links as $key => $link ) { $html .= sprintf( '<li><a href="%1$s" target="_blank">%2$s</a></li>', esc_url( $link['url'] ), esc_html( $link['text'] ) ); }
At the end of our template function, we enter our HTML code with return $ html; as return value.
You can find the complete code from all three steps in this Github Gist .
Show social sharing links in the theme
You can now have your finished template function output in the WordPress theme. The single.php or page.php in your WordPress theme can be used as template files for displaying the social sharing links.
<?php echo theme_slug_social_sharing(); ?>
Alternatively, you can use the the_content filter to automatically attach your social sharing buttons to your posts and static pages. It is important to check with an if query whether it is the main query and a single post so that the share buttons do not appear in undesired places.
function theme_slug_add_social_sharing_to_content( $content ) { // Only display sharing links in single post and pages. if ( ! ( is_singular() && in_the_loop() && is_main_query() ) ) { return $content; } return $content . theme_slug_social_sharing(); } add_filter( 'the_content', 'theme_slug_add_social_sharing_to_content' );
You can also put the function in the functions.php of the (child) theme.
Design WordPress social sharing links
In your posts you should now see the social sharing links as a simple list:
Sharing the post is no problem at all.
With some CSS in the style.css , we can now adjust the styling of the links and display them, for example, as buttons next to each other.
ul.social-sharing-links { display: flex; padding: 0; list-style: none; } ul.social-sharing-links li a { display: block; margin-right: 0.5em; padding: 0.25em 1em; border-radius: 5px; color: #fff; } ul.social-sharing-links li a[href*="facebook.com"] { background: #3b5998; } ul.social-sharing-links li a[href*="twitter.com"] { background: #55acee; } ul.social-sharing-links li a[href*="plus.google.com"] { background: #dc4e41; }
The horizontal alignment of the list items is possible with Flexbox and with a few lines the links are quickly displayed as buttons. The colors of the buttons can then be adjusted for the respective social network.
The result should now look something like this:

Conclusion
You do not necessarily need a plugin to display social sharing buttons. Simple text links for sharing can also be integrated directly into the theme with little code if additional features and options are not required.
A missing function is the display of a share count in the buttons. Therefore, I will soon present the already mentioned plugin Shariff Wrapper, with which the share buttons can also be integrated with the number of shares in compliance with data protection regulations.
Hello Brian,
you describe that really great for beginners, thank you very much. May I anticipate your next post before I totally despair here? I installed Shariff and got the "Share" button as desired. But when I share my blog post on my Facebook page, the header image appears for each post on Facebook and not the uploaded post image. Of course, it looks totally stupid if I always have the same photo in my posts and it doesn't really fit the post. Can you set that somewhere and if so where ??? I would be very grateful for your help.
LG
Bärbel
Hello Bärbel,
With pleasure, I'm happy 🙂
Basically, Shariff's share buttons work the same way, the plugin just offers far more settings, designs and share counts. The post about it comes tomorrow.
Mainly, the share buttons forward the URL of the shared post to the social services. These then read out the link and get the preview image from the website, among other things.
By default, Facebook simply identifies an image on the website; the header image as the first image is probably obvious. The preview image is therefore not really in the area of influence of the share buttons.
In the website, however, you can store which image, title and description should be used. This information is called Open Graph Meta Tags and improves the sharing information.
Many SEO plugins also enable these meta tags to be displayed, for example. With Yoast SEO these can be activated in the social settings in the Facebook and Twitter tab.
If there is no plug-in that already supports the meta tags, these can also be retrofitted with this standalone plug-in for Open Graph Meta Data: https://de.wordpress.org/plugins/wonderm00ns-simple-facebook-open-graph- tags /
A detailed article on the subject will probably come up at some point 😉
Many Greetings,
Brian
Hello again,
Thank you very much for your quick and detailed answer. I'm afraid I don't have the skills for meta data programming, but I can still do it myself. I am happy to follow you and learn dazu Nice WE
Bärbel