10.04.2015

How to add social share features to your site?

You probably have seen those nifty little buttons, which let you share the page you are on to all sorts of social media sites, before.
There are lots of plugins out there, but it's nice to know how to add these features yourself. Especially if you want to get a little more out of it, like control over the text and images you share with them.
While figuring this out for a project I work on it seemed like a good idea to collect all this information into a post. So:

So, what is it that we want then?

This post shows how to share a Facebook message (with title, definition and image), a Twitter message (with a Twitter Summary card), a LinkedIn message (also with a specific title, description and image) and a WhatsApp message (for supported platforms).

Facebook

When you put a share link, or button, to Facebook on your website, Facebook has to guess what information on your site is important. You can 'feed' Facebooks crawler with so called Open Graph Meta tags, which gives you more control over the contents of the post. These tags should be placed inside the '<head>' of your page.
Don't forget to take a look at the image requirements: image requirements.
There are quite a few Open Graph tags, but here are the basic ones:

<meta content="PLACE-YOUR-TITLE-HERE" property="og:title">
<meta content="PLACE-YOUR-DESCRIPTION-HERE" property="og:description">
<meta content="THE-URL-TO-YOUR-PAGE" property="og:url">
<meta content="THE-NAME-OF-YOUR-SITE" property="og:sitename">
<meta content="THE-URL-TO-THE-IMAGE-YOU-WANT-WITH-YOUR-POST" property="og:image">

The next thing you need to do, if you haven't done this already, is add a share link on your website.
You can create one at http://www.sharelinkgenerator.com/ and copy / paste it into your HTML. If your page is ready, then publish it and go to the object debugger.
Enter the url, examine the results and fix any errors reported back.

LinkedIn

With LinkedIn you can follow almost the same procedure. It uses the same Open Graph tags as Facebook.
You can, however, 'override' the title and description by adding this to the share-link you are using. The quickest way is to create this link on the same webpage (http://www.sharelinkgenerator.com/) and copy / paste it into your HTML.

Twitter

Next in line is Twitter.
Twitter is more of a two-stepper. You can create a link, for instance on the same share link generator, with a nice tweet.
Remember: The visitor that shares this tweet will be able to adjust the text before posting it. You have no control over this.

If you use the url to your webpage in the tweet, Twitter will look for a 'Twitter Card' to add to the tweet.
There are several kinds of Twitter Cards, but basically they work the same. I use a summary card in my example.
Again you will need to add some tags to the '<head>' of your page:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="THE-TWITTER-USERNAME (i.e. @jfens)" />
<meta name="twitter:title" content="PLACE-YOUR-TITLE-HERE" />
<meta name="twitter:description" content="PLACE-YOUR-DESCRIPTION-HERE" />
<meta name="twitter:image" content="THE-URL-TO-THE-IMAGE-YOU-WANT-WITH-YOUR-POST" />
<meta name="twitter:url" content="THE-URL-TO-YOUR-PAGE" />

As soon as your page is published, go over to the Twitter Card Validator and enter the url to your page. Check for errors and fix them if necessary and click 'Request Approval'.
Fill out the form and, as soon as your page is approved, the summary card will be added to every post that contains the url to your page.

WhatsApp

This one is different.
WhatsApp buttons are (at the moment) best to use on mobile sites only. Even then, they won't work on every platform, so be careful, because you don't want your visitor to keep hitting that button or link that's not doing what it suggests it does.

The HTML is fairly simple:

<a href="whatsapp://send?text=HERE GOES YOUR MESSAGE">Share on WhatsApp</a>

I like to encode my message with an online encoder to make sure that I can use special characters, without breaking my HTML. Try it:

<a href="whatsapp://send?text=Wow!%20%0A%0AThis%20blogs%20explains%20the%20basics%20of%20adding%20social%20share%20features%20to%20a%20website%20quite%20understandably%3A%0Ahttp%3A%2F%2Fwww.jipjip.com%2Fblogs%2Fhowto-add-social-share-features%0A%0ACheck%20it%20out!">Share on WhatsApp</a>

Share on WhatsApp
Author:
Date:
10.04.2015
Categories:
social, html, tutorial, facebook, twitter, linkedin, whatsapp
Share on LinkedIn