Support Center

About Koken

This Help Center provides support for Koken, a free content management system designed for photographers, artists and designers.

Add social media metadata and links

Add social media metadata and links

Last Updated: Sep 22, 2014 04:09PM EDT

This article provides tips for adding social media metadata and share links to your custom Koken theme.

Metadata

Whenever a link to a web site is shared on a social media platform, the page is scraped for images and text to create a preview of the link's destination. This can easily lead to non-optimal content being used. Thankfully, you can dictate which content they should use by adding metadata to your templates.

Facebook

Facebook's "open graph" metadata is used by Facebook as well as Twitter and Google+. Start adding them by first including the <koken:head> tag inside the <koken:load> region of your template. For example:

<html>
<head></head>
<body>
  <koken:load>
    <koken:head>
      <!-- meta tags -->
    </koken:head>
  </koken:load>
</body>
</html>

Anything you place inside <koken:head> will be dynamically inserted into the <head> region of the page when published. It's here we add our open graph meta tags with values assigned by variables. Here is example markup for each of the recommended templates that should include metadata.

album.lens / set.lens

<koken:head>
  <meta property="og:site_name" content="{{ site.title }}" />
  <meta property="og:title" content="{{ album.title strip_html="true" }}" />
  <meta property="og:description" content="{{ album.summary | album.description strip_html="true" }}" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="{{ album.url }}" />
  <koken:covers><koken:shift>
  <meta property="og:image" content="{{ content.presets.medium_large.url }}" />
  <meta property="og:image:width" content="{{ content.presets.medium_large.width }}" />
  <meta property="og:image:height" content="{{ content.presets.medium_large.height }}" />
  </koken:shift></koken:covers>
</koken:head>

content.lens

<koken:head>
  <meta property="og:site_name" content="{{ site.title }}" />
  <meta property="og:title" content="{{ content.title|content.filename strip_html="true" }}" />
  <meta property="og:description" content="{{ content.caption strip_html="true" }}" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="{{ content.presets.medium_large.url }}" />
  <meta property="og:image:width" content="{{ content.presets.medium_large.width }}" />
  <meta property="og:image:height" content="{{ content.presets.medium_large.height }}" />
  <meta property="og:url" content="{{ content.url }}" />
</koken:head>

essay.lens

<koken:head>
  <meta property="og:site_name" content="{{ site.title }}" />
  <meta property="og:title" content="{{ essay.title strip_html="true" }}" />
  <meta property="og:description" content="{{ essay.excerpt strip_html="true" }}" />
  <meta property="og:url" content="{{ essay.url }}" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="{{ essay.featured_image.presets.medium_large.url }}" />
  <meta property="og:image:width" content="{{ essay.featured_image.presets.medium_large.width }}" />
  <meta property="og:image:height" content="{{ essay.featured_image.presets.medium_large.height }}" />
  <meta name="medium" content="article" />
</koken:head>

Twitter

Twitter can read open graph metadata but also allows you to go a step further by supporting Twitter Cards for rich media pages. Twitter Cards (at the time of this writing) don't work automatically when a page url is tweeted. Cards only appear if the host domain is on Twitter's list of verified sites. You may submit your domain for approval after your site's Twitter Card tags have been validated. Once validated and approved the cards will begin working.

Twitter Card meta tags are added to the same <koken:head> region we've been working in. Below are updated code samples for each template we've been working with.

album.lens / set.lens

<koken:head>
  <meta property="og:site_name" content="{{ site.title }}" />
  <meta property="og:title" content="{{ album.title strip_html="true" }}" />
  <meta property="og:description" content="{{ album.summary | album.description strip_html="true" }}" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="{{ album.url }}" />
  <koken:covers><koken:shift>
  <meta property="og:image" content="{{ content.presets.medium_large.url }}" />
  <meta property="og:image:width" content="{{ content.presets.medium_large.width }}" />
  <meta property="og:image:height" content="{{ content.presets.medium_large.height }}" />
  </koken:shift></koken:covers>
  <koken:not empty="profile.twitter">
    <meta name="twitter:card" content="gallery" />
    <meta name="twitter:site" content="@{{ profile.twitter }}" />
    <meta name="twitter:creator" content="@{{ profile.twitter }}" />
    <koken:covers minimum="4" limit="4">
      <koken:loop>
        <meta name="twitter:image{{ index }}" content="{{ content.presets.medium_large.cropped.url }}">
      </koken:loop>
    </koken:covers>
  </koken:not>
