Skip to content

Create Your Own Fast Social Sharing Buttons For WordPress

06 December 201014 comments Code, Social Media, Wordpress

Social Networks Logos

Image courtesy of stabilo-boss

Social bookmarking buttons are essential for any blog these days – they’re vital to helping people share content that they find useful and interesting. And with WordPress of course, you have a whole host of plugins to help you add social sharing buttons to your site.

In my experience however, it’s hard to find one that displays the sharing networks that you want to use, with the icons that you want, in the alignment that you want.

In addition, many of these plugins either use Javascript, or a whole host of external references, which are a burden on your server and really slow down your site load time. Aside from being a metric by which Google ranks sites now, it’s well known that sites with slow load times have higher bounce rates, as people look elsewhere for their information.

So I set about creating my own social sharing buttons for Do It With WordPress, which helped removed the last remaining external references on my site and speed up my load time to less than two seconds.

Find your perfect icons

Since you’ll be installing your own buttons from scratch, you’ll need the images that will represent each sharing site that you want to make available from your site.

You can use text links if you prefer, however, I strongly advise that you use images, as your readers will be searching for the familiar iconography to share your article, not a small text link.

To find icons that suit your site, just do a Google search and look for “social sharing icons”, or something along those lines. You’ll find a whole array of icon packs with no end of design varieties. For example, check out this article from Specky Boy, which has a collection of some great social bookmarking icons.

You’ll obviously need to find a set which has icons for every network that you intend to use – you don’t want to mix and match icons from different sets because it will look rubbish.

Upload all the icons to your server so that you will know the URLs of all the images. I recommend placing them in an images folder in your active theme’s folder under the wp-content folder.

Where to add the code

The whole idea of using social sharing buttons is to include them automatically on each post, so that your readers can share every article on your site. This also eliminates the need for you to put them in every post manually (though that is certainly possible if you like making life harder for yourself).

In order to do that, you need to code it into your theme files, which requires editing your theme files, namely single.php (which is the file that is used to display single articles). Have a look at this article if you need a little help in learning how to edit your theme files.

Find where you want to put your social sharing icons in single.php. If you want to put them after the content, you’ll need to look for the following line of code, which displays the main content and start inserting it after that:

<?php the_content('Read more &raquo;'); ?>

Of course, you can put the icons elsewhere – just find the appropriate point in single.php and insert your code there instead. Before you get going though, just be sure to make a backup/copy of your file in case you mess it up.

Creating the buttons will consist of two steps: adding the images (icons) that people will click on and then adding in the code that will link to the sharing site when the icon is clicked.

Add the images

Once you’ve settled on where the icons are going to go, start adding in the images. You’ll need the URLs of the images, which you uploaded earlier.

The syntax of the img tag will be as follows:

<img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="Tweet this!" />

