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.
Download the social-media-meta-tags.php from this repo.
Move the file you just downloaded to the Kirby Snippets folder located in Kirby ▶ site ▶ snippets.
Open the file in a text editor and replace st_phan in the 4th line with your Twitter handle.
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>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)
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.
- 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)
- twitterImageAlt
More infos can be found on the Twitter Card Developer page.
- OpenGraphTitle: Page title
- OpenGraphDescription: Description text
- OpenGraphType: Type of OpenGraph element
- OpenGraphImage: Image to be shown
- OpenGraphUrl: Url to page
- OpenGraphAudio
- OpenGraphDeterminer
- OpenGraphLocale
- OpenGraphLocaleAlternate
- OpenGraphSiteName
- OpenGraphVideo
More infos can be found on the Open Graph Protocol page or the Facebook "Open Graph Stories"-page.
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.)
- Title
- The OpenGraph title (Twitter only)
- The title of the page
- Image
- The OpenGraph image (Twitter only)
- An image called 'opengraph.jpg'
- An image called 'opengraph.png'
- The first image of the project (which might not meet the OpenGraph criteria)
- Description
- Takes the OpenGraph description (Twitter only)
- Takes the description of the website
- Will be empty
- Site ( = Twitter user)
- A default one (specified in the file)
- Card
- The default type summary
- Url
- The url of the page
- Type
- The default type article
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*.
- For Twitter: Twitter Card Validator
- For Facebook: Facebook URL Debugger
Public Domain