CCBS Web Services
Making your site simple!
For more information:
email us
 

How to share your content on social platforms

Category: CMS Made Simple | Last updated: April 2020

CMS Made Simple social sharing

How to make it easy for your site visitors share your content on social platforms. This will help drive traffic to your site pages.

Love it or hate it - social media is here to stay. Let's face it, the world and his dog are on Facebook.

You may be avoiding social media yourself. But, you cannot avoid the fact that your site visitors are more than likely using it.

When people visit your site to read your content, you want to make it as easy as possible for them to share on their social media profiles.

This is done with social sharing buttons which you incorporate onto the pages that you want people to share.

There are a number of social media tool providers, but the one that I use is ShareThis as it is very simple to set up and configure.

There are 2 parts to adding social sharing buttons.

Part one explains how to add the social share buttons to your articles or blog posts.

Part two explains how to set up the special tags (meta tags) that the social platforms use to display the shared content.

Let's get started!

Part One: incorporate the social share buttons

Step 1: set up your social sharing account

I am using ShareThis and there are just just 3 basic steps:

  1. Choose button type - you can select which buttons you want to include in your sharing toolbar and the order in which the buttons appear with drag and drop.
  2. Choose your CMS platform - select the HTML option for CMS Made Simple.
  3. Register and get the code - create your account with your email address and password.

You will get 2 code snippets similar to these shown below.

ShareThis: snippet #1 - button placeholder

<div class="sharethis-inline-share-buttons"></div>

ShareThis: snippet #2 - button script

<script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=123456789123456789123456789&product=inline-share-buttons' async='async'></script>

The highlighted bit is the unique property id generated by ShareThis. Your code will have a different property id.

Step 2: insert the button placeholder

Most times, it is the blog or article section of your website that is changing frequently, with new posts continually being added or updated.

And, if your site has a product catalogue, you may be regularly adding products, too.

So, the individual articles or blog posts or product pages should be displaying the social share buttons .

ShareThis button placeholder

Set up a new Core::Generic template - I called mine "generic-socialshare" - and copy in the following code:

<div class="w3-panel">
<p class="w3-center w3-large"><strong>Please share this page</strong></p>
<div class="sharethis-inline-share-buttons">ShareThis buttons will go here (placeholder only)</div>
</div>

The highlighted markup is the snippet code from the ShareThis site. The rest of the code is for the presentation of the buttons on the page.

To display the social share button bar on each of your articles / blog posts, insert the following tag at the end of your News::Detail template, changing the highlighted bit to whatever you called your Custom::Generic template:

{global_content name='generic-socialshare'}

Step 3: insert the button script

ShareThis button script

Set up another Core::Generic template - I called mine "generic-socialshare-script" - and copy in the code shown above in "ShareThis: snippet #2 - button script".

Insert the following tag in the appropriate place in your page template. If you are using template inheritance, put it in the master page layout.

I put my javascript code at the bottom of my page layout, after the footer section but before the closing body tag.

{global_content name='generic-socialshare-script'}

And to see what this button bar looks like, just scroll down to the bottom of this page.

Part Two: meta tags for the social platforms

In another of my CMSMS articles, I explained how to set up the meta description tag for both pages and News items. 

And I mentioned in that article that I stored my article meta description tag in a Core::Generic template called generic-meta-article so that I could add other meta tags for the New item.

Well, the other meta tags for the News item would be the ones used by Facebook and Twitter. The other social platforms use these tags, too.

Facebook uses Open Graph (og) meta tag types and Twitter has its own (twitter) types.

There are several great resources that explain the whys and wherefores of the Facebook Open Graph protocol and these are listed below in Additional Information.

Step 1: add the meta tags to generic-meta-article template

The following meta tags are added to a Core::Generic template called generic-meta-article.

Meta tags for generic-meta-article template

  1. <meta property="og:type" content="article">
  2. <meta property="og:title" content="{$page_title_news}">
  3. <meta property="og:description" content="{$meta_desc_news}">
  4. <meta property="og:site_name" content="{$site_name}">
  5. <meta property="og:updated_time" content="{$meta_news_date}">
  6. <meta property="og:url" content="{$short_url}">
  7. {if isset($news_image_url)}
  8. <meta property="og:image" content="{$news_image_url}">
  9. {/if}
  10. <meta name="twitter:card" content="summary">
  11. <meta name="twitter:title" content="{$page_title_news} - {$site_name}">
  12. <meta name="twitter:description" content="{$meta_desc_news}">