</koken:head>

content.lens

<koken:head>
  <meta property="og:site_name" content="{{ site.title }}" />
  <meta property="og:title" content="{{ content.title|content.filename strip_html="true" }}" />
  <meta property="og:description" content="{{ content.caption strip_html="true" }}" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="{{ content.presets.medium_large.url }}" />
  <meta property="og:image:width" content="{{ content.presets.medium_large.width }}" />
  <meta property="og:image:height" content="{{ content.presets.medium_large.height }}" />
  <meta property="og:url" content="{{ content.url }}" />
  <koken:content_image>
    <koken:not empty="profile.twitter">
      <meta name="twitter:card" content="photo" />
      <meta name="twitter:site" content="@{{ profile.twitter }}" />
      <meta name="twitter:creator" content="@{{ profile.twitter }}" />
    </koken:not>
  </koken:content_image>
</koken:head>

essay.lens

<koken:head>
  <meta property="og:site_name" content="{{ site.title }}" />
  <meta property="og:title" content="{{ essay.title strip_html="true" }}" />
  <meta property="og:description" content="{{ essay.excerpt strip_html="true" }}" />
  <meta property="og:url" content="{{ essay.url }}" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="{{ essay.featured_image.presets.medium_large.url }}" />
  <meta property="og:image:width" content="{{ essay.featured_image.presets.medium_large.width }}" />
  <meta property="og:image:height" content="{{ essay.featured_image.presets.medium_large.height }}" />
  <meta name="medium" content="article" />
  <koken:not empty="profile.twitter">
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="{{ essay.title truncate="70" }}" />
    <meta name="twitter:site" content="@{{ profile.twitter }}" />
    <meta name="twitter:creator" content="@{{ profile.twitter }}" />
    <meta name="twitter:description" content="{{ essay.excerpt truncate="200" strip_html="true" }}" />
    <meta name="twitter:image" content="{{ essay.featured_image.presets.medium_large.url }}" />
  </koken:not>
</koken:head>

Once published, and your domain is approved, tweeted links to pages will use your cards. Here's an example of how an album would appear in Twitter when tweeted:

Troubleshooting

Both Facebook and Twitter offer utilities to test your web pages. These should help you see how your pages will appear when shared.

Share links

With metadata now in your pages you'll probably want to encourage site visitors to share your albums, essays and individual images/videos. Building links for each top-level social and sharing platform is typically a pain, so we made it easy by dynamically publishing formatted share links through the <koken:link> tag.

Here's an example from the content.lens template:

<html>
<head></head>
<body>
  <koken:load>
    <koken:head>
      <!-- meta tags -->
    </koken:head>
    <koken:link share="twitter">Share on Twitter</koken:link>
    <koken:link share="facebook">Share on Facebook</koken:link>
    <koken:link share="pinterest">Share on Pinterest</koken:link>
    <koken:link share="tumblr">Share on Tumblr</koken:link>
    <koken:link share="google-plus">Share on Google+</koken:link>
  </koken:load>
</body>
</html>

When published, Koken automatically generates a link (using the item's canonical url) for each service plus all the requisite data. Click a link and a new browser window will open for the viewer to share the page through their social media account. Here's what that window looks like for the Twitter link:

Feel free to insert text, web fonts, or images between the opening and closing <koken:link> tag. Note that you may include these share links anywhere an individual album, set, essay, or image/video appears, so you may include this markup in the aforementioned templates plus any other template that displays individual assets through a loop (e.g., favorites, albums, essays).

support@koken.me
http://assets1.desk.com/
false
koken
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete