Social Networks Logos

Create Your Own Fast Social Sharing Buttons For WordPress

| 73 Comments

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:

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:

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:

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:

Facebook:

Reddit:

Stumbleupon:

Digg:

LinkedIn

Del.icio.us:

Google+

Pinterest

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:

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:

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:

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.

Categories: Code & Snippets, Social Media | Permalink

What next?

Hire me

If you couldn't quite manage this yourself, find it too intimidating, or just don't have the time to do it, you can always hire Dave to do it. Please get in touch so that we can discuss your needs.

Leave a comment

If you have a question, update, or comment about the tutorial, please leave a comment. I try and respond to every comment, though it may take a few days, so please check back soon.

Let a WordPress Expert help you

Do you want to try this, but feel like you need a helping hand, in case something goes wrong? My service, The WP Butler, gives you access to WordPress expertise whenever you need it. Better yet, I'll keep your site backed up, updated and secure, so that you don't have to worry about it. It's all part of the service. Use coupon DIWW and save 15% on all plans.

Visit The WP Butler

Author:

Dave has been tinkering with WordPress for many years, and he now shares his WordPress knowledge here on Do It WIth WordPress to help others realise its impressive power. He can also be hired to help with your WordPress needs. Dave, who is British, is married to his best friend, Marti, with whom he has a beautiful daughter, Ellie. When he's not dabbling with WordPress, he's probably eating Triscuits or hummus, watching an indie film or British TV show, spending time with friends or family, or exploring the world.

