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.

Facebook configurator for 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:

Social sharing links
Social sharing links with styling

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.