HTML5 and CSS3 Social Media Icons Without Images

As a web developer you’re always looking for ways to innovate and do things in a more efficient manner as new technologies emerge and browsers become more sophisticated. One of the ways that web developers are attempting to innovate more is by using CSS, SVG, embedded icon fonts and a number of other techniques to configure layouts and handle the visual look and feel for websites without relying on the use of images (as they would have had to in the past).

There are many benefits to this. For one, the greater number of images you use, the greater number of HTTP requests you are going to have to make. As a result your page is going to inevitably load slower due to the greater number of requests. However if you can achieve the same effect (or a similar effect) visually without the use of images (or, at the very least, fewer images) through the use of CSS3 gradients, icon fonts, SVG graphics (drawing shapes in the browser using XML) or other techniques, then the quicker load time will be a better user experience for your users. There’s also an SEO benefit to this because Google even takes page load times into account as one of it’s considerations when ranking web pages. So it’s in your best interest to have as fast a page load time as possible.

On top of this, with the emergence of Retina display on the iPhone, iPad and other devices, the whole process of serving up images now has/had another consideration thrown into the mix. If your device supports Retina display, you’d want to serve up the larger 2X sized retina images. If it does not, for efficiency’s sake, you’d want to server up the smaller images. This means 1) detecting in your website’s code whether or not the client is using a retina-display device and 2) figuring out how to properly serve up those images based on that condition. There are some really good tutorials on various techniques on how to handle this out there, but you still have to put the effort in.

Or wouldn’t it be nice to use one of the the above mentioned technologies and have retina stuff all taken care of due to the fact that visual components are essentially being drawn in the browser? Here again, there can be tremendous benefits to having to rely on images.

More could definitely be said about the subject, but one place where it may be of great benefit to leave the use of images behind is when it comes to displaying social media icons on your website. Just about every website out there has some sort of social media

Recently I’ve stumbled across a tool that is a great solution for creating icon based fonts and in this post specifically we’re gonna be talking about creating social media icons without the use of images by using an embedded webfont. These icons will render well in all modern browsers all the way back to IE8. IE7 not so much (but for that if you really wanted to you could use an image fallback). The result will be something like the following…

But it’s easy to make these different depending on how you style the CSS. That’s what’s great about not having to rely on images. The changes can be made in code, not in Photoshop!

Read More »

Simple Social Sharing Links for WordPress Without a Plugin

Today I am going to show you how to create very simple social sharing links for your WordPress blog. We all know that there are a gazillion different WordPress plugins out there to handle social media, but these may not always give you the exact customization that you want. Maybe you want to have text-only “share” links and the plugin does not support this. Maybe you want to use different icons than the ones the plugin provides. Maybe you want to format/position these icons differently from how the plugin does it by default. If this describes your situation, this post will help you get off to a good start with that.

So below are some basic WordPress ready sharing links for some popular social media websites. Please note that these links will work at the time this post was written. Websites often change their APIs and it is possible that the URLs to share out content on these social sites may have changed since the writing of this post… so be sure to check that all of these examples still work. If any do not, consult the website of the social platform in question and look for any advice on blogs and forums on how to change the link to something that will work with an updated API. And please do let me know if any of these do not work as well. 🙂

I have just kept the format of the links as plain text since it’s the most basic HTML that most people probably understand best. All you have to do is simplly paste the following code into the index.php or single.php or any other .php file of your WordPress theme. From there you can format and style these links however you like.

<a href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php the_title(); ?>&p[url]=<?php the_permalink(); ?>" target="_blank">Facebook</a>
<a href="http://twitter.com/home/?status=<?php the_title(); ?>%20<?php the_permalink(); ?>" target="_blank">Twitter</a>
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">Google+</a>
<a href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">Digg</a>
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">StumbleUpon</a>
<a href="http://delicious.com/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">Delicious</a>
<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">Reddit</a>

And that’s all there is to it!