This is based on the images being uploaded where I mentioned earlier in this article (/wp-content/themes/activetheme/images/). You can change it to a specific URL (starting with http://) if it is located elsewhere. Obviously, you’ll need to change twitter.png to the appropriate filename for each network that you’re accounting for. Likewise, the alt tag will also change (the alt tag is text that appears if an image fails to load).

Repeat this process for all the icons that you’ll be adding.

Add the code

Now you’re ready to add the code to the each image. You might even want to save your progress and view an article to see if the images are displaying the way you had hoped.

All we’re going to do is add a hyperlink to each image, so that when they’re clicked on, they go to the sharing site and send the appropriate information.

In order to add a hyperlink to each image, all you need to is add the following code before and after the img tag that you added in the previous step:

<a href="" title="">
<img>
</a>

The href and title will change depending on which network you are working on. Use the following lines of code to create a hyperlink to each sharing site:

Twitter:

<a href="http://twitter.com/home/?status=<?php the_title(); ?> - <?php the_permalink(); ?>" title="Tweet this!"></a>

Facebook:

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Share on Facebook."></a>

Google Buzz:

<a href="http://www.google.com/buzz/post?message=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>" title="Buzz it!"></a>

Reddit:

<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Vote on Reddit"></a>

Digg:

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Stumble it"></a>

Stumbleupon:

<a href="http://digg.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Digg this!"></a>

LinkedIn

<a href="http://www.linkedin.com/shareArticle?mini=true&amp;title=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>" title="Share on LinkedIn"></a>

Del.icio.us:

<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Bookmark on del.icio.us"></a>

Tweaking the Twitter syntax

By virtue of the service, you need to make sure that Twitter messages are as short as possible. You also want to leave room for the reader to add a few words of their own about your article. (Thanks to Kimberly and Brian for this suggestion)

As such, you may want to convert the post URL to a short URL. I’m going to show you how to do using the most popular URL shortening service, bit.ly.

First, you need to create a function to tell WordPress to get a short URL for your post. To do this, you will need a bit.ly account. Once you’ve created an account, go to your Account Settings and take note of your API key and your username.

Now open your functions.php file, scroll all the way to the end and paste in the following code, substituting in your username and API key for yourbitlyusername and yourbitlyAPIkey:

<?php
function getBitly($url) {
$bitly = file_get_contents(http://www.doitwithwordpress.com/spacer.gif);
return $bitly;
}
?>

Save your functions.php and head back to single.php and change the link for your Twitter button to the following, which replaces the normal full URL with a shortened URL using your bit.ly acount:

<a href="http://twitter.com/home/?status=<?php the_title(); ?> - <?php $bitly = getBitly(get_permalink($post->ID)); echo $bitly ?>" title="Tweet this!"></a>

You can even take it a step further, like I have and drop in your Twitter username to the status message, so that you become part of the conversation. For example:

<a href="http://twitter.com/home/?status=<?php the_title(); ?> - <?php $bitly = getBitly(get_permalink($post->ID)); echo $bitly ?> via @daclements" title="Tweet this!"></a>

Are there any networks that I didn’t cover that you’d like to see a link for? Did you have trouble getting it to work? I’d be glad to help you figure it out.

Related posts:

  1. Facebook and Twitter Buttons Without Plugins
  2. How to Create, Format and Fine-Tune a Post in WordPress
  3. How to Create a Sitemap for WordPress
  4. Add a Facebook Like Button to Your Site in 2 Minutes
  5. Essential Plugins For Any WordPress Installation

About the Author

Dave Clements designs awesome websites in his spare time, along with eating Wheat Thins, spending time with friends and family, watching Indie films and playing with his array of Apple products.

Like it? Share it!

Tweet this!Share on FacebookStumbleUponDigg This!

Comments

  1. bbrian017 December 6, 2010

    Hi Dave,

    I’m a huge fan of adding social buttons to my website. I think the buttons you add should be determined by the niche your in. for example on the blog engage community blog I don’t add many because the articles don’t get submitted much to other sites. But I add blogengage, digg, stumbleupon, tweetmeme and that’s about it.

    On my marketing and SEO blog I have many more because those articles can be submitted to many more sites as opposed to the blog engage blog.

    You should have the tweetmeme here on your blog. right now just to tweet this I have to go to tinyurl.com add your url, get a shortened url, go to twitter and submit it. That’s a lot of manual work buddy!

    • Dave December 6, 2010

      Brian,

      I’d have to agree. I’ve limited the number of networks that I use on here because some of them just aren’t used all that much.

      I don’t have the tweetmeme button, but I do have a submit to Twitter button. It’s in the four buttons at the bottom of the post. However, the fact that you weren’t able to easily find it is indicative of an issue in itself. Did you see all the buttons? Or were you looking specifically for tweetmeme button instead of a Twitter-branded icon?

      Thanks for your in-depth comment. Always appreciated!

      • bbrian017 December 6, 2010

        Hi Dave, oh I seen the button but with twitter comes little or no available characters in a tweet. By using your current button it takes the full url which is very big. So I had to go to tinyurl.com, get a small url, I had to come back to your blog and find your twitter name so I could also add that.

        I guess it’s all about time really. Today I had spare time so I took the time to get all the needed information. On a busy day I might not and the sad part is your blog pays the price. I know if you don’t like tweetmeme there is also another one people use I see often and it also works great.. I don’t however know the name of that one.

        • Dave December 6, 2010

          Brian,

          Well, yes, there is that issue. I don’t use the Twitter website much (at all) as I use it on my iPhone, but I was under the impression that Twitter automatically shortened URLs… I could be very wrong there. I might have to think of a way around this. There must be a way I can get it to create a short URL.

        • Dave December 9, 2010

          Hi Brian,

          Just wanted to let you know that, per your recommendation, I have updated the tutorial to allow you to return a short URL using bit.ly for the Twitter status message and I’ve also incorporated this into my own buttons here on Do It With WordPress.

          Thanks for the suggestion. Really appreciate your candid feedback!

  2. Mike December 6, 2010

    Hi Dave,

    Creating your own button for your blog is a great way to speed it up, but should you concern about adding or removing the code later? I’m using some share buttons for my blog and I could say, I like them much. Although these buttons take some seconds to load and often dragged the page speed down, it’s necessary to include them inside the blog. By the way, I don’t see any share button like Share on BlogEngage, SERPD,… on this blog. You don’t like them, do you?

    • Dave December 6, 2010

      Mike,

      If you’re using a free theme from the wordpress.org repository, then yes, updating your theme in the future would be an issue as the code you entered will simply be overwritten. You either need to buy a premium theme, take note of code you insert, so that you can put it back after updating, or not update your theme.

      I am a member of BlogEngage, but I prefer to keep things on my site as clean and minimalist as possible, so while I don’t doubt that the occasional person might find a BlogEngage button useful, it just clutters up the interface for the majority of users. For that reason, I just use the four most popular networks. If someone wants to share elsewhere, they have to do it the old-fashioned way! You can’t cater to everyone, but you can cater to the masses.

  3. Kimberly Castleberry December 9, 2010

    I cant say I’m a fan of this for Twitter… it does not shorten the link which makes the tweet hard to retweet, it does not include your twitter ID which messes with relationship building for all three parties involved (you, the person that hits the button, and the person that reads the tweet). It takes more code than that to be effective with twitter and I’d highly suggest just using the code for the official tweet button, gotten easily from twitters site, and set up to include your twitter ID. Great buttons all around though!
    Kimberly

    PS: Found your blog through Brian’s recommendations on BlogEngage and glad I did!

    • Dave December 9, 2010

      Kim,

      I’ve received this recommendation from Brian also, so I really appreciate the feedback. Clearly it’s a very valid point. I’m working on a way to get a short URL for the Twitter links.

      I’m also very thankful for your thought out and candid comment. They’re not very common these days, so thanks again. Once I update the tutorial, I’ll reply to your comment again

    • Dave December 9, 2010

      Hi Kim,

      As promised, I updated this tutorial based on your feedback and have now included a section for changing the Twitter syntax to return a short URL instead of the full URL.

      Thanks again for your thorough input. It’s comments like yours that make me strive to improve and find shortcomings in my tutorials.

  4. Kimi December 16, 2010

    Not a new tip, but still very very useful for wordpress bloggers who want to learn the coding and template hierarchy.

    I too, do not use any plugins for my social media buttons.

    Thanks!

    • Dave December 16, 2010

      Glad to hear it. Looks like you also have email and Alexa Review to your sharing options as well. Can’t say I’d heard of Alexa Review before. Do you see this used a lot?

  5. Kimi December 16, 2010

    Dave,

    I have just put this alexa review not so long ago..,

    The idea comes because i removed the alexa widget, but i still want people to review my blog in alexa at least..

    But not luck so far LOL..

    Cheers,

    Kimi.

    • Dave December 16, 2010

      I suppose you’re also subject to the rule of, “If you don’t ask, you don’t get”. I’ve got to be a little better at being more forward for asking for these kind of things.

Add a Comment

Required

Required

Optional

CommentLuv Enabled
Site map WordPress Tutorials by Do It With WordPress News