Open Graph Tags

NOSaint · September 12, 2013

Hey Guys,

Any ideas on how to add og tags in PS? Specifically, where and how to place them?

I'm trying to install Addthis' newest feature Smart Layers to my site. I have added the simple code using PS Free Block Module as always. Every piece of Addthis feature appears correctly except the 'Recommended Content Layer" feature which is supposed to appear at the bottom of the page. It does appear, but the images attached to that layer do not.

Through research I've found that it's because I need to have og tags in my header for the images to appear. But when I added the following code to the header.tpl of my theme my site crashed.

<meta property=”og:title” content=”{$meta_title|escape:’htmlall’:'UTF-8′}”/>
<meta property=”og:url” content=”http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}”/>
<meta property=”og:site_name” content=”{$shop_name|escape:’htmlall’:'UTF-8′}”/>
<meta property=”og:type” content=”website”>
<meta property=”og:description” content=”{$meta_description|escape:html:’UTF-8′}”>
<meta property=”og:image” content=”{$img_ps_dir}logo.jpg”>

Any ideas where I need to put this? Or what I'm doing wrong?

mfedorets · September 12, 2013

Hi,

These tags should be placed inside head block in the header.tpl. Could you provide a screenshot where theme is crashed?

vekia · September 12, 2013

what you mean by "Crashed" you've got some errors? like internal server error or something similar?

NOSaint · September 12, 2013

Hey vekia and mfedorets, thanks for replying :-)

By crashed I mean that right after I put the code in my header.tpl....I did a force compile and then cleared the browser cache. Afterwards my site gave the "Server Error" page. I removed the code and the site came back up again.

Below is what it looks like when I paste it and where I paste it in folder themes/"mytheme"/header.tpl

{$HOOK_HEADER}
                      <meta property=”og:title” content=”{$meta_title|escape:’htmlall’:'UTF-8′}”/>
<meta property=”og:url” content=”http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}”/>
<meta property=”og:site_name” content=”{$shop_name|escape:’htmlall’:'UTF-8′}”/>
<meta property=”og:type” content=”website”>
<meta property=”og:description” content=”{$meta_description|escape:html:’UTF-8′}”>
<meta property=”og:image” content=”{$img_ps_dir}logo.jpg”>
                     </head>

vekia · September 12, 2013

so if you've got "server error" page, please turn on error reporting:

open config/defines.inc.php

find this line

define('_PS_MODE_DEV_', false);

change to look like this:

define('_PS_MODE_DEV_', true);

you will see what exactly doesn't work in this code

cdbagency · February 4, 2014

Hey vekia and mfedorets, thanks for replying :-)

By crashed I mean that right after I put the code in my header.tpl....I did a force compile and then cleared the browser cache. Afterwards my site gave the "Server Error" page. I removed the code and the site came back up again.

Below is what it looks like when I paste it and where I paste it in folder themes/"mytheme"/header.tpl
{$HOOK_HEADER}
                      <meta property=”og:title” content=”{$meta_title|escape:’htmlall’:'UTF-8′}”/>
<meta property=”og:url” content=”http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}”/>
<meta property=”og:site_name” content=”{$shop_name|escape:’htmlall’:'UTF-8′}”/>
<meta property=”og:type” content=”website”>
<meta property=”og:description” content=”{$meta_description|escape:html:’UTF-8′}”>
<meta property=”og:image” content=”{$img_ps_dir}logo.jpg”>
                     </head>

Hi.

The problem with this code is for the " and ' characters that are the wrong ones when you copy and paste the code.

Try to find and replace all the " and ' with the correct ones in a separate text file (better in Dreamweaver whre you can see the correct version with the highlight colors) and then copy and paste the result code on your header.tpl file.

I tried it and it's all ok for me.

Bye

cdbagency · February 4, 2014

And you better use this code:

<meta property="og:title" content="{$meta_title|escape:'htmlall':'UTF-8'}"/>
<meta property="og:url" content="http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}"/>
<meta property="og:site_name" content="{$shop_name|escape:'htmlall':'UTF-8'}"/>
<meta property="og:type" content="website">
<meta property="og:description" content="{$meta_description|escape:html:'UTF-8'}">
{if $page_name=='product'}
<meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}">
        {else}
<meta property="og:image" content="{$img_ps_dir}logo.jpg" />
{/if}

that is from here.

It chooses the right image for the og:image tag.

Bye

srm200 · February 6, 2014

Hello cdbagency,

I have a problem with sharing on facebook. It always shares the advertising block image instead of product image.

I have copied your code and put it in header.tpl file, but nothing changed.

Any idea whats going on ?

Thanks in advance.

vekia · February 6, 2014

Hello cdbagency,

I have a problem with sharing on facebook. It always shares the advertising block image instead of product image.

I have copied your code and put it in header.tpl file, but nothing changed.

Any idea whats going on ?

Thanks in advance.

can you share url to your website, please?

srm200 · February 6, 2014

cosmeticall.ro

vekia · February 6, 2014

you've got troubles due to the fact that your website uses duplicated tags,

og:url

make sure that you use only one definition of this meta tag

srm200 · February 6, 2014

You mean instead of

to use

Thank you in advance.

srm200 · February 6, 2014

and

vekia · February 6, 2014

to be honest, i have no idea how you added these tags. so i have to ask this first

how you added them?

youv'e got two separated meta tags for og:url, also for other open graph tags too,

it seems like this causing troubles.

srm200 · February 6, 2014

I have added the code that NOsaint posted in this topic in the header.tpl file.

Here is the entire header.tpl file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
	<head>
		<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
		<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
		<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<meta http-equiv="content-language" content="{$meta_language}" />
		<meta name="generator" content="PrestaShop" />
		<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
		<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
		<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
		<script type="text/javascript">
			var baseDir = '{$content_dir}';
			var baseUri = '{$base_uri}';
			var static_token = '{$static_token}';
			var token = '{$token}';
			var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
			var priceDisplayMethod = {$priceDisplay};
			var roundMode = {$roundMode};
		</script>
{if isset($css_files)}
	{foreach from=$css_files key=css_uri item=media}
	<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
	{/foreach}
{/if}
{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
<meta property="og:title" content="{$meta_title|escape:'htmlall':'UTF-8'}"/>
<meta property="og:url" content="http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}"/>
<meta property="og:site_name" content="{$shop_name|escape:'htmlall':'UTF-8'}"/>
<meta property="og:type" content="website">
<meta property="og:description" content="{$meta_description|escape:html:'UTF-8'}">
{if $page_name=='product'}
<meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'default_large')}">
        {else}
<meta property="og:image" content="{$img_ps_dir}logo.jpg" />
{/if}
		{$HOOK_HEADER}
	</head>
	
	<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if}">
	{if !$content_only}
		{if isset($restricted_country_mode) && $restricted_country_mode}
		<div id="restricted-country">
			<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
		</div>
		{/if}
		<div id="page" class="container_9 clearfix">

			<!-- Header -->
			<div id="header" class="grid_9 alpha omega">
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
				</a>
				<div id="header_right" class="grid_6 omega">
					{$HOOK_TOP}
				</div>
			</div>

			<div id="columns" class="grid_9 alpha omega clearfix">
				<!-- Left -->
				<div id="left_column" class="column grid_2 alpha">
					{$HOOK_LEFT_COLUMN}
				</div>

				<!-- Center -->
				<div id="center_column" class=" grid_5">
	{/if}

Please do tell me what I have done wrong.

Thank you.

millien · September 7, 2017

I added som extra parameter DON'T FORGETT to change app_id

{if $page_name=='product'}

{else}

{/if}

Open Graph Tags

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in