By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
SmartData Collective
  • Analytics
    AnalyticsShow More
    data analytics in sports industry
    Here’s How Data Analytics In Sports Is Changing The Game
    6 Min Read
    data analytics on nursing career
    Advances in Data Analytics Are Rapidly Transforming Nursing
    8 Min Read
    data analytics reveals the benefits of MBA
    Data Analytics Technology Proves Benefits of an MBA
    9 Min Read
    data-driven image seo
    Data Analytics Helps Marketers Substantially Boost Image SEO
    8 Min Read
    construction analytics
    5 Benefits of Analytics to Manage Commercial Construction
    5 Min Read
  • Big Data
  • BI
  • Exclusive
  • IT
  • Marketing
  • Software
Search
© 2008-23 SmartData Collective. All Rights Reserved.
Reading: Improving Website and WordPress Performance with Hard-Coded Share Buttons
Share
Notification Show More
Latest News
data analytics in sports industry
Here’s How Data Analytics In Sports Is Changing The Game
Big Data
data analytics on nursing career
Advances in Data Analytics Are Rapidly Transforming Nursing
Analytics
data analytics reveals the benefits of MBA
Data Analytics Technology Proves Benefits of an MBA
Analytics
anti-spoofing tips
Anti-Spoofing is Crucial for Data-Driven Businesses
Security
ai in software development
3 AI-Based Strategies to Develop Software in Uncertain Times
Software
Aa
SmartData Collective
Aa
Search
  • About
  • Help
  • Privacy
Follow US
© 2008-23 SmartData Collective. All Rights Reserved.
SmartData Collective > Uncategorized > Improving Website and WordPress Performance with Hard-Coded Share Buttons
Uncategorized

Improving Website and WordPress Performance with Hard-Coded Share Buttons

JoshCanHelp
Last updated: 2010/01/14 at 6:53 PM
JoshCanHelp
10 Min Read
SHARE

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…

Contents
Share Buttons Work… In A WayAdding Hard-Coded Share ButtonsSpecific Steps for Static SitesSpecific Steps for WordPressIf you’re using Twitter with WordPress

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 your 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.

More Read

Instagram data usage tips

5 Innovative Ways To Reduce Instagram Data Usage

Which JS Framework Is Best For Big Data Development?
Why the React JS Course Is Essential in Web Development Training
How Big Data Analytics on Twitter Can Help Predict Disease Spread [VIDEO]
Twitter Consistently Valuable for Analytics Initiatives

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 $shortlist, 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.

Related posts:

  1. Is having your own website a dated concept For the record, this is one of the reasons I…
  2. Improve WordPress Performance by 36 Percent I was approached recently by the owner of a popular…
  3. Website performance and health reports Google Analytics (GA) and Webmaster Tools (GWT) are used…

Link to original post

TAGGED: javascript, twitter
JoshCanHelp January 14, 2010
Share this Article
Facebook Twitter Pinterest LinkedIn
Share

Follow us on Facebook

Latest News

data analytics in sports industry
Here’s How Data Analytics In Sports Is Changing The Game
Big Data
data analytics on nursing career
Advances in Data Analytics Are Rapidly Transforming Nursing
Analytics
data analytics reveals the benefits of MBA
Data Analytics Technology Proves Benefits of an MBA
Analytics
anti-spoofing tips
Anti-Spoofing is Crucial for Data-Driven Businesses
Security

Stay Connected

1.2k Followers Like
33.7k Followers Follow
222 Followers Pin

You Might also Like

Instagram data usage tips
Big Data

5 Innovative Ways To Reduce Instagram Data Usage

5 Min Read
which JS framework is best
Big DataExclusiveProgramming

Which JS Framework Is Best For Big Data Development?

6 Min Read
react JS for development training
ExclusiveProgramming

Why the React JS Course Is Essential in Web Development Training

5 Min Read

How Big Data Analytics on Twitter Can Help Predict Disease Spread [VIDEO]

1 Min Read

SmartData Collective is one of the largest & trusted community covering technical content about Big Data, BI, Cloud, Analytics, Artificial Intelligence, IoT & more.

ai in ecommerce
Artificial Intelligence for eCommerce: A Closer Look
Artificial Intelligence
ai is improving the safety of cars
From Bolts to Bots: How AI Is Fortifying the Automotive Industry
Artificial Intelligence

Quick Link

  • About
  • Contact
  • Privacy
Follow US

© 2008-23 SmartData Collective. All Rights Reserved.

Removed from reading list

Undo
Go to mobile version
Welcome Back!

Sign in to your account

Lost your password?