Open Graph Tags

[NOSaint]

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]

Hi,

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

[vekia]

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

[NOSaint]

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]

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]

 

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]

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]

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]

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]

cosmeticall.ro

[vekia]

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]

You mean instead of

 

 

 

to use

 

 

 

Thank you in advance.

[srm200]

<meta property="og:url" content="http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}"/>

 

and

 

<meta property="og:url" content="http://{$smarty.server.HTTP_HOST}"/>

[vekia]

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]

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]

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

 

{if $page_name=='product'}

<meta property="og:type" content="product" />

<meta property="product:retailer_title" content="{$shop_name|escape:'htmlall':'UTF-8'}" />

<meta property="product:brand" content="{$product->manufacturer_name|escape:'htmlall':'UTF-8'}" />

<meta property="product:pretax_price:amount" content="{$product->getPrice(false, $smarty.const.NULL, 2)|round:'2'|escape:'html':'UTF-8'}" />

<meta property="product:pretax_price:currency" content="{$currency->iso_code}" />

<meta property="product:sale_price" content="{$product->getPrice(true, $smarty.const.NULL, 2)|round:'2'|escape:'html':'UTF-8'}" />

<meta property="product:price:currency" content="{$currency->iso_code}" />

<meta property="product:weight:value" content="{$product->weight}" />

<meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}">

        {else}

        <meta property="og:type" content="website">

<meta property="og:image" content="{$img_ps_dir}logo.png" />

{/if}

<meta property="og:title" content="{$meta_title|escape:'htmlall':'UTF-8'}"/>

<meta property="og:site_name" content="{$shop_name|escape:'htmlall':'UTF-8'}"/>

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

<meta property="fb:app_id" content="YOUR ID" />

[Tytus_Bomba]

Hi,

On my website Merly.eu, the opengraph for products works correctly, but the homepage thumbnail pulls in random images at a very low resolution. How can I change this? In the head.tpl file, I have a variable related to product images, and I don’t want to disrupt it as long as it’s working correctly. I’d like to set a specific opengraph thumbnail for the homepage and other CMS pages, even using a direct URL if necessary.

Thank you for your help.