One of the most basic things you can do to integrate your social media accounts and your website is install social sharing buttons. However, there are probably well over a hundred different plugins and methods for using social sharing buttons out there, and many of them are out of date. They look perfectly fine, they work, but they have a few drawbacks.
One such drawback stems from the fact that the web is becoming an increasingly mobile place. More and more people are using mobile devices – smartphones, tablets, smartwatches, and more – to do their internet browsing. It’s all well and good to have social sharing buttons on your site, but if you don’t have responsive buttons, they’ll break or not display when mobile users browse. When as much as 60% of your traffic comes from mobile, you can’t afford to ignore them and their benefits.
How can you go about implementing social sharing buttons that respond to the device the user is browsing with? It’s actually not as complex as it may seem.
The first step is, obviously, that you need to have a blog. I’m going to talk a little about using a blog to cater to mobile users. There’s more to it than just having a responsive design, after all.
As a mobile browser myself, one of the worst things you can do is use a bunch of advertisements to try to make money off your blog. It’s one thing to have a banner ad or a mid-content box ad. It’s quite another to have pop-ups and finicky little ads that show up all over. I’ve browsed a few pages that had so many ads they layered over each other, and it was a minefield trying to tap the tiny X that closed one so I could even see the X for the next one. I can tell you one thing; I blacklisted that site immediately. Even if they clean up their act, I’m never going back.
Usability is huge when it comes to the web experience, and it’s even more important for mobile users. Remember that Google has some best practices as well, including the ease of ability for closing ads. When your user experience is crap, you’re going to lose users and you’re going to lose search ranking.
There’s also another consideration that many bloggers don’t think about when they’re running their so-called mobile friendly blogs. That consideration is mobile friendly content. Simple blog posts are fine, of course, but the topics may need to be tweaked to be relevant to mobile audiences. If you’re writing about how to use a web app, you might consider that a lot of your users may want to use the mobile version of that app. If the app works differently, or is laid out in a different way, why not cater to mobile users by including mobile tutorials as well?
Another thing to keep in mind is locality. A lot of mobile users have desktops or laptops as well. They use their phones or tablets to browse when they’re out and about, not at home. They don’t necessarily have the luxury of being able to reference your content later, or they may forget about it. They may also not want to read about content that’s only really helpful when they’re on their home PCs.
I’m not saying you should dedicate your entire site to mobile users. What I’m saying is that you should include some more mobile-focused content in your content plan. If you can include mobile steps in an evergreen tutorial, do so. If you haven’t written something relevant to mobile users in a while, write something now. It’s all about keeping them in mind.
The second thing is to make sure you have the relevant social media accounts set up and in active use. If you’re not using an account, for the love of god, don’t put a button on your site to promote it. People will follow you and find no value. They’ll click through and see the most recent post from months or years ago. It does you no good and it makes them less confident in your other social profiles.
If you’re only using one or two social networks, make sure you’re choosing to only include the relevant buttons. If you have a social plugin that has Facebook, Pinterest, Twitter, Buffer, and Google+ on it, but you only use Facebook and Twitter, those other buttons are red herrings. They’re going to waste, and every click on one of them is a loss.
If you’re only really using one or two social networks, you might not even need a social sharing plugin. Every network has buttons of their own, which are often tiny and compatible with both desktop and mobile users. By including those buttons, and other forms of social integration, you can hook people without a plugin with unnecessary data.
What do I mean when I say other forms of social integration? Here are some examples.
These are ways you can integrate social networks into your site without using social buttons. If you don’t have enough profiles to fill out a tray of buttons, consider using these instead and simply having smaller individual buttons in a prominent place.
I don’t have a particular social media button plugin on hand for you. You’re going to have to do some searching to find one that suits your particular needs and theme. If you’re using WordPress, that’s easy; their plugin database is very robust and there are a bunch of other options not published in their free directory as well.
If you’re not using WordPress, you’ll have to find a plugin that works with your setup. For example, this jQuery plugin will give them to a Drupal installation.
Regardless of what plugin you choose, you’re going to want to make sure of a few things.
Really, to be honest, most plugins you find will meet most of these criteria. You shouldn’t have a problem finding one that will work for you.
Installing social sharing buttons will be a varied process depending on the options you’re using.
Some plugins will be easy to install. Just drop some files in your host in the way the readme specifies. Then when you go into your dashboard – this is typically for WordPress – you will be able to navigate to a new option for configuring those buttons. That’s where you’ll link the profiles you want to use and display the buttons in the way you want them.
Some particularly bare-bones plugins will work in a similar way, but will require that you make tweaks to some files specifically in order to change configuration options. Color specifically is often a tweak you have to make manually. This shouldn’t be hard, but if you’re not sure of what you’re doing, double-check the documentation. Or send it to a developer to help, if you have one on hand.
Plugins on non-WordPress systems will be a bit trickier, but as long as it’s not custom code running on a custom system, you should be fine. If it’s all custom, I have to ask why you’re not just having your developer do all of this for you. It’s not my place to tell you how to run your business, of course, but ideally the one in charge of maintaining your site will be the one making changes to the code.
If you’re using more standard plugins like the Facebook like box, you can get the code from the social network itself. Facebook actually has a range of different plugin and button options, and you can get the code right from their developer center. From there it’s easy to find the place on your site you want the buttons and paste the code in. Unless you change something other than adding the code, it should work just fine.
This is the final step, but it’s perhaps the most important. You need to test your buttons on various devices. I recommend at least four; a desktop device, a tablet, an Android phone and an iPhone. If you happen to have people browsing your site from a smartwatch or a smart TV, or any other exotic device, you should try to test from those environments as well. You can’t cover all the bases, but you need to make sure that they actually function.
There are three things you should look for when you’re testing. The first is basic appearance. Do the buttons look the way they should on each device you’re using to test? Are they the right colors and sizes? Are they positioned where you want them?
The second is responsiveness. You can usually test this on a desktop system simply by grabbing and resizing the window, though that only works if the responsive code you’re using determines layout by screen size. If it takes device profile, you’ll need to test in other ways. Make sure when you change resolution, the site and the plugin change appropriately, and that there’s no weirdness for certain layouts.
Finally, and most importantly, you need to test function. Make sure the buttons do what you want them to do, take you to the right sites and the right profiles, share the right posts, and generally function the way they’re supposed to. If they don’t, you’ll need to figure out why. If you’re not keen to dig into code, it might be a sign you need to find a different plugin.
Drew Hendricks is the CMO of Blogpros and a contributing writer to Inc., Entrepreneur and Success.