Nextcloud gallery with Open Graph metadata

2019-10-09 WINDSKETCH Comments 1 comment

Here is the story about a user who want to share Nextcloud gallery to Facebook with image thumbnails…

We all had encountered such a situation that while sharing a web link to Facebook (or other social media platforms), there is neither proper description nor a thumbnail representing that link.

This is due to the lack of certain metadata (Open Graph) for Facebook to parse. For the Nextcloud gallery, there is already an open issue in GitHub. To handle this, especially in the shared gallery app links (which is mostly I shared), we need to modify the template for Nextcloud public pages.

First, find the path of Nextcloud in our server. It is something like /var/www/nextcloud. After that, we should be able to locate the php file we have to modify, which is core/templates/layout.public.php under directory nextcloud. Next, use the editor whatever you are familiar with (for example, vim) to edit layout.public.php, and you will see there is already some metadata under the <head> tag.

Here we need to add additional Open Graph metadata, which started with og: in their names.

The result corresponding to each og tag is illustrated by the following image.

og:title: the title with bold text in the preview
og:site_name: the site name for the link we shared, not in effect in the preview
og:description: the text under the title in the preview
og:image: url of the thumbnail we want to use in the preview

The image provided in og:image should have at least 200*200 px, and if the resolution of smaller than 600*315, the thumbnail will be located on the left of the text:

By the way, the Facebook online debugger is available for testing to see if the result is desired.

After realizing the principles of Open Media metadata tags, we can modify these meta tags with our own contents.

og:title

For the title, I choose the text right after the logo in the public gallery page. Take the following screenshot for example, the og:title is Landscape.

This text is easy to retrieve with the PHP function p($template->getHeaderTitle()) defined per theme.

og:site_name

Despite the fact that this tag is not shown in the preview, I set og:site_name as p($theme->getName()). The default name is Nextcloud.

og:description

For this tag, I would like to have two texts right after the logo separated by the “-“. Take the image above for example again, this would be Landscape – shared by windsketch.

p($template->getHeaderDetails()) indicates the text after “-“.

og:image

This one is a little tricky since there is no built-in function for returning image url per each shared gallery link. (However, If you want to use a specific image for all shared link, the code shown above is what you need.)

Here, a shared text in JSON format is created to indicate the shared links and the images I want to use as og:image.

1. Create a new text file in Nextcloud

2. Record the paring of public link and image in JSON format

The key-value pairs in JSON format should be{ "key1" : "value1", "key2" : "value2"}.

For example, here I have two images for two links. In addition, it would be nice to have a default og:image if the shared link is not found in key-value pairs.

The key of each entry is the shared URI comes after the hostname component, which should come with /apps/gallery/s/.... in this example (The shared URI can be retrieved by clicking the sharing icon in Gallery app). As for the value corresponding to each key, it is the url of image we would like to present in Facebook as the thumbnail. If we want to use the image already stored in Nextcloud, simply copy the image link by right-clicking the shared image:

To get the public link for the JSON file, we should share it first.

After browsing the shared link, you would see a button for downloading the file. Right-click that button and click Copy Link Address to get the link address, which will be used later.

We have to decode the JSON into PHP array with the built-in function json_decode("http://the/JSON/download/link/we/got", true), and simply use $array['key'] to retrieve the value corresponding to the given key.

The final result would be something like:

Here shows the details of metadata I added in layout.public.php.

Boom! That’s it. 😃

From Y to X