There are already top 10 social networks available in Simple Social Buttons PRO that can meet the requirements of most of the users. We are welcoming suggestions from all the SSB users to add more popular social networks. At the same time, we allow you to add your own social network by using the filter that we have developed for you.
In this article, I’ll show you how you can add your own social network in Simple Social Button’s network list.
Before diving into further, make sure you have made a backup of your website.
It is always best practice to make a Child Theme before doing any development stuff, and add all the codes in your Child Theme.
I assume that you have already installed the Simple Social Buttons and done everything that is mentioned above.
Adding Pocket Icon
In this tutorial, I’m going to add the Pocket network, In order to use the Pocket as a social network, I used two things. The first thing is the icon in the SVG form and the second thing is the return URL that will be used for sharing.
Now its time to go to your Theme’s Function.php file and open it in your code editor.
Example Usage
/**
* Adding Custom Social Network.
*
* @param array $buttons Selected social networks.
* @return array
*/
function add_pocket_button( $buttons ) {
$pocket_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48"><path fill="#F50057" d="M24,41L24,41C13.5,41,5,32.5,5,22V9.9C5,8.3,6.3,7,7.9,7h32.2C41.7,7,43,8.3,43,9.9V22C43,32.5,34.5,41,24,41z"/><path fill="#FFF" d="M24,31c-0.6,0-1.3-0.2-1.8-0.7l-9.5-9.5c-1-1-1-2.6,0-3.5c1-1,2.6-1,3.5,0L24,25l7.7-7.7c1-1,2.6-1,3.5,0c1,1,1,2.6,0,3.5l-9.5,9.5C25.3,30.8,24.6,31,24,31z"/></svg>';
$link = get_permalink();
$buttons[] = '<button onclick="javascript:window.open(this.dataset.href, \'_self\' );return false;" data-href="https://getpocket.com/edit?url=' . $link . '"> ' . $pocket_icon . ' </button>';
return $buttons;
}
add_filter( 'ssb_buttons_output', 'add_pocket_button' );
In this filter, we are getting selected networks in the form of an array. We can add or delete a network using this filter. After any modification network array, we need to return networks.
Following this tutorial, you would be able to add your own social network.
