[Sharing -> Custom Share Buttons] How to add a custom button in the share network list (adding any social network for sharing)

Overview

Easy Social Share Buttons for WordPress has a unique feature that you can use to create and add unlimited custom buttons in the share list. This function you can use to add a social network or any custom button – for example: contact us, link to our mobile app, etc.

You can access this feature in the Sharing -> Custom Share Buttons.

How to create a custom button

To create a new button you just need to press the add and fill in all the details on the screen.

1. Network ID – the ID should be unique for the list of networks. Use only lowercase Latin symbols (a-z) and numbers (0-9). No spaces are allowed – use underscore. 
2. Name – This will be the text you will see in the list of networks. It will also be the text that will appear when you add a button initially (without modifications). Try to keep it short. 
3. Button URL – the URL can be a share command but it also can be a plain URL where you wish to direct your visitors (example contact page, affiliate page, purchase page). If you are filling the share command then you should fill at the proper places the variables representing sharable content: %%title%%, %%image%%, %%permalink%%, %%description%%. 
4. Enable internal share counter – the option will enable support for the internal share counter. To show the counter on your site you need to have the internal counter option active (in Share Counter Setup) and you are using a design with share values.
5. SVG Icon – place the content of an SVG icon that will be used to show the buttons. To do this prepare a flat color SVG icon (or download such from a collection). Open that file with a text editor and copy content inside the field.

Those five options were the required you need to add the button. The other options are optional and you can use to adjust the button appearance:

• Icon top & left padding – you can use those fields to modify the position of the icon inside the button. The plugin automatically sets a default value. In the field, you can set a numeric value.
• Colors – you can set the default button colors for background, text, and icon.
• Colors on hover – the same values but when you position over the button. If you did not add value the default from the theme will be used.

And that is all. No coding is needed. The plugin will do everything else. And that network will remain inside the list even after plugin updates. You can edit it at any time or even remove it.

Examples

Example of adding a custom share network

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
  .st0{fill:#FFFFFF;}
</style>
<g>
  <g>
    <path class="st0" d="M358.1,10.7c-31.2-8-65.3,19.8-76,62.1c-10.8,42.3,5.8,83,37.1,91c31.2,8,65.3-19.8,76-62.1
      C409.1,46.6,365.6,12.5,358.1,10.7z"/>
  </g>
</g>
<g>
  <g>
    <ellipse class="st0" cx="193.3" cy="78.2" rx="56.6" ry="78.2"/>
  </g>
</g>
<g>
  <g>
    <path class="st0" d="M431.3,153.2c-32.9,0.5-58.9,31.7-58.2,80.2c0.7,48.4,27.9,70.5,60.8,70c32.8-0.5,58.9-23.3,58.2-71.7
      C491.1,168.5,439.2,153.1,431.3,153.2z"/>
  </g>
</g>
<g>
  <g>
    
      <ellipse transform="matrix(0.9976 -6.979734e-02 6.979734e-02 0.9976 -13.4328 5.9491)" class="st0" cx="78.4" cy="195.2" rx="58.4" ry="79"/>
  </g>
</g>
<g>
  <g>
    <path class="st0" d="M401.2,334.9c-28.1-24.7-52-44.9-89.3-96.7c-18.5-25.6-39.8-28.9-62-28.9c-22.3,0-45.8,7.8-63.8,33.8
      s-38.5,51.3-78.3,84.4c-39.7,33.2-56.6,56.1-56.6,89.9s19.3,89.9,74.1,89.9s81.3-12.1,124.7-12.1S322.1,512,376.9,512
      s77.7-51.9,77.7-85.6S445.1,373.5,401.2,334.9z"/>
  </g>
</g>
</svg>

Example how to modify the button URL or action using filter calls

The plugin also allows modification of the shared address using internal filters. The call to those filters you can place in the functions.php file of your theme (or use a custom snippets plugin). You can use 3 available filters:

1. essb_shareapi_command_<network_id> – with this filter you can modify the action command of the button (javascript)
2. essb_shareapi_url_<network_id> – with this filter you can modify the button URL
3. essb_share_command_<network_id> – this filter you can modify the already generated share command and URL before usage.

For the examples below we will use network_id baidu – this is the ID of the custom network we add. You should use the custom ID of the network you create. The filters are called for each network individually – in case you need to modify the sharing of more than one network, add snippets for each.

add_filter('essb_shareapi_url_baidu', function($share) {
    /**
     * $share is the variable holding all the sharing information. Options you can use include:
     * 
     * $share['url'] - the URL of current content
     * $share['title'] - the title (or main share message)
     * $share['image'] - the image URL
     * $share['description'] - additional sharing description
     */
    
    return 'http://cang.baidu.com/do/add?iu='.$share['url'].'&it='.$share['title'];
});

add_filter('essb_shareapi_command_baidu', function($share) {
    /**
     * $share is the variable holding all the sharing information. Options you can use include:
     *
     * $share['url'] - the URL of current content
     * $share['title'] - the title (or main share message)
     * $share['image'] - the image URL
     * $share['description'] - additional sharing description
     * $share['salt'] - the unique ID of the share buttons displayed
     * 
     * Don't forget if you create a custom command to include the essb.tracking_only('', '', '".$share['salt']."', true); call.
     * This function execute various related to the plugin events, including the interanl counter tracking.
     */
    
    return "navigator.share({'url': '".$share['url']."', 'title': '".$share['title']."'}); essb.tracking_only('', 'baidu', '".$share['salt']."', true); return false;"; 
});


add_filter('essb_share_command_baidu', function($action) {
    /**
     * $action contains already generated sharing commands
     * $action['url'] - the share URL
     * $action['api_command'] - javascript callback
     * 
     * You can put the direct commands assigned to your button here too but no access to the share object details is available
     */
    
    
    return $action; 
});