Open Graph protocol integration

I want to do the integration, is there an easy way to get the first photo of a page from the template?


the idea is to be able to easily add these META:


<meta property="og:title" content="Example title of article">
<meta property="og:site_name" content="example.com website">
<meta property="og:type" content="article">
<meta property="og:url" content="http://example.com/example-title-of-article">
<meta property="og:image" content="http://example.com/article_thumbnail.jpg">
<meta property="og:description" content="This example article is an example of OpenGraph protocol.">

Cheers


Semantic Markups

Comments

  1. Re: Open Graph protocol integration

    The file_link table tracks all used files of a page.
    The external_link table tracks analog external images.

    How and where you want determine the image you wanna use? Guess this is the main question, the rest is just code. So we can for example parse / set a file_id as metadata into the page table.

    This can be integrated in the properties or attachments handler. On the other hand you can add a additional og table and handler, totally independent from the core application.

    /theme/_common/_header.php
    $tpl->og_title		= $this->page['title'];
	$tpl->og_type		= 'article';
	$tpl->og_url		= $this->href('', $this->tag, null, null, null, null, null, true);
	$tpl->og_image		= $this->page['image'];
	$tpl->og_description	= $this->page['description'] ?? null;

    /theme/_common/_header.tpl
    [= og _ =
		<meta property="og:title" content="[ ' title | e ' ]">
		<meta property="og:site_name" content="[ ' db: site_name | e ' ]">
		<meta property="og:type" content="[ ' type | e ' ]">
		<meta property="og:url" content="[ ' url | e ' ]">
		<meta property="og:image" content="[ ' image | e ' ]">
		<meta property="og:description" content="[ ' description | e ' ]">
	=]
    • WikiAdmin
    • 11.12.2020 14:39 edited

  2. Re: integration with The Open Graph protocol

    Thank you very much for your help. 
    <meta property="og:title" content="Casete Verde Coelsa">
<meta property="og:site_name" content="Atariware Wiki">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.atariware.cl/wiki/Programas/CaseteVerdeCoelsa">
<meta property="og:image" content="">
<meta property="og:description" content="Como utilizar el casete verde de Coelsa y el detalle de su contenido">

    But I wanted him to take the first external link of the article and leave it in og_image 
     ((https://www.atariware.cl/archivos/casverde/casverde.png))

    I hope that now the idea is understood

    Greetings

  3. Re: Open Graph protocol integration

    my quick and easy solution by adding a search in the file /theme/_common/_header.php
    $tpl->og_title		= $this->page['title'];
$tpl->og_type		= 'artículo';
$tpl->og_url		= $this->href('', $this->tag, null, null, null, null, null, true);
preg_match('#\(http(.*?)\)#', $this->page['body'], $match);
$tpl->og_image		= "http".$match[1];
$tpl->og_description	= $this->get_description();

    I hope that someone will serve you too, as it is more comfortable to put the automatic photo from the article.

    Greetings and thanks for the help.
    • ascrsoft
    • 11.12.2020 14:14 edited

  4. Re: Open Graph protocol integration

    We working on the topic, but it will take some time to read the sources, look how it is done elsewhere, evaluation, think about it, test and rethink it again.

    I already thought about a short time hack, until we have a general solution:
    A temporary hack for the external image (Does not update the image once written!):

     ALTER TABLE `wacko_page` ADD `image` VARCHAR(255) NOT NULL AFTER `keywords`;

    diff --git a/src/theme/_common/_header.php b/src/theme/_common/_header.php
index 5b1ba32..143e49e 100644
--- a/src/theme/_common/_header.php
+++ b/src/theme/_common/_header.php
@@ -30,6 +30,29 @@
 {
     $tpl->page_keywords        = $this->get_keywords();
     $tpl->page_description    = $this->page['description'] ?? null;
+
+    // Open Graph protocol
+    if (empty($this->page['image']))
+    {
+        // parse first image into page table
+        preg_match('#(http(s)?):\/\/([^\s\"<>]+)\.(avif|gif|jpg|jpe|jpeg|png|svg|webp)#', $this->page['body'], $match);
+        $this->page['image'] = $match[0] ?? null;
+
+        if ($this->page['image'])
+        {
+            $this->db->sql_query(
+                "UPDATE " . $this->db->table_prefix . "page SET " .
+                    "image        = " . $this->db->q($this->page['image']) . " " .
+                "WHERE page_id = " . (int) $this->page['page_id'] . " " .
+                "LIMIT 1");
+        }
+    }
+
+    $tpl->og_title            = $this->page['title'];
+    $tpl->og_type            = 'article';
+    $tpl->og_url            = $this->href('', $this->tag, null, null, null, null, null, true);
+    $tpl->og_image            = $this->page['image'];
+    $tpl->og_description    = $this->page['description'] ?? null;
 }
 
 if ($this->db->allow_x11colors)
diff --git a/src/theme/_common/_header.tpl b/src/theme/_common/_header.tpl
index ada1846..4e06184 100644
--- a/src/theme/_common/_header.tpl
+++ b/src/theme/_common/_header.tpl
@@ -16,6 +16,14 @@
         <meta name="description" content="[ ' description | e ' ]">
     =]
     <meta name="language" content="[ ' lang ' ]">
+    [= og _ =
+        <meta property="og:title" content="[ ' title | e ' ]">
+        <meta property="og:site_name" content="[ ' db: site_name | e ' ]">
+        <meta property="og:type" content="[ ' type | e ' ]">
+        <meta property="og:url" content="[ ' url | e ' ]">
+        <meta property="og:image" content="[ ' image | e ' ]">
+        <meta property="og:description" content="[ ' description | e ' ]">
+    =]
     <link rel="stylesheet" href="[ ' db: theme_url ' ]css/default.css">
     <link rel="stylesheet" href="[ ' db: theme_url ' ]css/wacko.css">
     [= x11 _ =


    The goal is to parse it only once when the page is saved and store the result in the page table, to load the image with $this->page.

    Now we have two cases, you might have an external image as well as an attached image.
    1. https://example.com/article_thumbnail.jpg
    2. file:/article_thumbnail.jpg

    Additionally we want a flexible solution for the description, it can be a text snippet from $this->page['body'] or just $this->page['description'].

    I already looked how it is done in MediaWiki and DokuWiki. None of them deal with external images.

    And we want some configurable parameters for the description and the image output.

    [... more edits upcoming]

    Tools:
    • WikiAdmin
    • 01.06.2022 09:41 edited

  5. Re: Open Graph protocol integration

    you are absolutely right, it is not the best solution since I do not know the whole structure of wacko.

    I have no problem in waiting for a better solution from the team, what I did is just a proof of concept to see the viability of my idea.

    Greetings
Log in or create an account to post a comment.