- Introduction
- Common Sharing Methods
- Simple Share Icon Inclusion
- content-social.php
- Line 4-5: get this post’s url and url-friendly title
- Line 6-9: making post share urls
- Line 13-38: social icon display wrapper
- Line 15-21: Linked Social Icons
- Make icons into a link
- Link to social share page
- Open a new tab when clicked
- Font Awesome icon stacking
- Font Awesome icons
- Social Icon Styling
- 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.
Facebook’s share button configurator and code generator.
You can find similar configurators/code generators for Google Plus and LinkedIn.
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.
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:
- Using only HTTP without any JavaScript.
- 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php /** * @package Pharmacate */ $my_post_url = get_permalink(); $my_post_title = urlencode($post->post_title); //title set to url friendly $fb_share_url = 'http://www.facebook.com/sharer.php?u=' . $my_post_url; $gl_share_url = 'https://plus.google.com/share?url=' . $my_post_url; $ln_share_url = 'http://www.linkedin.com/shareArticle?mini=true&url=' . $my_post_url; $tr_share_url = 'https://twitter.com/share?url=' . $my_post_url . '&text=' . $my_post_title; ?> <!-- social sharing icons --> <div class="my-social-share-wrap"> <a class="fa-stack fa-lg social-icons" href="<?php echo $fb_share_url; ?>" target="_blank" > <i class="fa fa-circle fa-stack-2x iconbg-fb"></i> <i class="fa fa-facebook fa-stack-1x"></i> </a> <a class="fa-stack fa-lg social-icons" href="<?php echo $gl_share_url; ?>" target="_blank" > <i class="fa fa-circle fa-stack-2x iconbg-gl"></i> <i class="fa fa-google-plus fa-stack-1x"></i> </a> <a class="fa-stack fa-lg social-icons" href="<?php echo $ln_share_url; ?>" target="_blank" > <i class="fa fa-circle fa-stack-2x iconbg-ln"></i> <i class="fa fa-linkedin fa-stack-1x"></i> </a> <a class="fa-stack fa-lg social-icons" href="<?php echo $tr_share_url; ?>" target="_blank" > <i class="fa fa-circle fa-stack-2x iconbg-tr"></i> <i class="fa fa-twitter fa-stack-1x"></i> </a> </div> <!-- my-social-share-wrap --> |
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:
- 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).
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:
- Add
fa-stack
class at icons’ parent tag<a>
(line 15). - 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:
1 2 3 4 |
<!-- sticky share icons --> <?php get_template_part( 'template-parts/content', 'social' ); ?> <?php the_content(); ?> <?php get_template_part( 'template-parts/content', 'social' ); ?> |