The web of today is a very social medium. Therefore, one of the first things a new netizen who decides to publish a new website, blog or develop a custom app will want to do is to figure out how to add sharing buttons. In this feature I will demonstrate how to do just that. Additionally, we will take it a step further by using Open Graph HTML meta tags to markup the page thus enabling our shared content to be more than simply boring text and links. Instead it will show up as media rich posts in the newsfeed or firehouse.
Having user accessible sharing options will allow your audience to connect and distribute your content with their social network. Hence, widening your total reach. In theory this should boost your traffic and increase engagement. Fortunately, most content management platforms have taken care of this aspect long ago and included this by default in the basic package. However, if you are like me using a more cutting edge platform in development such as Ghost or are building a new application or custom website without a framework doing the hand holding then you will have to manually include these and this tutorial is for you.
I will be using ghost to illustrate but the techniques described can easily be adapted to any other platform or plain website. We aim to achieve results similar to the below.
Photo by John O'Nolan from Ghost.
Let's get right to it. Our friends over at Ghost made a few changes in November to allow the platform to integrate more easily with social networks. They added structured data elements via Handlebars helpers and updated the editor interface to enable users to update these meta fields from within the GUI.
However, one thing they failed to explain is that for these elements to work you need to make a few modifications to the theme to incorporate the meta data into the HTML meta tags on the site.
Adding the Structured Data to the Page
The first thing you will need to do is open the default.hbs file for the currently running theme. We are going to edit it by adding a few new
Next we add the following line between the