Introduction

By making social share icons available, users cam easily share the posts they like with one click, without all the hassle of copy and paste.

Here we will focus on the following four social channels: Facebook, Twitter, Google Plus and LinkedIn.

Common Sharing Methods

Official Social Plugin Method

There are many ways to insert social share icons on your page. Take Facebook for example, on its social plugins page it has step-by-step guide and code generator for inserting the classic blue, rectangle “share button” via JavaScript and HTML tags.

Line 4-5: get this post’s url and url-friendly title

The wordpress template tagget_permalink() gets this post’s url, and code $post->post_title gets the post’s raw title. Both codes have to be used in The Loop.

Function urlencode(...) alters the input string to make it url friendly. By url friendly we mean to make the string ok to be included in the url. Common examples are changing single white spaces to “%20“s.

Line 6-9: making post share urls

Here we construct the urls to share this post on different social channels. The urls are specified by different social channels’ rules to access their services (so-called APIs).

As social channels constantly change their services, APIs are constantly updated. Thus you should regularly check if the chare icons still work, and modify the urls in accordance to the newest API specification.

Line 13-38: social icon display wrapper

We use a <div> to group these icons.

Line 15-21: Linked Social Icons

Our one linked social icon has the following behaviors and styles:

It links to social channel sharing page.

It opens as a new tab.

A circle background.

A social channel symbol.

We will achieve these as follows:

Make icons into a link

This is done by enclosing <i> tags with an <a> tag (line 15-18).

Link to social share page

This is done by setting href attribute to the urls we created (line 15).

Font Awesome icon stacking

Use fa-stack-#x class, # as a number, at icons to determine which icons are on top. The smaller the number the more front the icon is (line 16,17).

Font Awesome icons

The class fa-circle shows a circle, and fa-socialName, where sosialName is the social channel’s name, displays the social channel symbols.

Social Icon Styling

We choose a common social icon style:

White social channel symbol.

Background corresponds to the social channel’s iconic color.

For 2., the iconic color CSS hex code for the four social channels are:

Facebook: #3b5998

Google Plus: #d34836

LinkedIn: #0077B5

Twitter: #1DCAFF

Including content-social.php

We can now include our partcial template content-social.php into wordpress’ post template. As mentioned before we use template tags to get post’s information, so for ModernBlackHand we include content-social.php in template-parts/content-single.php using function get_template_part(...). See this tutorial for more details on partial template inclusion.

Here are the codes to include social icons at the beginning and after the end of a post’s content: