PRIV P41 Share Buttons

Business requirements

Authors want to gain public attention. Social media offers a lot of possibilities.

The author pic gathers the follow buttons for different social media, see more here.
On this page we describe the new plugin for the share icons.

We want to create a plugin that can be used in any website. It will gather different share possibilities like share on Facebook, on Twitter, on Linkedin, etc.
In addition we foresee also a button for the internet archive, so that authors can prove that wrote the article first.

In the WordPress dashboard for the plugin the admin should be able

1. To specify the URL for the share button for different social channels. We foresee about 10 different social channels.
2. The position of each share button and the position for the internet archive.

Point 2 gives the WordPress admin full flexibility to adjust the plugin to his/her needs.
This plugin is independent of the author, the position is the same for all articles and authors.

A complication is that the social icons are on the top left of the page/post and on the bottom right.

This means that we need 2 positions for each social icon.

Design

We want to improve the social icons, as for follow and for sharing content.

We distinguish into share content icons similar to the following.

Or we can use the design of wsj.com. We can use their icons without any corrections. Here there is an example.

Social buttons

.

Share icons on Top

Our share icons now looks great. We have new icons with the same style. We also have tooltip on hover and different style effect. You can see them here:

Share icons on Top

.

Change Request: Increase size of buttons on bottom

For mobile use the buttons are too small.

We decided to raise their size on both mobile and desktop. Source Watson.ch

Share Buttons Are too Small

- Click to enlarge

Change Request: Create Sidebar with Buttons

A still outstanding CR is to create a left sidebar where the share buttons are always visible.

Example also from Watson.

Correct Size Share Buttons

- Click to enlarge

The User Interface:

Remember that the icons are on top of the post and on the bottom right.

Similar to author pic we can specify:

• Position of each button (this applies to both, Top Left and Bottom Right).
  We predefine a fixed list of social channels for which we foresee a button.
• Position of the Top Left for upper buttons
• Position of the Top Left for lower button
• Text to be added to the date like “Latest Update”. This can be empty
• Show Last Update, Creation Date Yes/No

List buttons, Share buttons Light

.

Dialogue for new share button

Step1

Adding a new button, Share buttons Light

Adding a new button, Share buttons Light - Click to enlarge

Options for social share

.

Implementation and plugin transformation

All the functionality will move into a independent plugin.

Our plugin folder is sharebuttonslight.
The plugin is with self-installer, which will do all the work for installation. The plugin contains 3 major files. Our php core file – sharebuttonslight.php, the css file under styles called sb.css.

All the information about the plugin and installation process is under readme.txt. The UI can be viewed under Tools menu.

Installation process, Share buttons Light

Plugin structure, Share buttons Light - Click to enlarge

Installation

The implementation into the template is very easy process. You will need only to change 2 simple lines of code. The two functions are:

<?php sb(“top”); ?>

and

<?php sb(“bottom”); ?>

Both of the function need to be placed under loop-page and loop-single.php files under your template (or child template). The first code is the top share buttons. They need to be placed right after the_title() function. The second line of code is the buttons which are under the content. They can be placed where you want. Most of the cases they are placed at the end of the file, but it is up to you. You can see where we add it on the screen below.

Plugin structure, Share buttons Light

Installation process, Share buttons Light - Click to enlarge

Options

Under Settings -> General you will see the two new settings only for Share buttons Light plugin. From there you can control the text for “Last update function” and to show or hide this function.

Settings -> General, Share buttons Light

Settings -> General, Share buttons Light - Click to enlarge

The grey buttons are nearly invisible
We should use a better visible color
2) Share buttons should be bigger
Probably we keep the size for Follow Author
3) Move Position of Sharebuttons to right side, because Follow Author is left

Improve Share buttons

- Click to enlarge

Test Cases:

Test Case No1: Check and uncheck “Latest Update”

Step 1) Turn on the text “Latest Update” and open the site to check if the text is showing

Step 2) Turn off the text via UI and open the site to check if the text is hidden

Unchecking the option via Settings -> General, Share buttons Light

Unchecking the option via Settings -> General, Share buttons Light - Click to enlarge

Checking the site, if the feature is working, Share buttons Light

Checking the site, if the feature is working, Share buttons Light - Click to enlarge

Test Case No2: Change the text before the date

Step 1) Open the site and check if the default text is showing

Step 2) Change the text via the UI

Step 3) Verify if the new text is shown

Testing the text feature, Share buttons Light

Testing the text feature, Share buttons Light - Click to enlarge

Test is OK: Last UpdateTEST is shown

.

Test Case No3: Check if the adding and deleting social networks

Step 1) Add one new social network

Step 2) Check  if the new social network is there

Step 3) Delete 3 social share networks

Step 4) Verify if the deleted share networks are gone

Step1: Add new button via the UI, Share buttons Light

Added new button via the UI, Share buttons Light - Click to enlarge

The new button appeared, Share buttons Light

.

We delete 2 social networks

Deleting buttons via the UI, Share buttons Light

Deleting buttons via the UI, Share buttons Light - Click to enlarge

The deleted buttons are gone, Share buttons Light

.

Test Case No4: Sorting the social networks

Step 1) Using the UI change the position of the social share network from last to first position

Step 2) Verify in the site if the social share networks are arranged the same way as in the UI

Changing the positions, Share buttons Light

Messing the positions, Share buttons Light - Click to enlarge

Test Case No5: Adding social share networks into different positions

Step 1) Delete all current channels

Step 2) Add one social networks into position “top left”

Step 3) Add different social network into position “bottom right”

Step 4) Add two social networks on both positions

The new button added on both positions appeared on bottom, Share buttons Light

The new button added on both positions apperead on bottom, Share buttons Light - Click to enlarge

Added new button on both positions, Share buttons Light

Added new button on both positions, Share buttons Light - Click to enlarge

The new button added on both positions apperead on top, Share buttons Light

.

Mobile version

.