Optimising Social Share on AEM

24 February 2016
Marcin Czeczko
Frink_Cognifide_2016_HeaderImages_0117
social-sharing-logo
“Shares are the best for word of mouth. It says people endorse your content to the point of putting their reputation on the line. Your ad or post is interesting enough when people are willing to share it.” Dennis Yu, CEO of social media insights firm BlitzMetrics.


Shareable content is the brand building tool of our time, in fact, Facebook’s news feed algorithm gives more weight to shares than likes. Creating the content is one thing but enabling user-friendly sharing from your website is key because the success of that share is determined by a number of factors.  For instance, yes, it really does matter if a Twitter timeline shows just plain text or a more engaging Twitter card. Pre-determining the share success of your content must be built in from the outset and if you're designing on AEM, here's how we suggest you go about it.

Let's suppose you need to add social sharing buttons to an existing website. Usually, it's straightforward - pick any available sharing tool, add a small HTML snippet to your page and you're ready to go. But, what if your client prefers not to use third party tools and you need to build your own?

Fear not! You will need to create a button on your site that will initiate sharing. The button should have an anchor link to the sharer service. This link will usually supply the required information, such as the URL, to share a page. For instance, if you link to Facebook sharer service (https://www.facebook.com/sharer/sharer.php?u={URL}), when an end user clicks on that link it brings up the social service share dialog window which does the job for you.

How basic social share works

image2016-1-27 9-14-5

Let's consider Twitter for a moment. You want to have a button on your page that opens a Twitter message window, consisting of a message from your site and the URL to that page. But this post will not get attention on your timeline.  You know that you'd really like a more fancy post with an attention-grabbing image. Twitter already has the answer for this which allows you to post messages with the URL to the page from which image, title and description is extracted and beautifully presented - it's called a Twitter card.

But what image and what description do you want to show? This is really a marketing decision because you are promoting a piece of content.  Let's consider a website where you have news articles, each with an image at the beginning, an article introduction and the main body text. Twitter retrieves data from the HTML meta tags and renders it in the card. So all you have to do is to render proper meta tags in the header section of the HTML. Let's assume that all your shareable news articles are using the News Article Template in your AEM implementation. So, whilst rendering the News Article Template based page you need:

sample-article
  • Title - which is usually the page title
  • Image - the image component representing the news post
  • Description - the component providing the article introduction content
  • The above three rendered in the header section of HTML as Twitter related meta tags (see Twitter documentation for the full set of metatags that are required)






Here's the full journey when sharing page content on Twitter. the diagram below schematically shows major interactions between the user and the website, and between the Twitter crawler and our website.
twitter-sharing-journey

Sharing a light box - a more complex scenario

You're probably familiar with web pages featuring a set of thumbnail images (often product/feature pages). Clicking on such a thumbnail opens a bigger image together with description on the page as a light box

lightbox

The more complex sharing journey often starts from this point. The user sees a big, engaging image or video that he or she wants to share on social media. Before we think about how to share this, let's think about how you'd create this very shareable light box on AEM. There are potentially two options:

  1. Light box content can be authored directly on the page. The downside of this solution is the HTML complexity of the page dramatically increases, authoring will be cumbersome, and the performance of the page can suffer. Adding sharing on top of that would dramatically increase the design and implementation complexity.
  2. Instead, light box content can be authored on AEM as a separate page. For the simplicity of this post let's assume that we created a new template called Light Box Template. And whenever you want to have a light box on the page, you can create a child page using the Light Box Template, featuring your chosen content.
lightbox-under-page

This second solution would require:

  • A new template for  the light box.
  • New capability for hyperlink creation ie. The ability to add a flag stating the anchor link to be opened as light box.
dialog-hyperlink
  • Javascript that hooks onto this flag. When clicking on that tag:
    • An AJAX call to the URL from the anchor tag
    • It extracts page content and displays it as a light box
    • It Modifies the browser URL by adding hash fragment with the URL to the requested lightbox page, e.g.: /page.html#/lightbox-1

So, that's how sharing content from a light box should work. But, as you can see, each light box is in fact a separate page. So, if we assume that by clicking the Twitter share button on the light box, we're going to share the URL to that particular light box page then the Light box Template page should render Twitter metatags. However, when a user clicks on that link on the Twitter Card it will only get the light box page as opposed to also seeing the page beneath with the light box rendered on top of that. So how can we ensure that we see it all in context?

  • The light box page together with metatags should render meta directives to redirect to the underneath page with hash fragment denoting which lightbox should be visible.

head-section

  • Javascript on the underneath page should support recognition of the hash fragment in the URL and therefore show the light box represented by value after hash fragment.

Let's see how the light box sharing journey works:

share-lightbox-full-cycle

The light box is shared and visible on the user timeline. Here's how the journey looks if someone clicks on the post from the Twitter timeline.

visiting-shared-lightbox-journey

Summary

So we have suggested a complete solution to sharing simple pages. However, please don't forget the following when putting this into practice:

  • Most of the social sharing services support Open Graph metatags. Twitter uses TwitterCard metatags to open a graph, so one set of meta tags can be used to support two services.
  • Light box content is easily cached on Dispatcher. However, you need to pay attention to how this content is managed to avoid orphaned URLs on social services. For instance, user shared light box on Twitter. After some time, if the author decides to rename or remove that lightbox, the Twitter could point to a non existent resource on AEM.
  • Facebook and Twitter cache the shared content. You need to maintain these caches (using API) if you want to see up to date content in there.
  • To test the full journey during development your instances must be open - social crawlers need to have access to AEM pages in order to extract data from metatags.

Useful links