Creating custom social media share buttons for posts

Creating custom social media share buttons for posts
Published: by Renier Delport

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

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 a WordPress website. 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.

Simple Share Buttons plugin

Simple Share Buttons is a popular WordPress plugin that adds social media share buttons to posts and pages and is updated regularly. 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 capabilities 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.

Adding simple share buttons adder

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 the Locations selectors all off and don’t change the Placement.

Simple Share Buttons locations settings
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

In order to enhance the button customisation, custom images can also be set for the desired 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 first need to be added to the WordPress Media Library.

Adding custom share buttons images
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.

The settings can be 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 are 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.

Simple Share Buttons CSS overrides

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 the 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).

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 makes it easy by using a shortcode or PHP. To get the shortcode 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 custom 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 an color 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.

By changing the Styling -> Appearance -> Theme settings to Custom. By leaving the custom image empty the plugin will show its own sharing text for each social media network.

Simple Share Buttons text

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;
}

Simple Share Buttons text style

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 necessary 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 an 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.

Simple Share Buttons blank

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;
}

To change the size of the individual share buttons it needs to be set as follows:

.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 in stead 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 amount 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 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.

Simple Share Buttons container & share text

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.

Summary

Simple Share Buttons is a WordPress plugin with plenty of neat customisation features out-of-the-box. With a little bit of CSS and tweaking, creating custom social media share buttons for posts is very easy.

More website development related posts

Premium templates for websites that perfectly fit your business
Choose from thousands on templates for a profession looking WordPress website.
22 November 2017 | 26 640 reader(s) found this helpful so far.
A better way to add fonts to a WordPress site
A better way to add fonts to a WordPress site
See a better way to add fonts to a #WordPress site...
16 September 2017 | | 1 reader(s) found this helpful so far.
WordPress code snippets
WordPress: Display categories without the link
See #howto display categories without the link in #WordPress... #WPcode
11 September 2017 | | 0 reader(s) found this helpful so far.
Working with custom image sizes in WordPress
Working with custom image sizes in WordPress
See #howto work with custom image sizes in #WordPress...
7 August 2017 | Updated 7 October 2017 | | 1 reader(s) found this helpful so far.
WPtouch mobile theme
Make your website mobile friendly with WPtouch – easily, simply & elegantly
See #howto make your website mobile friendly with #WPtouch...
19 March 2016 | Updated 2 September 2017 | | 3 reader(s) found this helpful so far.
Using MailChimp to Send Automatic Post Notifications
Using MailChimp to send automatic post notifications
See #howto use #MailChimp to send automatic post notifications...
5 March 2016 | | 4 reader(s) found this helpful so far.

Save, share, comment & Disqus

Use the buttons below, on the left or the bottom of this page to share this post. Your comment is important, but don't be a shit. Keep it constructive and polite.
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponShare on Tumblr

Comment via Facebook

Disqus

About the author

Renier finds himself busy with creative web design and his websites, motorcycling, photoshopping, micro electronics, non-commercialised music, superhero movies, badass series and many other things that are not interesting to most people.