Connecting Your Website to Social Media

Situation: That gal/guy from Marketing with the Instagram-perfect hair and just-right trendy wardrobe from an online boutique you’ve never heard of (but it’s perfect, because it’s small-run!) has just convinced you to “build social into the company website” and really go after your reputation online.

Great! Wait. How do we do that again?

There are a lot of ways you can make social networking an integral part of your core website itself – let’s look at a few.

The basics – links on pages

The simplest of the simple; no matter which social platforms you’re using, whether they have tools available for website administrators or not, you can connect your website to these social networks with a link here and there on your website.

Most of the time, you’ll see sets of social links in website headers or footers – such as the ones we have on our website. It’s also worth including them on your About or Contact pages if that makes sense. The job is to make it known you’re involved in these networks, usually by using their icons to demonstrate your involvement.

Last year’s hotness – widgets everywhere!

While not the norm any more (most sites opt for social sharing, logins, and meta data to connect to social), widgets and other visual plugins are still a valid and recognized way to bake social networks into your website.

Including a tool such as Facebook’s Page Plugin or Twitter’s Embedded Timeline on your website design lets users interact with the network directly from your website. You’ll use these either in a usual element like the sidebar or footer, or on a page like you’re About and Contact pages.
Facebook’s Page Plugins look as sharp as your profile lets them.
Including a Timeline on your website shows visitors how much (or how little) investment you have in a network.

These forms of social media inclusion are less popular now than they were a couple of years ago – but for some websites, and on some pages, they make a lot of sense.

It’s a double edged sword, though. Demonstrating your involvement in the platforms you’re suggesting people follow you on can be great for building your audience! If, however, your last update was a few months ago, that’s more likely to prove you’re not worth following. Use with care.

Sharing icons, especially on blog posts

These things are everywhere. You’ll see them on the right-hand side of this article, right near the scroll bar, if you’re visiting our website to read this. We don’t include sharing numbers on our icons for a few reasons, but that’s a common feature as well.

This example’s from TechCrunch, who get enough shares per-post to justify the counters.

Huge banks of icons for every platform imaginable was the trend a few years ago – and that’s scaled back quite a bit, thankfully. There’s a bit of the double-edged sword here as well, if you include share numbers – if the counters are too low, you risk looking uninteresting, no matter how good your content is. If the numbers climb, you’re more likely to be shared thanks to them. Use with caution.

Social-enabled logins, using OAuth and other tools

You’ve probably seen the “Log in with Facebook” button a lot more this year than last year – and there’s a good reason for that.

If a site needs user data for some reason (either for tracking, commenting, purchases, or other persistent-identity functions) then streamlining the login process is a big step toward getting people into your website’s systems without the friction we’re used to in sign up processes.

Discussion systems, to take the place of comment sections

For websites with active social presences – especially content hubs and blogs – commentary sections are a valuable part of the user experience. Implementing comments on a page, on the other hand, can be a massive pain.

This is part of what makes systems such as Disqus, Livefyre, and Facebook’s Comments plugin attractive for developers and users alike.

For users: most discussion systems offer conveniences like a unified login (you’re logging in to the system, not the website) so that if you have an account with the discussion platform, you’ll never need to sign up on a new blog to comment there.

For developers: discussion systems are generally large kits of features ready to be dropped into a website, already in their final forms. Moderation tools, spam blocking, and other common functions are all there in the package – so they can save a lot of time, if implemented efficiently.

Meta Data – The next big thing, and not just for social

One of the big terms we’re watching lately is “structured data” – it’s nowhere near as scary as it once might have been, despite the visions of spreadsheets that are probably dancing in your head right now.

The key point about structured data is that, rather than having intelligent machines making educated guesses at what our website’s are for and about, if we follow the forms properly, we can directly inform these Big Data systems ourselves, making them more accurate as a result, and ensuring the important information gets through.

A number of social networks have specific sets of meta data that can help make sharing easier. Twitter has a system called Twitter Cards, Google+ has one called Snippets, even Pinterest has Rich Pins.

The Open Graph Protocol is one of the most common such data structures, that gets included in the back-end of a website, specifically designed to turn websites into “rich objects in a social graph.” Originally created at Facebook, it’s now grown out of that structure and into something many developers are working to extend.

If you want to implement any of these meta data sets in your website, Moz has an excellent write-up that might help you get started.

Another notable entry is Schema.org – a joint effort between tech giants such as Google, Microsoft, Yahoo and Yandex. Unlike the social meta data, Schema.org snippets are often wrapped around pieces of website code you’re seeing right on the page.

Schema.org markups are added to visible elements on your site – like our address and contact information for our Connect page – and enhance that information by allowing browsers, plugins, and even mobile devices use it in novel ways.

It’s structured data that allows you to touch a phone number on a website using your smartphone, and call that business directly. These features save a lot of time, and earn a lot of respect from visitors.

How we include social and other technology tools in our websites is important

Meeting user expectations is key to success in digital marketing. Part of those expectations now rests on social media being a visible part of our online presence – and making the use of those platforms as seamless as possible for visitors to find your website by connecting your website to social media.

It’s fiddly work, sometimes – but it definitely gets easier with an understanding of your options, and what your goals for each of your online properties are.