Lightweight Social Sharing Buttons for WordPress without Javascript

Posted in: Code, Work on March 10th, 2014
My social sharing icons in WordPress, sans Javascript
My social sharing icons in WordPress, sans Javascript

When I designed my new blog theme, I stripped out as much as possible, including all social sharing buttons. Then I decided I want people to be able to share my content, so I needed a simple and lightweight solution for adding sharing buttons to my blog. I looked into various asynchronous javascript solutions, but ended up going with a very simple html only solution. Hat tips to these Stack Overflow posts and SocialiteJS for ideas and good info. Here is what I went with…

Creating Action Hooks

First, I created a hook to add the sharing icons below the content of each single post.

This code was added within single.php, just after the_content.

1
<!--?php do_action('after_post_content'); ?-->
<!--?php do_action('after_post_content'); ?-->

Then I added the action to functions.php

1
2
3
4
function social_sharing() {
  include('social-sharing.php');
}
add_action('after_post_content', 'social_sharing');
function social_sharing() {
	include('social-sharing.php');
}
add_action('after_post_content', 'social_sharing');

Social Links

I wanted to use Font Awesome‘s social icons, so I just included the CSS file in the head of my theme.

Then I put together the html/php for the sharing links in the php file that was included in the action hook above.

I decided to use Twitter’s query string parameters to automatically add “via” and set hashtags as the post categories. I used WordPress’s get the category function to do this

This means that when someone shares a post, the Tweet will look something like this:

Example of Twitter sharing button in action
Example of Twitter sharing in action
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
36
<div id="social-sharing">
  <span>Share This:</span>
 
  <span class="sharing-icon facebook-icon">
    <a href="https://www.facebook.com/sharer/sharer.php?u=
      <?php if(is_home()){echo home_url();}else{the_permalink();} ?>" target="_blank" title="Share this page on Facebook">
      <i class="fa fa-facebook"></i>
    </a>
  </span>
 
  <span class="sharing-icon twitter-icon">
    <a href="http://twitter.com/share?url=
      <?php if(is_home()){echo home_url();}else{the_permalink();} ?>&text=<?php the_title(); ?>&via=ciaransm&hashtags=
      <?php 
        $categories = get_the_category();
        $seperator = ', ';  
        $output = '';
        if($categories){  
          foreach($categories as $category) { 
              $output .= $category->cat_name . $seperator; 
          }
        
        echo trim($output, $seperator);
        }
        ?>" target="_blank" title="Tweet this post on Twitter">
        <i class="fa fa-twitter"></i>
    </a>
  </span>
  
  <span class="sharing-icon gplus-icon"> 
    <a href="https://plusone.google.com/_/+1/confirm?hl=en&url=
      <?php if(is_home()){echo home_url();}else{the_permalink();} ?>" target="_blank" title="Plus one this page on Google">
      <i class="fa fa-google-plus"></i>
    </a>
  </span>
</div>
<div id="social-sharing">
	<span>Share This:</span>

	<span class="sharing-icon facebook-icon">
		<a href="https://www.facebook.com/sharer/sharer.php?u=
			<?php if(is_home()){echo home_url();}else{the_permalink();} ?>" target="_blank" title="Share this page on Facebook">
			<i class="fa fa-facebook"></i>
		</a>
	</span>

	<span class="sharing-icon twitter-icon">
		<a href="http://twitter.com/share?url=
			<?php if(is_home()){echo home_url();}else{the_permalink();} ?>&text=<?php the_title(); ?>&via=ciaransm&hashtags=
			<?php 
				$categories = get_the_category();
				$seperator = ', ';	
				$output = '';
				if($categories){	
					foreach($categories as $category) { 
					    $output .= $category->cat_name . $seperator; 
					}
				
				echo trim($output, $seperator);
				}
				?>" target="_blank" title="Tweet this post on Twitter">
				<i class="fa fa-twitter"></i>
		</a>
	</span>
	
	<span class="sharing-icon gplus-icon"> 
		<a href="https://plusone.google.com/_/+1/confirm?hl=en&url=
			<?php if(is_home()){echo home_url();}else{the_permalink();} ?>" target="_blank" title="Plus one this page on Google">
			<i class="fa fa-google-plus"></i>
		</a>
	</span>
</div>

A little bit of CSS to make it pretty…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
article #social-sharing {
  line-height: 14.8px;
  font-size: 10px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .9px;
  margin-bottom: 15px;
}
 
#social-sharing > .sharing-icon{
  font-size:2rem;
}
 
#social-sharing > span{
  margin-right:15px;
}
article #social-sharing {
  line-height: 14.8px;
  font-size: 10px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .9px;
  margin-bottom: 15px;
}

#social-sharing > .sharing-icon{
	font-size:2rem;
}

#social-sharing > span{
	margin-right:15px;
}

And voila! Simple, lightweight sharing icons with no impact on page load, and styled to perfectly match my theme. You can test them out below by sharing this post…

Share This:

2 Responses to “Lightweight Social Sharing Buttons for WordPress without Javascript”

  1. Awesome! I tried this and it works really good and has no impact on the page loading time. I styled it a little bit differently from your design :) .
    Big thanks for the tip :D !

    • Hi!

      Thanks for stopping by. I just had a look at your implementation and it looks great!

      Glad you found this useful :)

      Cheers

Leave a Reply to Tarkan