How to Add Social Media To a Website

Methods for adding icons, links, or social media feeds to your site

Social media icons
Adding social media connections can help your website.

With so many people spending so much time on Facebook, Twitter, Linkedin, Instagram, and other social media platforms, it makes perfect sense that companies would want to grab some of that that action for their own sites. As such, a common request that I hear from many companies is that they want to “add social media to their site.”

The problem with this request is that it is too broad and generic.

There are a numbers of ways that social media sites and your company’s website can be connected. This is why there needs to be more specificity in exactly what a company is looking to accomplish before it can be determined what the best approach to this connection would be. Here are some of the ways that this could be done.

Social Media Icon Links

Without a doubt the easiest way to add a connection between your company’s website and its social media profiles is to add some icon images to the website and to then link those images to the appropriate social media profiles. These links are often added to the footer area of a site, but if your needs require them to have more prominent placement, they could alternatively be placed higher in the site’s visual design hierarchy, perhaps in the header area or alongside the primary navigation of that site.

All that this requires is a little HTML work to add the images in the appropriate file format (I suggest SVG files, which will allow for better size scalability without sacrificing web page performance), as well as some CSS to style the images to fit within your design’s look and feel.

Even if you plan to utilize some of the other methods in this list, you will very likely also want to add these icon links as well.

Including “Like” or “Share” Buttons

Another way that you may choose to add social media interactions to your site is by adding buttons that allow visitors to “share” or “like” your pages.

When someone clicks on one of these buttons, they are communicating with that respective social media platform. If they choose to click or tap a Facebook “Like” button, then they will be subsequently sharing that information with their friends and connections on that particular platform. A similar thing happens if they share the page with a different social site, like Twitter.

Adding this functionality usually requires little more than the addition of some Javascript code to whichever pages on your site you wish to include this functionality. The individual social platforms will have instructions on how to generate this code, or you can use a 3rd party tool like ShareThis to add multiple social connections all at once.

If you are going to add these sharing buttons, you should restrict them to pages that lend themselves to being shared in the first place. Dumping these links on every page of your site is not the best approach. Instead, add them to pages like blog articles that readers may find interesting and valuable. That kind of content is conducive to being shared and to encouraging people to use those features.

Adding a Full Social Feed

The final kind of integration you may be considering is actually adding a full feed of your social content directly onto a page of your site – or perhaps even all pages!

I have seen some companies place a feed from their Twitter account in their site’s footer area. Since that footer is persistent on every page of the site, this means that this social feed is also persistent throughout the site.

The typical reasoning behind adding these feeds directly onto a site is that it allows people to see your social content without actually leaving the website. The downside to this approach is that these social feeds can wreak havoc on your site’s download speed and performance. These feeds are notorious for slowing down websites, so anytime you add one of these feeds, you should also test your site’s performance to see what impact it has had. You may be able to add a single feed to a page and still achieve performance that is in line with whatever guidelines you have established for that site.

Trying to add multiple feeds, however, is almost certain to slow your site up to the point of it becoming a problem for visitors.

If you are going to add a social feed, avoid doing so in a sitewide manner, like by adding it to that aforementioned footer. Instead, restrict these feeds to pages where they make the most sense and in a way that will not affect the speed of every page through the entire website.

The code to add these feeds will differ from platform to platform as well as depending on what CMS your site uses.  You can look for CMS-specific plugins to add these feeds, or even consider one of the many tools that will aggregate your feeds into a single stream for your website.

Other Integrations

These three methods (social icons/links, “share” buttons, and full social feeds) are the most common website integrations for social media, but there are other ways that you may use these platforms to power functionality on your website.

Some websites have turned to social media to power the comments features on website blogs. Instead of allowing people to post anonymous comments on those blogs, by connecting comments to existing social media profiles, it can create a senseof accountability for anyone who is choosing to make a remark. This can help prevent some of the offensive and hurtful content that people post online.

Another possible integration is using social accounts as a login vehicle on your own site. Instead of forcing people to create new accounts for your site, you can tap into an API like Facebook’s to allow people to “Login Using Facebook.” This connection may encourage someone who would’ve otherwise been hesitant to use your site and create yet another online profile to instead gain access using an account they already have. That is a good user experience that smartly takes advantage of social media accounts.