Add Share Buttons without plugins and JavaScript0


With Share Buttons user can easily share content on social networks. You can add these buttons even without the use of widgets, plugins or JavaScript.
Honeyport | 2016 Add Share Buttons without plugins and JavaScript

A Share Button ( = a button for sharing content on social networks like Twitter and Facebeook easily) is an integral part of news portals and blogs these days. For my blog I was also looking for an easy way to integrate these Share Buttons. There are several plugins for WordPress available, that are highly customizable – and of course there are premium versions, which leads to the enjoyment of the full range of functions. Because I want to keep the number of used plugins for performance reasons as low as possible, I decided myself for an alternative approach. My goal was to involve Share Buttons without plugins and JavaScript in WordPress.

How do Share buttons and what they do anyway?

Basically, there are two types of buttons for sharing content in social networks: On the one hand there are often “widgets”, that are well documented and easily integrated into your page by copy & paste. These widgets show often the number of users who have already shared the post. To get this information, a AJAX-request ist send for each requested page, not without sending a couple of statistics about the user to the respective network. If you want to dispable this kind of tracking, you must ensure that the Share Buttons are only activated, if the user clicked it – a rather impractical method for the dubious value of a click counter.
On the other hand, there are also the bad or not documented link solution. For this you need a specific URL with appropriate parameters only. In my view, the latter is the better option, because you can control exactly, what should happen, thus protecting your readers from tracking.

How to get the links for the Share Buttons?

Everything you need for the buttons accordingly is the appropriated link and depending on your design idea the logo of the social networks. The logos can be integrated easily and retina-ready using Font Awesome. For the links there will be certainly a library on GitHub. The rest is just PHP and CSS.

To my surprise, I couldn’t find any library that provides me the links easily. For that reason I have created one on my own. It was the library SocialShare.php, for which I researched the links of the different networks and make them accessable via a simple API. To insert Social Buttons in WordPress, you could somethin like this:


$shareUrls = new SocialShare(
     get_permalink(),
     get_the_title(),
     get_the_excerpt(),
     get_bloginfo( 'name' )
);

$links = $shareUrls->get(
    'facebook',
    'twitter',
    'google-plus',
    'whatsapp'
);

First you pass the parameters for the permalink, the title and the summary of the blog post, which you want to share, to the SocialShare Class. With the “get”-method you obtain an array of links to the desired network. The indexes of the array containing the names of the networks that match with the names from Font Awesome. To display the links on your website with the help of PHP and Font Awesome you could do something like this:


echo '<ul class="share-buttons">';

foreach ( $links as $provider => $url ) {
    echo '<li>';
    echo '<a class="share-on-' . esc_attr( $provider ) . '" href="' . esc_url( $url, array( 'https', 'whatsapp' ) ) . '" target="_blank">';
    echo '<i class="fa fa-' . esc_attr( $provider ) . '"></i>';
    echo '</a>';
    echo '</li>';
}

echo '</ul>';

The individual a-tags must then just be styled with CSS. In this way, you can add Social Buttons to your WordPress Blog in a simple and performant way without the need of JavaScript and plugins. The following networks are supported by the library today:

  • twitter
  • Facebook
  • google-plus
  • linkedin
  • y combinator
  • Instapaper
  • reddit
  • get-pocket
  • digg
  • stumbleupon
  • buffer
  • tumblr
  • vk
  • Yummly
  • xing
  • Delicious
  • whatsapp

In this way, theme authors can include Share Buttons natively into their WordPress themes and spare its users allot of work thereby. With the use of the WordPress Theme Customization API they can provide a way to customize these buttons with settings like position, visibility and number of networks.


Leave a Reply

Your email address will not be published. Required fields are marked *

*

*