Skip to content

Latest commit

 

History

History
195 lines (140 loc) · 6.16 KB

File metadata and controls

195 lines (140 loc) · 6.16 KB

Link Preview for Social Networks from Kirbytext

Result of using social meta tags

About

This code is written for the Kirby CMS to generate social media meta tags. This results in having a nice preview when posting a link on Facebook, Twitter, LinkedIn and more! (See example above)

I wrote this script for publishing a project called robutter.

Installation

1. Download the script

Download the social-media-meta-tags.php from this repo.

2. Move to Kirby Snippet folder

Move the file you just downloaded to the Kirby Snippets folder located in Kirby ▶ site ▶ snippets.

3. Edit default twitter handle

Open the file in a text editor and replace st_phan in the 4th line with your Twitter handle.

4. Add to Website Header

Make changes to your Kirby header file located at Kirby ▶ site ▶ snippets ▶ header.php by adding following snippet:

<?php snippet('social-media-meta-tags') ?>

Example result:

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <title><?php echo $site->title()->html() ?> | <?php echo $page->title()->html() ?></title>
  <meta name="description" content="<?php echo $site->description()->html() ?>">
  <meta name="keywords" content="<?php echo $site->keywords()->html() ?>">

  <?php snippet('social-media-meta-tags') ?>
  <?php echo css('assets/css/main.css') ?>

</head>
<body>
  <header class="header cf" role="banner">
    <a class="logo" href="<?php echo url() ?>">
      <img src="<?php echo url('assets/images/logo.svg') ?>" alt="<?php echo $site->title()->html() ?>" />
    </a>
    <?php snippet('menu') ?>
  </header>

5. Add Open Graph HTML prefix

For Open Graph you have to add a prefix to your html-tag

e.g. <html prefix="og: http://ogp.me/ns#> (in the example above, this can also be seen)

6. Done, go write some posts!

Writing a Kirby Post

Explicit use

Now you have to define what should be displayed when your link gets posted. This is done by adding custom tags to your Kirbytext markdown - see defaults for what happens when you don't define them.

Tags for Twitter:

Main
  • TwitterCard: Card type
  • TwitterSite: Twitter handle of the page
  • TwitterTitle: Page title
  • TwitterDescription: Description text
  • TwitterImage: Image to be shown (for summary cards with images)
Other
  • twitterImageAlt

More infos can be found on the Twitter Card Developer page.

Tags for OpenGraph:

Main
  • OpenGraphTitle: Page title
  • OpenGraphDescription: Description text
  • OpenGraphType: Type of OpenGraph element
  • OpenGraphImage: Image to be shown
  • OpenGraphUrl: Url to page
Other
  • OpenGraphAudio
  • OpenGraphDeterminer
  • OpenGraphLocale
  • OpenGraphLocaleAlternate
  • OpenGraphSiteName
  • OpenGraphVideo

More infos can be found on the Open Graph Protocol page or the Facebook "Open Graph Stories"-page.

Defaults

This will happen, when you don't specify the tags explicitly → for most normal posts, you won't have to specify anything. (Everything will happen in order, so if 1. can not be found, it tries 2., etc.)

General

  • Title
    1. The OpenGraph title (Twitter only)
    2. The title of the page
  • Image
    1. The OpenGraph image (Twitter only)
    2. An image called 'opengraph.jpg'
    3. An image called 'opengraph.png'
    4. The first image of the project (which might not meet the OpenGraph criteria)
  • Description
    1. Takes the OpenGraph description (Twitter only)
    2. Takes the description of the website
    3. Will be empty

Twitter specific

  • Site ( = Twitter user)
    • A default one (specified in the file)
  • Card
    • The default type summary

OpenGraph specific

  • Url
    • The url of the page
  • Type
    • The default type article

Example Markdown

Title: robutter

----

OpenGraphTitle: robutter

----

OpenGraphDescription: Making butter with robots to explore the boundaries between handcraft and industrial production

----

OpenGraphImage: http://stephanbogner.de/content/projects/robutter/og-image.jpg

----

OpenGraphUrl: http://stephanbogner.de/projects/robutter

----

TwitterCard: summary_large_image

----

TwitterSite: @st_phan

----

TwitterImage: http://stephanbogner.de/content/projects/robutter/og-image.jpg

----

Text: You can make your own butter by shaking cream until your arms hurt. Or you can use robots instead. The resulting product is 20 jars of limited edition, hand- and robot-crafted butter. We call it *robutter*.

Testing

License

Public Domain