If you aren’t already sharing your website content on social media—and enabling that content to be shared on social media by others—then you are not taking advantage of one of the most useful and essential marketing tools on the internet today. Social media is a constant presence in our modern day lives and it is essential for businesses, regardless of industry or size, to both market themselves on social media and make their website social media share friendly to increase the likelihood of social media users sharing website content elsewhere on the web. Let’s take a closer look at the major social media players and how you can use them.

Facebook

Facebook has become a solid social media network for most people who like to share their thoughts, pictures, personal lives and more using a single platform. However, Facebook is not as popular with teenagers as newer social media sites and apps. Despite this, Facebook is essential for spreading the word about your business because just about everybody uses it; and it is very easy for something shared to a user’s Facebook wall to be shared by someone else to their wall and so on, increasing the amount of people who see your content exponentially.

Share Page Link in Facebook

When I try to share my website link in Facebook, I just copy and paste the link into the box at the top of my Timeline. Facebook is very intelligent to read content from the link by itself, such as images, title, and description. However, if I want Facebook to show specific title, description or image for in my timeline, I can add some HTML meta data on my website page. Here I will list 5 main og meta tags I normal use in my website:

• • og:image

This meta data will tell Facebook what the image will be shown in the timeline. For example:

• • og:description

With this og object, Facebook will read and show the content of it in the timeline. For example:

• • og:url

This will tell Facebook where to redirect the users when they click on the link. Here is an example:

• • og:title

This is the title of the post sharing on Facebook. Example as below:

• • og:type

This meta tag indicates what type of content your readers want to share on their website. For website, the value will be website. Here is an example:

By the way, above og meta tags are not necessary for Facebook, as it may automatically fetch data from the HTML page. But it will be better to place these meta data there as it can tell Facebook to show what kind of information more straightforward. For more information, you can check this FAQ page from Facebook.

Add Facebook Share Button on Website

Once making the website ready to share, to make your website page easy to share, I will add a share button on the page. This will enable your readers to share your website on their timeline by one click, instead of going to Facebook and copy and paste your link there. To place a Facebook share button is quite simple. You can go to Facebook official developer page to generate one by using their online tools. Or you can copy and paste following example source code to add share button in your website.

Your Website Title
<!-- You can use Open Graph tags to customize link previews. Learn more: https://developers.facebook.com/docs/sharing/webmasters -->




<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

<!-- Your share button code -->
<div class="fb-share-button" data-href="http://www.your-domain.com/your-page.html" data-layout="button_count"></div>

Add Facebook Like Button on Web Page

Just like Facebook sharing button, it’s a piece of cake to add Facebook Like button on web page. To help people add their button easily, Facebook also prepares a online tool. Or you can simply copy and paste following code in your website.

Your Website Title
<!-- You can use open graph tags to customize link previews. Learn more: https://developers.facebook.com/docs/sharing/webmasters -->




<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

<!-- Your like button code -->
<div class="fb-like" data-href="http://www.your-domain.com/your-page.html" data-layout="standard" data-action="like" data-show-faces="true"></div>

Facebook Share Button or Like Button

Now, you may be confused as Facebook’s share button and like button. To be honest, I also don’t know which one I should put on my website at that time. After making some research, I get some conclusions on that:
Share Button
Share web page with image, title, description and URL link on the timeline or in Facebook message.

Like Button
Show an like activity on the timeline, just with a URL link (I have tested, but I cannot find this so called activity on my timeline any way). It’s better to use Like Button on Facebook Page, as I saw some of my friends like other Facebook Pages in my News Feed.

As a result, I think it’s better to use share button instead of like button on the website, as the share button is more visible on Facebook, which will engage more people spread your page and get more traffics.

Other Useful Social Features from Facebook

Today, I find another feature from Facebook, Follow Button. It will allow your reads to follow you on Facebook, if you want to get some fans :P. For more information, better to check on Facebook.

Twitter

Twitter is designed to be a ‘less is more’ platform where people share their thoughts and interests in relatively short tweets, but many people still use the site to share content such as interesting website pictures, links, and more; website content such as specific product items or specific services is especially popular to share, and if your business has these elements then you must definitely enable Twitter sharing.

Share Link in Twitter

Just like Facebook, I can also share my website page link in Twitter. Twitter also allows us to customize the image, title and short description in a twitter card. Twitter uses different meta tags in Web page to fetch the data and share on twitter. Here are the 6 meta tags:

• • twitter:card

This meta tag will let twitter know what type of twitter card to use to share the web page. The available value will be summary, summary_large_image, app, and etc. Here we only talk about summary and summary_large_image. The summary type twitter card will show a small thumbnail with title and text while summary_large_image will show a big twitter card with a big image.

• • twitter:site

The Twitter @username the card should be attributed to. In human words, this will be your twitter account.

• • twitter:creator

Frankly speaking, I don’t know this meta data tag either. I ignore this on my website.

• • twitter:title

Quite easy to understand, the title appear in the twitter card.

• • twitter:description

The description of your shared web page.

• • twitter:image

The big image in your twitter card.

Put Twitter Button on Web Page

Instead of letting your readers copy and paste your link to share in Twitter, we can put a Twitter Button on our web page to simplify the sharing process.

Put Follow Button from Twitter

If you want your readers to follow your twitter account, you can also add a twitter follow button on your website.

Pinterest

Pinterest is a picture-based social media site where people save pictures associated with websites into various themed boards. Pinterest will only generate views and interest in your website if the Pinterest user links to your website directly instead of uploading it themselves; this is why it’s essential to enable Pinterest sharing, since people are more likely to upload it directly without a website link when they can’t simply click “share on Pinterest” on your website.

Tumblr

Tumblr is a media based social media site where people both post and share (called “reblogging”) various media such as pictures, videos, music, quotes, and combinations of these. Like Pinterest, your website will only gain views and attention if the Tumblr user directly links to your website when posting content from your website to share—so make sure you have “share to Tumblr” enabled. People are far less likely to upload your website media on their own without a link if they are able to click a share button instead.

Instagram

Instagram is a photo and video based site where people post various images on a personal Instagram, while maintaining relationships with followers and people they follow on their Instagram feed. Instagram has only recently introduced the ability for users to directly share media to their Instagram, and not everyone is on board with the concept yet. Still, it will be worthwhile to at least maintain your own Instagram page.