73 Comments

  1. 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!

    • 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!

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

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

        • 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. 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?

    • 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. 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!

    • 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

    • 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. 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!

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

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

  6. I’m kind of confused. Is this code the way to make the cool Facebook and Twitter subscription buttons you have on your site? Is there a plugin that can do something similar? I’m working with a theme I will probably change so not crazy about the idea of hand-crafting with code. (And I goof up code, I’m afraid)
    In the meantime, I saw your comment above about being forward. I appreciate your low-key but super smart guru approach. So I rated your site on Alexa with this comment:
    Dave Clements really knows his WordPress and knows how to communicate in clear English prose. He takes the time to share powerful strategies (including code) to make WordPress do what users want and need. His site has zero fluff and he goes where others fear to tread – the mark of true competency. He also is patient and friendly, and does his best to answer comments respectfully (when most of us would be tempted to conclude the questioner was beyond hope). If I had a criticism of Dave it would be that he urges us all to to become coders. If I had a compliment for Dave it would be that he encourages us all to become coders! Recommendation: Be prepared to put on your thinking cap. To find an individual so fluent in both code and English is remarkable, and it is with enthusiasm that I select five stars (fantastic) as the appropriate Alexa ranking for doitwithwp dot com. AstroGremlin

    • Hey,

      This tutorial will create the kind of buttons that I have at the bottom of my posts (a set of 4). You can choose the image to go with it though, so it can look however you want it to look. You could avoid the issue of changing themes by creating a functionality plugin (which I’ll be writing about soon) and then your functions won’t be affected by changing themes.

      As for your Alexa review, I really appreciate you taking the time to do that – it means a lot to me. I am very low-key and so it’s hard for me to be bold and ask for these kind of things, so for you to step forward and do that is a big deal to me. I really appreciate the kind words and the support.

      Take care mate.

  7. I see, Dave, these buttons are for sharing ala Add To Any. I keep getting frame error messages from AddToAny so perhaps a better solution on that. Still figuring out the social media angle (and just created a Twitter account for my blog) so your buttons on the upper right are intriguing – lets a subscriber find the Twitter version and follow (assuming anyone would want to! :)
    A sincere pleasure to acknowledge your value to the WordPress blogging community, Dave. Just yesterday I used your tip on No Follow to modify my comment pages to give back link juice. Your low key approach is an asset — you aren’t so busy showing off being an expert and using jargon that you forget your readers’ comprehension!

  8. I think you should also add the Google+ button! It’s going to have a great impact. Let me know what you think of it.

    • I probably will include the Google+ button. However, at the moment, I can’t use Google+, just because Google haven’t activated it for users of Google Apps (which I am). So as soon as they get their act together, you can rest assured that it’ll be on here ;)

  9. Really appreciated stumbling upon this. Those social share plugins always seem to me a bit cumbersome. Thought I might chime in on the google+ front. Now that google buzz is gone, I did find a link that allows for a google+ share without javascript. Thought I might share here:

    https://plusone.google.com/_/+1/confirm?hl=en&url=http://www.your-url/

    Cheers.

  10. Thanks for putting this together Dave, it was a life saver on one of my projects. The blog we were loading social share buttons on was taking way, way too much time to load which as you know is bad for SEO (not to mention user experience). Using your method dramatically sped up the load time, it is appreciated.

  11. Two more things for anyone trying to implement homemade share buttons:

    1. The Facebook share button has been completely depreciated and the above link no longer works. In fact, most of the social share plugins now have inactive facebook share buttons too. However, I found a fix. At first glance, to amateurs like myself, it may seem daunting but I managed to get it to work without much trouble. Here is what I did:

    - Log in to Facebook Developers (https://developers.facebook.com)
    - Create an app. Give it a title like “Share.” Canvas url: http://www.yoursite.com
    - After app is created, copy the API ID/Key.
    - Use the following code for your facebook button:

    <a href="http://www.facebook.com/dialog/feed?app_id=XXXXXXXXXX&link=&redirect_uri=http://yoursite.com/“>

    There are more parameters that can be added:
    https://developers.facebook.com/docs/reference/dialogs/feed/

    2. In order to avoid markup validation errors, replace the “&” character in the above links with “&”

    We don’t need no stinking plugins.
    Cheers.

    • Thanks for that. Truly appreciate you coming back to update everyone with current information. People like you rock :)

    • Correction: Please replace the above code for a facebook share button with this:

      href=”http://www.facebook.com/dialog/feed?app_id=XXXXXXXXX&link=&redirect_uri=http://yoursite.com/”>

      Late night, hasty paste.

    • Actually the code is just not pasting.

      href=”http://www.facebook.com/dialog/feed?app_id=XXXXXXXXX&link=&redirect_uri=http://yoursite.com/”>

      Add php question marks.
      Use ampersand instead of “&”

  12. OK. You probably think I’m crazy now but I have a question about the twitter tweak. I got it working nicely and having an instantly created shortened url that can then be tracked is super cool. One small thing: I like to include share buttons on my index page and when you use the bitly function on the index page it ends up creating a shortened bitly url for every post on my site. Not an issue on a single post, only in the index. Wondering if there is a way to tweak the function to limit it to just the post associated with the click? I’m a complete hack myself and have no idea if or how such a thing could be achieved but maybe someone else out there knows how to make it happen. If so, this slightly OCD blogger will be a happy man.

    • This question can be disregarded. What happens is: when the twitter share button is used once on the index page, shortened urls are created for all the posts in the index. However, this only happens once. The same shortened urls will be used anytime someone shares from the index. I was concerned that new links would be created every time but this is not the case.

  13. Thanks for this post! I was looking for a way to add my own custom share buttons without using a plugin and this post is exactly what I needed as I build a theme from scratch and speed is my main goal.

    Question – on the Twitter share, I followed the instructions but for some reason on the share screen it appears as “WordPress Post Title Example – via @twitterusername”

    Any ideas as to what I’m doing wrong as to why a link to the post is not being inserted and the code is appearing instead?

    • Update: There’s an extra space just before the < ?php in the title code. If you're having the same issue as I was, just remove this extra space and it works perferctly. Thanks!

  14. Any plans for a Pinterest option?

  15. Hi Dave,

    thanks for a great post. it was exactly what i needed as i need to define the social options based on the language selection as one of my language preferences is chinese and most of the social options available are not accessible in mainland china. you mentioned suggestions for other social sites are welcome and I wonder if you could provide the following weibo, qq and renren.

    i have , unsuccessful, tried to pick apart the code from the share options available for these networks from this site

  16. I found this site on a Google search — on all my blogger blogs I had something similar that used no plugins, and wanted something similar for WordPress. You nailed it! Although, to reduce images even further, I created a CSS sprite with all of the button images, and hover states, and then used CSS styling to apply the icons directly to the links: it works like a charm!

    Thank you again.

  17. Hey Dave, are these live links – meaning, will they update with the number of people who have tweeted the post, shared it on facebook, recommended it on reddit? We recently moved to WordPress from Blogger, and one of the must-haves we did when we redesigned was including the “live” as I call them social media buttons with each post on the home page. On Blogger, we had static links to each service, that would grab the title etc, but wouldn’t update the number of people who had already recommended the post. I personally think it helps having the numbers. But that seems to take java, which is a drag on the page load. So I’m curious if there’s any fix that helps us get beyond the java drag but still lets us have real-time FB, Twitter and Reddit data with the links on the home page. Would this do that, would anything else? Any other tricks for speeding up page load with those services (we use Cloudflare, so will try Rocket Loader enabled for just those services in a few days). Thanks, JOHN

    • John,

      This tutorial just provides an image, so no, there are no live stats that come with it. You can use the official buttons from Twitter, Facebook, which aren’t too heavy, especially if they’re loaded in the footer. I think there are also ways using PHP that you can retrieve and display the number of likes/tweets of any given URL, though I’ve never pursued this.

      • Hmmm… okay thanks. I’ve tried the official buttons before, they’re a drag on the page if you have more than a few posts. Mashable came up with some alternative solution that we can’t figure out. I’ll keep asking around. Thanks.

        • It shouldn’t matter how many posts you have – it only requests the count for the page that you’re loading, so you could have 10,000 posts and it should take the same amount of time. Hope you find what you’re looking for though…

          • Sorry, I wasn’t clear. I realize that social media buttons on pages are not called up don’t slow down the pages that are called up :) I’m talking about a typical blog (or news) home page, in which you have multiple stories, or at least multiple headlines, on the home page. And when you have multiple live social media buttons on that page – meaning, ten stories have ten twitter buttons, ten reddit buttons (which are the worst) and ten facebook buttons, and all have live social media counts running, it slows down your page horrendously. That’s what I was talking about :)

          • Ahh, then yes, that’s the worst-case scenario really. I recently worked with a client who had 25 stories on the homepage and each story had 6 different social media counters, meaning 150 simultaneous HTTP requests (most of which were JS), which was abysmal for page load. In a situation like that, a technique like this is ideal. If the counters are critical, it might be worth looking into using PHP to retrieve the values for each story (and caching that information so that it isn’t requested on every page load).

  18. The Google Plus link fails. It brings up a blank page and never does anything. Any idea why?

  19. The thing that’s missing from these is that you don’t have any of the share counts so your missing the social proof from the links. Have you seen the javascript plugin Sharrre, it will allow you to create your own social share buttons with the share counts.

    https://github.com/Julienh/Sharrre

    • I haven’t, no, but thank you for the link. The intent behind doing it this way was to intentionally remove the Javascript which can be burdensome on page loads. I’ve not seen that plugin, nor do I know how “heavy” it is, but I appreciate the link and would love feedback from people who have used it.

      • I think that in most situations speed beats social proof hands down and that’s where your solution really shines :)

        I read a comment above suggesting most people like to show off their social share counts and most people I’ve worked with like to do the same so I would create a php function to pull the share counts and bundle it behind an infinate cache/purge when clicked method to prevent it having to execute anything on the page at all unless the share was from the current reader. I really think that a move away from javascript for social sharing is, and has been for a long time, the way forward. I just wish more people would agree with me.

        It’s strange that even how you wrote this in 2010 it’s still completely relevant today… because the plugin creators still bundle 2, 3 or 400kb of Javascript in their plugins!

  20. Thought I would check back in on this great post and thread. Just in case folks didn’t notice, facebook changed their protocols again recently and share buttons that were working previously are not always now. You might want to check yours. Specifically, they changed a number of required tags that will allow facebook to pick up the info it needs. I found that there were still some small details that I needed to sort through to get it everything to pass snuff, but here is a post by Yoast on the basics: http://yoast.com/facebook-open-graph-protocol/

    Super lame thing is the new Open graph requirements don’t validate with WC3. It’s just an unrecognized attribute that doesn’t have any effect on rendering or ranking but still. Sure would be nice if everyone could play nice with each other, huh?

    Anyways, here’s to staying off the plugins where we can.

    Cheers.

  21. Hi there,
    great tutorial really appreciated. Just one thing shouldn’t the original image say this:


    <img src="/images/twitter.png" alt="Tweet this!" />

    Not this:


    <img src="/images/twitter.png" alt="Tweet this!" />

    The code didn’t work without the removal of the additional /

    thanks again for the tutorial :)

  22. Great guide, really helpful.

    One question, is it possible to substitute pulling the feature image in the Pinterest hyperlink with other images in the post? Or would this require js?

    Thanks again man, great guide.

  23. Does anyone know how to do this with Buffer? I can’t find code for doing it without javascript.

  24. I Think the code for digg and stumble should be switched ;)

  25. A couple years later and this thread is still going strong. Thanks so much! I’ve searched high and low for a tutorial on how to create simple share icons. If you’re using Genesis and their great Simple Hooks plugin, be sure to check the Enable PHP box. It took me a couple of hours to figure out why it wasn’t working. Ugh!

  26. I forgot to say, the Facebook share link kind of confuses me. We still need to create a Facebook app for it to work, right? I saw the Yoast link, but sometimes his posts are over my head.

    • No, you shouldn’t need an application to use this functionality I don’t think

      • I’ve installed the links and wanted to contribute to this discussion in case someone else experiences the same thing.

        When I click the Facebook link, it just takes me to my Facebook page. It doesn’t register my blog post at all and give me the chance to share it.

        Reading through the comments, I assumed there’s something else I need to do. I realize you’re not tech support, per se, but I would love to figure out how to remedy this problem.

        My website isn’t ready for public consumption yet, but I triple checked and correctly copied the code.

        Thank you!!

  27. Thank you for this awesome article and your generosity! I’m working in the Genesis parent theme so I don’t have access to the single.php file. I’m going to see if I can hook into the code some other way. I wonder how this can work in a widget in a sidebar?

    -David

  28. Hi Dave,

    Thanks for this. Exactly what I was looking for.

    Just one quick question:

    is there anyway to have the Facebook and G+ open in a pop up? (don’t want to send the visitors off where they may get distracted and forget about me, lol).

    Right now only twitter does that.

    Thanks in advance.

  29. Suggestion: It would be great to use css sprites for the image. Using css sprites has great value. Can you do that please?

Leave a Reply