Smarty template tricks for OG:tags with international charsets

TL;DR version: if you use opencart or prestashop and your shares on facebook don’t look good, you have product images missing or product descriptions missing, read the article completely, to learn how to properly og: tag your templates.

Some of my Prestashop and Opencart customers, especially French and eastern-europeans use in their product and category names special apostrophe characters, that while look good on the product page, in the product or category description itself, cause a very strange behaviour in Facebook’s sharer apps.

Some examples would be a very common word: rock and roll, written abbreviated : rock’n’roll. Because the templating system of all major e-commerce engines & CMS-es is written in PHP (some use smarty), and because both in PHP’s and smarty’s case THE ALTERNATION OF SINGLE OR DOBLE QUOTES is very, very important, having a product description, or category description that has an apostrophe sign (single quote, ‘ ) or double quote (” ) in it, simply messes up that said alternation cycle of the scripting or templating engine in which the site’s backend or “engine” was written.

While no error is reported by facebook or by the sharer scripts, the product images, category images, or product descriptions from such sites don’t get transferred by the sharing window to facebook, and I’ve heard quite a few people complain and say that it’s “that damn sharer window”, that’s the one that doesn’t work correctly.

Actually, the sharer works just fine, but you have to send it the correctly formatted data, for it to accept it.

This applies to og:image, og:title, and og:description tags. I’ll describe 2 examples, one for Prestashop’s Smarty templating engine, and one for Opencart, which may or may not be using a smarty-enabled template, depending on version and theme.

In case you want to “tell” facebook where to take the correct image, description, and title for your product pages, main page, or category pages, in your Prestashop webshop, you are probably using a simple social sharing or simple opengraph tagging module. The problem with these modules is that they (their developers) didn’t think predictively, and didn’t foresee the case in which the content to be share may contain apostrophes !

So most modules insert something like the following in the header.tpl of the theme:

<meta property="og:title" content="{$meta_title|escape:'html':'UTF-8'}" />
<meta property="og:site_name" content="{$shop_name}" />
<meta property="og:description" content="{$meta_description|escape:'html':'UTF-8'}" />

Open Graph tags for Opencart, Prestashop and others

Facebook sharer’s OG:tags

While the code is technically correct, if the meta description is poorly written, you would want a much better description to be shown on your share, then a few-words-long meta, right ? So you’d want to use the actual product description, and to avoid the cutting off of content from it, you’ll have to replace first the apostrophe characters with a grave accent character  ` (usually the first character BEFORE the numeric 1 on the left, on US keyboards)

To do this, smarty allows the parsing of input strings from left to right, so the rightmost output will be sent to the sharer. So to remove any apostrophe from the description (or title, or from any string), you pass the string to smarty’s string replacement function like this:

|replace:'”‘:’`’ (pipe replace colon doublequote apostrophe doublequote colon singlequote graveaccent singlequote)

So the og:description property becomes this:

<meta property="og:description" content="{$meta_description|escape:'html':'UTF-8'|replace:"'":'`'}" />

And you can do the same for ANY smarty template, whether it’s Prestashop or other CMS or platform.

To do the same in PHP, for a simple opencart template, you can use PHP’s string replacement function, str_replace. So in this case, the og:description becomes this:

<meta property="og:description" content="<?php str_replace("'",'`',utf8_decode($product_description));?>" />

Now when you share your content on facebook, the proper description will be passed over from your e-shop, and your posts and shares on the social media will be more rich and engaging.

Did this make sense to you ? Do you have any questions with regard to the og: tags for your products or other content ? Leave a comment and let’s talk about it.

And as always, if you liked this post, please share it on your favorite social media, using any of the buttons below.


Leave a Reply

Your email address will not be published. Required fields are marked *

From the blog's feed: