Jekyll (and Octopress, by extension) uses the Liquid templating language to process your site’s template on the way to final rendered pages. It’s easy to extend generation of normal <title> and <meta> tags to include Open Graph tags, making your site a better citizen of the social graph.
Though only widely implemented by Facebook, some no-name social network, the Open Graph protocol is available for anyone to structure their content. Based on the “website” object type, I’d like to include the following information on my pages:
The canonical URI
Post or page title
A preview image URI, both SSL and non-SSL, along with dimensions and MIME type
First off, some configuration in my site’s _config.yml to choose a default share image and to name my Facebook page URI and my personal account’s FBID.
It’s necessary to declare the og and fbRDFa namespaces. I use the HTML5 prefix syntax instead of XHTML-style xmlns.
The type, site_name, and title tags are simplistic and come straight from the site configuration in _config.yml except title which is overridden by the post/page title from the YAML front-matter in every post:
I’m an American anglophone:
Canonical URI is a little trickier, since that variable needs to be composed from site.url and friends. The default Octopress theme comes with a capture for a canonical variable, and I’ve replicated it in my custom theme with a slight variation.
Description relies on another variable capture you most likely already have, which substitutes an excerpt of text when no page.description is defined in your page YAML front-matter. I then sanitize it and truncate to 300 characters, the maximum Facebook will display by default for a stream attachment description.
Preview image og:image tag and friends are the most frustrating due to the necessary separate tags for SSL and non-SSL image resources. I also specify MIME type and image dimensions manually since Facebook’s Open Graph parser refused to see my 300x300px image as larger then 200x200px otherwise and continually discarded it in favor of a random large photo from the page.
My image tags check for the substring https:// in site.url to decide whether or not to show og:image:secure_url as well as to replace it with http:// for og:image. I host Cooltrainer SSL-only, but this should be a general solution for those who may host mixed or with no SSL at all.
My _config.yml defines a default share image, images/cooltrainer-fb.png, but individual pages can override that default by defining og_image, og_image_type, og_image_width, and og_image_height in their YAML front-matter.
I use the Facebook-specific fb:profile_id to attach the content to the Cooltrainer.org page on Facebook so it can direct people to follow the page when content is shared. fb:admins links the page to my personal account which allows me access to Insights for this domain.
Lastly, I added “Share” buttons for quick sharing with Facebook, Twitter, and Reddit by creating a new include, source/_includes/social_share.html, and including it in my post template.
The include itself is very simple, just a container div and three image anchors.
I opted instead for static sharing links for all three, including the deprecated but still-functioning sharer.php URI for Facebook, the “tweet” intent URI for Twitter, and the “submit” URI for Reddit. The three links are composed in mostly the same way as the Open Graph tags with the additional consideration that they must be escaped, including replacing spaces with %20.