What does this mean

The highlighted parts are the CMSMS page variables that have been set either in the master page layout template or in the News::Detail template.

Some of these variables are mentioned in my article on SERP-friendly meta tags i.e. $page_title_news, $meta_desc_news and $site_name.

The additional ones, $meta_news_date, $short_url and $news_image_url, need to be set.

Put the following 2 settings in the master page layout template, along with the other page variables:

  1. {$canonical_url = $canonical_url|default:"{$content_obj->GetURL()|lower|default:''}" scope=global}
  2. {$short_url = $short_url|default:$canonical_url scope=global}

And put the following lines in the News::Detail template, along with the other news item variables:

  1. {$canonical_url = $entry->canonical|lower scope=global}
  2. {$meta_news_date = $entry->postdate|cms_date_format:"%e-%m-%Y" scope=global}
  3. {$uploads_url = "{uploads_url}" scope=global}
  4. {if $entry->fields.FB_image->value}
  5. {$news_image_url = $uploads_url|cat:"/"|cat:$entry->fields.FB_image->value scope=global}
  6. {/if}

Line 1 sets the canonical url for the news item, which will then be used in the master page layout template to set the short url variable.

Line 2 formats the news item post date for the meta news date variable.

Line 3 sets the uploads url from the CMSMS function. This is used to generate a full url for the news item image.

Lines 4-6 set the news image url variable, if one is present. Step 2 below explains how to add a new field for the news item to enable an image to be assigned.

Step 2: additional field for image

To make your social sharing posts stand out, you should include an image which is sized according to the Facebook standard.  The Hubspot article linked to below in Additional Information provides the appropriate image dimensions expected by Facebook.

I added 2 image fields for my news items, one as a full-width banner and the other specifically for Facebook sharing. I optimise my Facebook images to be 400 pixels wide and high as that is bigger than the Facebook stated minimum but small than its maximum size.

I also use the "extra" news item field as the alt tag property of the banner image - I relabelled this in the custom language file.

Here is screen shot of the bottom part of my Edit Article screen, showing these fields:

CMSMS News - Edit Article - image fields

Step 3: test your tags with the Facebook debugger

So, you need to test these tags with Facebook to make sure your shared post makes sense and looks brilliant and, importantly, Facebook is happy with the tag settings.

And you do this with Facebook's Sharing Debugger facility.

Just paste in the URL of one of your news items into the debugger form and click on the Debug button.

If your Open Graph tags have been successful, the Debugger will display some scrape information as well as a Link Preview (see below). Otherwise, it will list out the tags it does not like so you can correct and re-submit your URL.

CMSMS News - Facebook Debugger

If all looks OK, then be sure to test out by clicking on the share buttons to see what your post looks like when shared across the different platforms. 

If you are not happy with the image size and prefer a bigger one, then you can experiment with different sizes to see what works for you, making sure you do not exceed Facebook's recommendation.

Additional Information

More information on the Facebook open graph meta tags can be found on the Open Graph protocol website.

You should test your OG tags using Facebook's Sharing Debugger facility once you have the tags in place. 

And two excellent articles on how to use these tags to best advantage on your website:

Although I chose Share This as my social share button service provider, an alternative one that I have used in the past is Shareaholic.

Here is a comparison between ShareThis and Shareaholic on the ShareThis site to help you choose between these two providers.

My associated article on how to auto-generate SERP-friendly meta tags is the foundation for this article.

Conclusion

So, with these simple steps, you can control exactly what the social platforms display for each of your posts and make it super easy for your site visitors to share your content on their social networks.

Disclaimer

You use the code contained in this article AT YOUR OWN RISK.

I endeavour to ensure the code given here is a faithful copy of that which I de-ploy on my own sites. But I make no guarantees that it will work on your own site.

I do not accept any liability for the code, its incorporation and usage on your site.

I may withdraw or amend this article at any time without notice.

My website Terms and Conditions apply.

Christine CollenBy Christine Collen

 

Please share this page