Documentation Social Sharing Buttons for WordPress

Create a custom social network share button with Nobs • Share Buttons.

Kind reminder: This tutorial is made for the Nobs • Share Buttons (ex-Juiz Social Post Sharer) plugin available on the WordPress repository but also on Github.

In this tutorial, you will be able to create a custom button to be added to the set of button you already activated for your website.
Let's dive together in the steps of creating it.

Prepare some assets

Before you start, try to be sure you gathered these different elements:

A share URL API provided by your social network.
An icon for you social network (SVG is best)
2 colors in hexadecimal, related to the brand color.

Prepare your custom plugin / theme code

I won't go into the basic of coding a plugin for WordPress, so that the following code can be compatible with your theme or your custom plugin. You can totally add the following lines of code into your functions.php file within your active WordPress theme.

All we need here to declare our network, if this piece of code using the jsps_register_custom_network hook.

<?php
/**
 * Nobs • Share Buttons
 * Adds Buffer sharing button via Button API of Nobs Plugin.
 *
 * @see https://sharebuttons.social/doc/tutorial-create-a-custom-button.html
 *
 * @param  array $custom_networks The array of custom networks being merged with core networks.
 * @return array                  The completed array of network.
 */
function nobs_custom_new_network( $custom_networks ) {

	$custom_networks[ 'buffer' ] = array(
		'name'    => 'Buffer',
		'visible' => 1,
		'api_url' => 'https://buffer.com/add?text=%%title%%&url=%%url%%',
		'icon'    => get_template_directory_uri() . '/buffer-icon.svg', // optional
		'title'   => __( 'Share on Buffer', 'textdomain' ), // optional
		'color'   => '#bada55', // optional
		'hcolor'  => '#a9c944', // optional
	);

	return $custom_networks;
}
add_filter( 'jsps_register_custom_network', 'nobs_custom_new_network', 10, 1 );
?>

I added in this example a support for the Buffer API, not yet in the core plugin. (I'll add it soon)
Let me explain each entry of this new button entry.

name: The visible name of the social network, used in the admin area but also directly on the button itself.
visible: value 1 make it visible by default in the options of the plugin so that the next time someone save the settings the button will be selected an display.
api_url: this is the URL of the network API you wanna use. This URL is given by the service, you can't invent it. You can use several placeholders being dynamically replaced by the plugin core (don't replace those by yourself):
- %%title%%: the title of the post being shared on this network (usually short)
- %%excerpt%%: the excerpt of the post being shared on this network (usually a bit longer). You can customize the size of the excerpt with jsps_get_excerpt_letter_count (80 letters by default)
- %%url%%: the URL of the post being shared.
icon: (optional) the icon being used on the button, but also in the admin area. Provide with a valid URL to the icon. We strongly suggest you to use a SVG image, unless you are mastering the art of font-icon. If so, you can use the classname instead of a URL. (e.i. fa-plus for a Font Awesome font-icon)
title: (optional) the value of the title attribute of your button. Try to make it translatable using your own text-domain. It'll be displayed while hovering the button.
color: (optional) the color value for your button.
hcolor: (optional) the color value for your button while hovering it.

Prepare SVG Image

I strongly recommend you to follow those lines to make the image matching the other social network icons.
Your SVG file must match the following criteria to be perfect.

being a square image (not the shape of the icon, just the dimension) for instance: 64x64 pixels
you icon must not have any inner margin, put the glyph on the edge of the image,
the background must be transparent,
after exporting the SVG with your design tool, or after downloading it elsewhere, open the SVG file with a text editor, track down all the "fill" property, and replace these values by currentColor respecting the case.

Your SVG file code should look like that:

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64" width="64" height="64"><path d="M.3 14.128L29.286.532c1.672-.78 3.232-.67 4.903.1L61.492 13.46c.67.334 1.45.557 1.45 1.337 0 1.003-.892 1.114-1.56 1.45l-26.2 12.257c-2.452 1.114-4.57 1.114-7.02 0L.3 15.577v-1.45zm0 34.658l5.126-2.563c2.117-1.114 4.123-.892 6.24.1l16.827 7.912c2.117 1.003 4.123 1.003 6.24 0l17.05-8.024c2.117-1.003 4.123-1.003 6.24 0 1.226.67 2.563 1.226 3.8 1.783.557.334 1.337.557 1.226 1.337 0 .67-.67 1.003-1.226 1.226L49.12 56.585 34.743 63.27c-1.894.892-3.8 1.003-5.683.1L2.094 50.792c-.557-.223-1.003-.67-1.56-1.003-.223-.223-.223-.557-.223-1.003zm0-17.273l3.9-1.894c3-1.783 5.795-1.45 8.915.1 5.238 2.675 10.587 4.903 15.824 7.466 2.006.892 3.8.892 5.683 0l16.827-7.912c2.34-1.114 4.57-1.226 6.9 0 1.226.67 2.675 1.226 3.9 1.894 1.114.67 1.003 1.337 0 2.006-.334.223-.67.334-1.003.446L34.412 46.1c-1.783.892-3.566.892-5.35 0L2.206 33.63c-.67-.334-1.226-.78-1.894-1.114v-1.003z" fill="currentColor" /></svg>

Nobs • will automatically use this icon the right size and color to make it match the existing styles applied.

And you are done! Congratz! 👍

Create a Custom Button

Prepare some assets

Prepare your custom plugin / theme code

Prepare SVG Image