Creating custom social media share buttons for posts

Website developers might find it necessary to have custom social share buttons at the top/bottom of their web pages. Custom buttons allow better integration with the rest of a website’s style and create a more unique look. More control over where these buttons appear on pages might also be beneficial.

Introduction

Creating custom social media share buttons for posts will introduce and show how to use the basic version of Simple Share Buttons to create a more custom appearance on WordPress websites.

This plugin makes it easy to use custom images, but with a bit of CSS tweaking, :hover effects can also be added. With the right settings, Simple Share Buttons also allows the usage of code in the form of a shortcode or PHP to be able to place these buttons in more desired locations on posts and pages.

The Simple Share Buttons plugin

Simple Share Buttons is a popular WordPress plugin that adds social media share buttons to posts and pages. It is updated regularly and at the time of update, it had more than 100 000 active installs and an average rating of 4.4 out of 5.

Out of the box, the basic version comes with a fair amount of options and is a great plugin to get started with. The plugin is also available as Simple Share Buttons Plus (paid version) with additional functionality such as float bars and share buttons to additional social media networks. Everything on this post has been done with the basic version of Simple Share Buttons.

Simple Share Buttons (Adder) can be installed from the WordPress -> Add New Plugin section. After activation, go to the Settings (Settings -> Simple Share Buttons) and choose and arrange the desired social media network(s) in the dashed block.

When planning on using custom placement (see later), then leave the Locations selectors off and don’t change the Placement.

To be able to use PHP or a shortcode for custom placing, the Locations selectors must all be turned off.

By looking at the Styling section, there are many options to play around with for customising the share buttons. Settings for alignment, padding, share text and a container around the share buttons area can all be adjusted here. There are also various useful pre-designed themes to choose from.

Adding custom button images

To enhance the button customisation, custom images can also be set for the desired social media buttons. To activate custom icons, choose the Custom option from the Theme drop-down menu. To make things easier, the desired custom button images to be used as share buttons need to be added to the WordPress Media Library first.

To add custom images for share buttons, use the Upload button next to the desired social media network.

The desired images for the share buttons can then be Uploaded to the appropriate social media network styling section

Settings are saved by clicking the blue ‘stiffy disk icon’ on the right side of the Settings screen. The settings of all the sections will be saved at the same time.

CSS styling

After the button images are selected (default or custom), additional CSS can be added to create additional button styling. The nice thing about Simple Share Buttons’ sharing buttons is that they are made up of either images or text (see later).

CSS styling can be used to further enhance images and text to give it maximum customisation. Simple Share Buttons makes it very easy to simply add additional styling directly to their plugin.

By enabling Custom CSS, styling can either be done from scratch or Additional CSS can be added. Custom CSS can also be added by editing the (child) theme’s style.css file. To have better control over the custom CSS the rest of this post will assume that Custom CSS is Enabled (ON).

The CSS classes for social media networks are as follows:

• Buffer ssba_buffer_share
• Diggit ssba_diggit_share
• Email ssba_email_share
• Facebook ssba_facebook_share
• Flattr ssba_flattr_share
• Google Plus ssba_google_share
• LinkedIn ssba_linkedin_share
• Pinterest ssba_pinterest_share
• Print ssba_print
• Reddit ssba_reddit_share
• StumbleUpon ssba_stumbleupon_share
• Tumblr ssba_tumblr_share
• Twitter ssba_twitter_share
• VK ssba_vk_share
• WhatsApp ssba_whatsapp_share
• Xing ssba_xing_share
• Yummly ssba_yummly_share

By adding the class ssba-img or ssba the images or text are targeted more specifically (see later).

The custom placing of social share buttons

After the setup has been completed, the share buttons section is ready to be placed on posts and pages. If it is necessary to have more control over where these share buttons are placed on posts and pages, Simple Share Buttons make it easy by using a shortcode or PHP. To get the shortcode to go to the Shortcode section of the settings page. With the basic version of Simple Share Buttons it will be:

[[ssba-buttons]]

The shortcode can be used anywhere on posts and pages to place the share buttons. To place to share buttons in PHP the shortcode can be called as follows:

<?php echo do_shortcode('[[ssba title="'.get_the_title().'" url="'.get_permalink().'"]]'); ?>

Custom share buttons with a :hover effect

The basic Simple Share Buttons settings do not allow for any mouse hovering effects (yet?). Hovering effects like colour changes or even image changes will really add to the look and feel of buttons.

By using the CSS classes mentioned earlier, simple :hover effects can be added as follows (using a Facebook button with an opacity change to 60% as an example):

