Social Media Websites

On-site Social Media Integration Tips

Posted by John Hutchison on June 30th, 2011 at 2:28 pm

Whether you're a large e-commerce business or a small brick and mortar company, social media is a fantastic route to create exposure and grow a community around your brand.  Adding social media to your website shouldn't even be an option, it should be mandatory for all businesses.  Here are a few tips for adding it to your site:

  • It's become widely accepted to put social media icons in the upper right section of a website.  The fallback is usually the footer if your design can't handle the header.  Always aim for header or footer as it's become the "natural" place for people to look for them.  It also depends on how highly you value a "follower" or a "like".  If gaining these are a priority, you should definitely try and fit them into the header or above the fold in your site.  Additionally if you are most interested in keeping clients on your site, you should put them in the footer as placing them in the header may potentially take someone off your site to your social media profile instead of passing through your content and goals.
  • Branding your icons (changing the textures) to your site can be beneficial, overdoing it can also be detrimental and hide/blend them into your site too much.  Keep colors and logos, people familiarize Facebook with a solid blue and twitter with a sky blue.
  • Tagging articles, services or products with the ability to share through social media(Facebook, twitter and LinkedIn) is a good way to gain followers and more exposure.
  • Adding Facebook’s "like" button to your website eliminates the middle man of having to actually visit Facebook to gain a follower, which is valuable if you're goals are on your website. (Same for Twitter and LinkedIn).
  • Try using a "Like" button in your sign up forms.
  • When using social media Icon's as links to your social media profiles make sure they open as a new window.
  • There's a few ways you can add them:
    • You can use pre-made social media icon sets (these are just a set of image files, usually png's in which you add and link manually).
    • You can make them yourself (through Illustrator/Photoshop/inDesign, etc.) and add them manually, you can even do it solely through CSS (though you will get square corners in Internet Explorer).
    • You can use plugins if you're on a CMS that supports them.  Most themes in Wordpress will come with social media icons integrated nowadays.
    • Facebook, Twitter and LinkedIn allow you to generate their code for interactive "like", "follow" and "recommend" buttons.  Take advantage of these.
  • It can be worth utm tracking clicks on your sites social media icons to see where visitors are falling off.  For example: if you are getting 500 people clicking through to your Facebook pages, and only 20 people "liking" it, it could be worth reviewing your Facebook page itself as the incoming traffic isn't the problem.
  • Some different examples of Social Media icon inclusion:
    • The Huffington Post has incorporated their social media icons and a "like" buttons directly above their main navigation, which basically tells us that they value those activities highly.  The Huffington Post tests different placement of these constantly.  The last iteration was actually part of the main navigation.
    • Smashing Magazine makes their SM very prominent in the upper right, but separate it from their content, almost as though it’s on an island.
    • Fox News puts their SM icons in the right side of their footer with very little prominence.  This placement is very common as it is a widget area for a lot of CMS'.
    • CNN has put a Facebook feed on the right side of all their pages so you can repost articles quickly.
  • A/B test your placements.  Some positions may do wonders for your website, others may have no impact.

Social media is a great marketing tool that should be integrated into any website.  There are many ways to integrate social media icons and buttons.  Depending on the goals of your site, do your research and testing to determine the best utilization of it's implementation.

3 Responses to “On-site Social Media Integration Tips”

  1. Di Walker says:

    I absolutely love your blog! Always read it with interest, and lots of really useful information. The examples you gave above are great as a starting point, but I was wondering whether there are any ecommerce-specific examples of integrating social media onsite you could share for my benefit?

  2. Pippa says:

    Hi John,

    Thank you for writing this blog post, found it very interesting reading as I am currently working on social media strategy for the company I work for and have proposed to include social media buttons on the top right of the website.

    The feeling from design is that this is a massive no go area for any ecommerce website as it is deemed as a distraction from the . Please could I ask your thoughts on this? And if you know of any research that proves/disproves this that you can point me in the direction to please?

    Look forward to your feedback. Pippa

  3. Hi Pippa, while I agree adding Social Media buttons that would take you off site could be detracting to the ultimate goals of an e-commerce site, I still do believe they should be on there. I am a firm believer that every site should incorporate Social Media links as it is a fantastic way to build brand awareness, handle customer service and create an identity that customers can relate to. As stated in my article, have the links open in a new window and place them in the footer so it is available to a visitor if they want it, but isn't going to directly effect the commerce portion of the site as they would have to scroll through to reach it.

    Adding the equivalent "like" and "share" buttons for products on an e-commerce site would be the most directly beneficial decision as their is a lot potential of a product "share" through Social Media to bring in more business as it is basically a free banner add on someones Facebook wall for your product.

Leave a comment