[Tutorial #29] Content Sharing -3: Social Share Icons

WEB

[Tutorial #29] Content Sharing -3: Social Share Icons

Posted Nov.17,2016 MULTIPLE-TOPICSTUTORIAL1WORDPRESS

Contents
    1. Introduction
    2. Common Sharing Methods
      1. Official Social Plugin Method
      2. WordPress Social Icon Plugin
    3. Simple Share Icon Inclusion
      1. content-social.php
      2. Line 4-5: get this post’s url and url-friendly title
      3. Line 6-9: making post share urls 
      4. Line 13-38: social icon display wrapper
    4. Line 15-21: Linked Social Icons
      1. Make icons into a link
      2. Link to social share page
      3. Open a new tab when clicked
      4. Font Awesome icon stacking
      5. Font Awesome icons
    5. Social Icon Styling
    6. Including content-social.php

Introduction

In this tutorial we introduce the fourth content sharing technique mentioned in our previous content sharing tutorial: adding social share icons.

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.

wp facebook share button api

Facebook’s share button configurator and code generator.

You can find similar configurators/code generators for Google Plus and LinkedIn.

wp linkedin share generator

LinkedIn Share Plugin generator page.

Although these social plugins are easily incorporated into your site, they are difficult to customize the share button look (likely preferred by the social companies to preserve brand images).

WordPress Social Icon Plugin

There are some nice wordpress plugins that add social icons to your site, and with greater icon customization. One example is the Simple Share Button Adder.

wp simple share button adder plugin

But using plugins with automatic insertion can cause problems for custom themes. For example in ModernBlackHand the icons appeared in one single post template but not the other one.

Here we introduce a simple way to include share icons in post.

Simple Share Icon Inclusion

On ModernBlackHand we use the simplest way of making share icons work:

  1. Using only HTTP without any JavaScript.
  2. Using only Font Awesome icons without CSS shape drawing.

content-social.php

We will create a partial template content-social.php that contains the social icons, so we can easily add icons as a set in a post’s multiple pages. The codes are as follows:

Here are the codes’ explanation:

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

The wordpress template tag get_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:

  1. It links to social channel sharing page.
  2. It opens as a new tab.
  3. A circle background.
  4. 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).

Open a new tab when clicked

This is done by the attribute/value pair target="_blank" (line 15).

Font Awesome icon stacking

Font Awesome provides a way to stack multiple icons into a new icon:

  1. Add fa-stack class at icons’ parent tag <a> (line 15).
  2. 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:

  1. White social channel symbol.
  2. 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: