Menu

Improving Website and WordPress Performance with Hard-Coded Share Buttons

splitter-cable
Increasing the page load speed of your website has been proven to increase conversion rates (reduce the number of people who get fed up and leave), increase site usage (time on site and pages per visit), and reduce the chance you’ll be taken down by a sudden spike in traffic. WordPress in particular is fairly resource heavy right out of the box so speeding up everything else is a critical piece of running a site on this platform.

But I’m not going to talk about increasing WordPress speed, I want to show you how to improve you page load speed by cutting down on the number of external scripts you’re loading on a particular page. We’re going to do this by hard-coding share buttons into your theme.

Share Buttons Work… In A Way

Share buttons on your post help your content reach a greater audience by creating easy channels to social networks. By placing a “share on Twitter” button or “post on Facebook” icon, you make it easy for readers to bring the page to their network and increase your traffic.

The problem with most of the share badges out there is that they load a Javascript file from an external source which can take several seconds on a bad day. Depending on where you placed the badge, your content could be held back while the script takes its time and your readers bail.

Javascript calls are an easy way for Facebook and StumbleUpon to put their links on your page but most networks also have a way to share through a URL. Just hand over the link to your page and, in some cases, a title and you’re presented with a simple form to complete and submit. Your content gets to the share site just as it would with the Javascript, sometimes even faster.

Adding Hard-Coded Share Buttons

All we need to do is display a nice icon and a link to the social network that includes a link back to your page. For my site, I made a few icons using badges I’ve found around the web which you’re welcome to download and use (please don’t link to mine, right-click, save-as, and upload for yourself).

The code for each site is very simple:

Twitter:
<a href=”http://twitter.com/home/?status=[[SHORT TITLE + SHORT LINK]]” title=”Post to Twitter”>
<img src=”[[PATH TO IMAGE]]/twitter-icon.png” alt=””/>
</a>

Plurk:
<a href=”http://plurk.com/?status=[[TITLE]] [[URL]]” title=”Post to Plurk”>
<img src=”[[PATH TO IMAGE]]/plurk-icon.png” alt=””/>
</a>

Delicious:
<a href=”http://delicious.com/post?url=[[URL]]&amp;title=[[TITLE]]” title=”Post to Delicious”>
<img src=”[[PATH TO IMAGE]]/delicious-icon.png” alt=””/>
</a>

Digg:
<a href=”http://digg.com/submit?url=[[URL]]&amp;title=[[TITLE]]” title=”Post to Digg”>
<img src=”[[PATH TO IMAGE]]/digg-icon.png” alt=””/>
</a>

Facebook:
<a href=”http://www.facebook.com/share.php?u=[[URL]]&amp;t=[[TITLE]]” title=”Post to Facebook”>
<img src=”[[PATH TO IMAGE]]/facebook-icon.png” alt=””/>
</a>

MySpace (I think this is right but I don’t have a login to test it):
<a href=”http://www.myspace.com/Modules/PostTo/Pages/?l=3&amp;u=[[URL]]&amp;t=[[TITLE]]” title=”Post to MySpace”>
<img src=”[[PATH TO IMAGE]]/myspace-icon.png” alt=””/>
</a>

Ping.fm:
<a href=”http://ping.fm/ref/?method=microblog&amp;title=[[TITLE]]&amp;link=[[URL]]” title=”Post to Ping.fm”>
<img src=”[[PATH TO IMAGE]]/pingfm-icon.png” alt=””/>
</a>

StumbleUpon:
<a href=”http://stumbleupon.com/submit?url=[[URL]]&amp;title=[[TITLE]]” title=”Post to StumbleUpon”>
<img src=”[[PATH TO IMAGE]]/stumbleupon-icon.png” alt=””/>
</a>

LinkedIn:

<a href=”http://www.linkedin.com/shareArticle?mini=true&amp;url=[[URL]]&amp;title=[[TITLE]]&amp;source=[[DOMAIN]]” title=”Share on LinkedIn”>
<img src=”[[PATH TO IMAGE]]/linkedin-icon.png” alt=””¬† />
</a>

Place these anywhere you’d like on a static page or in the WordPress theme file that controls single posts (typically single.php). You’re about halfway there but the next few steps differ depending on what platform your site uses.

Specific Steps for Static Sites

For each page that needs share links, you’ll need to paste the HTML above and replace replace everything with double square brackets with the information from the page.

  1. Replace [[TITLE]] with a short description of the page
  2. Replace [[URL]] with the direct link to the page
  3. Replace [[PATH TO IMAGE]] with the direct path to the folder where your share icons are being stored. Also, make sure the image names here are the same ones you’re using.
  4. If you’re using Twitter, replace [[SHORT TITLE + SHORT LINK]] with no more than 140 characters including a short description and a shortened URL (go to bit.ly to get a short URL). The savvy Twitter users bill include their Twitter handle and leave enough room for RTs.

Now load the page and test that the images appear and that each of the share links takes you to the right place.

Specific Steps for WordPress

WordPress Logo

What we’re going to do is use built-in WordPress functions to hand over the current URL and title to the links you created above. We need to replace everything with double square brackets above with functions that will automatically add the required info. Make sure to follow the next section if you’re using Twitter.

  1. Replace [[TITLE]] with <?php the_title(); ?>
  2. Replace [[URL]] with <?php the_permalink(); ?>
  3. Replace [[PATH TO IMAGE]] with the direct path to the folder where your share icons are being stored. Also, make sure the image names here are the same ones you’re using.

If you’re using Twitter with WordPress

Sending the URL is simple for sites like Facebook and LinkedIn where the brevity of your message is not an issue but for Twitter we need to save characters where we can. Though a Bit.ly or Tr.im API call could handle shortening the URL for you, I prefer to create one before I post and add it as a custom field. This lets me track click-throughs for Twitter in one place (for me, on the bit.ly site). You’ll need to manually create a shortlink each time but, boo hoo, it takes 30 extra seconds.

First, we need to add a little snippet to grab the short URL and create a short title. After the loop starts…

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

…paste this…

<?php
$key = “shortlink”;
$shortlink = get_post_meta($post->ID, $key, true);
$shorttitle = urlencode(substr(the_title(), 0, 79));
?>

You now have two varibles, $shortlink and $shorttitle, that can be used when creating the HTML for the Twitter share badges. $shortlink is taken from the post (I’ll show you how to add it later) and $shorttitle is a shortened and URL-encoded version of the post title. These come together with your Twitter handle (below) to create a concise, complete Tweet. Now, just replace [[SHORT TITLE + SHORT LINK]] with…

RT%20@joshcanhelp%20<?php echo $shorttitle . ‘%20…%20’ . $shortlink; ?>

… and change “joshcanhelp” to your Twitter handle and you’re ready to go. What we’re doing is creating a tweet with the shortened title and URL that mentions your handle so you get Twitter credit.

When you create a post, you’ll need to create that shortened URL before publishing.

  1. Click the Save Draft button on the top right, then the “View Post” link in the yellow bar that appears at the top.
  2. Copy the URL out of the address bar and go to bit.ly (or similar).
  3. Paste in the URL in the field and click Shorten (or similar). You’ll be given a short URL.
  4. Copy this short URL and come back to your post¬† edit window. Scroll down to the bottom of your post to a section called “custom fields.”
  5. Click Enter New and type in “shortlink” into the field that appears. Now, paste the shortened link into the field on the right.

custom-field-wordpress

Click add and you’re ready to rock & roll. Now load the single post and test that the images appear and that each of the share links takes you to the right place.

Edit: This was published and enjoyed on Smart Data Collective to the tune of over 600 views and 14 retweets. Some of you might be aware that I’m contracted by the company that manages that site but I have no sway over published content at all, FYI.

top_read_SDC

Replies

Total: 8

Your email address will not be published. Required fields are marked *


  1. Tristan

    September 12, 2012 at 4:33 am  •  Reply

    Tristan says:

    You seem to still be coming up in Google for this so for anybody who finds this in 2012. It’s a bit easier now because all of these sites have developer pages that will create the code needed for you.

    For Facebook:
    http://developers.facebook.com/docs/reference/plugins/like/

    For Twitter:
    https://twitter.com/about/resources/buttons#tweet

    For Google+
    https://developers.google.com/+/plugins/+1button/

    • Josh

      September 12, 2012 at 6:06 pm  •  Reply

      Josh says:

      Tristan: thanks for the resources, I use them often. This post was for folks who wanted to cut down on the number of external scripts they are using. This is definitely still a relevant technique!


  2. mariano

    August 20, 2010 at 4:33 am  •  Reply

    mariano says:

    Nice one… did not know that….anyone has link to other similiar stuff ? thx Mariano


  3. Josh

    January 23, 2010 at 7:11 pm  •  Reply

    Josh says:

    OK, Danny, they’re moved.. let’s see what happens! I’ve got Google Analytics plugged in to track each share link and I’ll keep an eye on traffic increases from any one particular network.


  4. Josh

    January 18, 2010 at 10:03 am  •  Reply

    Josh says:

    The point is to read all the way through but, in reality, I don’t think everyone does. I know I’ve shared articles before I’ve read them thoroughly because of one quick point. This post is a good example. If I don’t have a WordPress site, I won’t read the last half of this. The first part is still relevant but the rest won’t help me.


  5. Danny Brown

    January 17, 2010 at 8:44 pm  •  Reply

    Danny Brown says:

    I can see your logic; but isn’t the point of a blog post to be read all the way through? How’d you know that you like it enough to share if you don’t make it to the end of the post (where the comments generally are)? :)

    Look forward to your experiment and see how both options compare. :)


  6. Josh

    January 15, 2010 at 3:37 pm  •  Reply

    Josh says:

    You make a good point but here’s my logic. You always see the top of a post so you’ll always have the chance to see the share links. Not everyone will get all the way to the comments section but everyone will be at the top.

    I think this deserves an experiment, though! Adding it to my list… would make a great post, no?

    Thanks for the comment!


  7. Danny Brown

    January 15, 2010 at 1:18 pm  •  Reply

    Danny Brown says:

    While a great idea, wouldn’t it be better to have them floating so they’re in your line of sight when commenting? I find a blog that has the share buttons around the comments are more likely to receive shares, as it’s a fresh call to action (whereas here, your hard buttons are still up at the top and I’d have to remember that in order to share). Just a thought.

"Policy"

If you've got something to say about the above, now is your time. I moderate for spam, relevance, and abuse but, aside from that, this is an open forum. I will not publish your email address but feel free to be anonymous. If you just have a general question or want to get in touch, my contact form is the best place for that. Thanks in advance!