.ssba_facebook_share .ssba-img:hover {
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

or (using the Facebook text with a colour change to red as an example):

.ssba_facebook_share .ssba:hover {
  color: red;
}

Changing the share button text on :hover

Some developers might be happier with text or text buttons as sharing links. In this case, Simple Share Buttons’ default sharing text can be used.

This is done in the Themes settings section (Styling -> Appearance -> Theme settings). By changing this to Custom and by leaving the custom image empty the plugin will show its own sharing text for each social media network.

By adding the desired text button codes (one-by-one) to either the Custom CSS section of Simple Share Buttons or the (child) theme’s style.css (using the default Facebook text as an example):

.ssba_facebook_share .ssba {
  color: white;
  margin: 5px;
  background: gray;
}

.ssba_facebook_share .ssba:hover, .ssba_facebook_share .ssba:active {
  color: black;
}

The style of all the text links can be changed at the same time as follows:

.ssba a {
  box-shadow: 0 0 0 0;
  color: white;
  margin: 5px;
  background: gray;
  white-space: nowrap;
}

.ssba a:hover, .ssba a:active {
  color: black;
}

Here box-shadow: 0 0 0 0; will remove the underline on some themes and white-space: nowrap; will prevent text with spaces to break as the screen gets smaller. In some cases !important might have to be used.

Changing the share button image on :hover

Moving back to images instead of text, another custom change that might be desired is changing the image completely when the mouse pointer hovers over it. This will give the best customisation if used in combination with CSS.

To make a button/image change on :hover, the way Simple Share Buttons is set up will have to change completely. A bit of tweaking is necessary to make Simple Share Buttons show a (dummy) blank image after which only CSS is used to display and swap the ‘real’ image.

Start off by creating and Uploading a blank.png (I called mine blank_dot.png) image to all the desired social media slots and Enabling Custom CSS in the CSS -> CSS overrides settings section.

Secondly, add the desired button codes (one-by-one) to either the Custom CSS section of Simple Share Buttons or the (child) theme’s style.css (using a Facebook button as an example):

.ssba_facebook_share .ssba-img {
  background: transparent url('http://www.yoursite.com/wp-content/uploads/icon_facebook.png') center center no-repeat;
}

.ssba_facebook_share .ssba-img:hover, .ssba_facebook_share .ssba-img:active {
  background: transparent url('http://www.yoursite.com/wp-content/uploads/icon_facebook_hover.png') center center no-repeat;
}

The following CSS is used to change the size of the individual share buttons:

.ssba-img {
  width: 40px;
  height: 40px;
  padding: 6px;
  margin: 10px;
  display: inline-block;
}

.ssba_facebook_share .ssba-img {
  background: transparent url('http://www.yoursite.com/wp-content/uploads/icon_facebook.png') center center no-repeat;
  background-size: 40px 40px;
}

.ssba_facebook_share .ssba-img:hover, .ssba_facebook_share .ssba-img:active {
  background: transparent url('http://www.yoursite.com/wp-content/uploads/icon_facebook_hover.png') center center no-repeat;
  background-size: 40px 40px;
}

Here the custom size (40 x 40px), margin (10px) and padding (6px) of the image is also set. To display the images next to each other instead of below each other, display: inline-block; is also used. The classes .ssba .ssba-img can be used for other styling that will affect all the share buttons.

To add a coloured block around the image, the background colour can be set from transparent to the desired colour:

.ssba-img {
  width: 40px;
  height: 40px;
  padding: 6px;
  margin: 10px;
  display: inline-block;
}

.ssba_facebook_share .ssba-img {
  background: #3a579a url('http://www.yoursite.com/wp-content/uploads/icon_facebook.png') center center no-repeat;
}

.ssba_facebook_share .ssba-img:hover, .ssba_facebook_share .ssba-img:active {
  background: #000000 url('http://www.yoursite.com/wp-content/uploads/icon_facebook_hover.png') center center no-repeat;
}

Here the block/background colour will be the default Facebook blue going onto black when hovered. Other effective :hover effects can also be added. In some cases !important might have to be used.

Custom shared button counters

Yet another great feature of Simple Share Buttons is the ability to show the number of times the post/page has been shared on most supported social media networks. This feature can be activated under the Counters settings section of the plugin.

CSS can also be used to customise the appearance of the share counters. When Custom CSS is Enabled (ON) and .ssba-img { display: inline-block; } is set, the share counter number will be situated at the right of the text/images. By using the class of ssba_sharecount CSS position can be used to move the number relative to its button text/image:

.ssba_sharecount {
  position: relative;
  top: 20px;
  right: 40px;
}

Additional styling can also be used:

.ssba_sharecount {
  font: 11px Arial, Helvetica, sans-serif;
  padding: 2px;
  -khtml-border-radius: 3px;
  -o-border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #5e5e5e;
  background: #e5e5e5;
}

The shared button number CSS styling can be added to the Custom CSS section of Simple Share Buttons or the (child) theme’s style.css. In some cases !important might have to be used.

The custom share button outer container

The last share button customisation after working with the buttons and counters is the surrounding container. The share button container can make buttons stand out a bit more. Simple Share Buttons has basic container settings in the Styling settings section, but if Custom CSS is Enabled (ON) these settings will also disappear.

The CSS class for Simple Share Buttons is ssba-wrap. By specifying the Call To Action text, this will also appear within the container, but it doesn’t seem to be customisable, so it is recommended to use external CSS to include your own Call To Action text. Any CSS styling for a block section can be used to style the outer container.

The outer container CSS styling can be added to the Custom CSS section of Simple Share Buttons or the (child) theme’s style.css. In some cases !important might have to be used.