sblg — static blog utility

How do I integrate with Open Graph?

Posted by
Kristaps Dzonsons
on

It's standard practise to link one's blog to every manner of social media in a desperate attempt to be heard. Fortunately, sblg can help with that as of version 0.2.1. The secret is in special symbols, documented fully in sblg(1).

Open Graph, as described at ogp.me, works by decorating <meta> tags in the HTML head with certain attributes, e.g., 

<head prefix="og: http://ogp.me/ns#">
  <meta property="og:key" content="value" />
  <title>My Blog Page</title>
</head>

You can see all sorts of tags on ogp.me, but let's specifically consider Facebook's Open Graph specification.

To work with sblg articles, you need to use the special symbols in your article template, which we'll call bar.xml. What follows is a fragment of such a template: 

<head prefix="og: http://ogp.me/ns#">
  <meta property="og:url" content="${sblg-url}" />
  <meta property="og:description" content="${sblg-asidetext}" />
  <meta property="og:title" content="${sblg-titletext}" />
  <title>My Blog Page</title>
</head>

Note that I'm using asidetext and titletext, otherwise this would incorporate HTML tags as well. Next, make sure your page (let's call it foo.xml) has the appropriate data. Below is a full article, if an uninteresting one. 

<article data-sblg-article="1">
  <header>
    <h1>My Title</h1>
    <aside>A description of my article.</aside>
    <time datetime="2014-01-01">2014-01-01</time>
  </header>
  <p>
    Some sort of text.
  </p>
</article>

Now, when you run sblg, it will fill in these values with your article's data. You need to use either -c or -C mode in generating your output (and explicitly specify an output filename). 

% sblg -c -o article.html -t bar.xml foo.xml

That's it! Your Open Graph parameters have now been filled from the article content. 

<head prefix="og: http://ogp.me/ns#">
  <meta property="og:url" content="article.html" />
  <meta property="og:description" content="A description of my article." />
  <meta property="og:title" content="My Title" />
  <title>My Blog Page</title>
</head>