Jump to content

[FREE MODULE] Facebook Open Graph Tags


Recommended Posts

I installed the module, but now the facebook comments are not loading anymore on product site. Seems that there is an incompatibility between the modules ?

 

EDIT: as I'm using an own template I now did a work-arround for this without any module by adding the code to header.tpl

 

Instructions for all they want to have open graph tags without any module:

 

Add to your theme header.tpl the following code:

 

/themes/your theme/header.tpl

 

For PS 1.6.0.9 about line 85.

<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}

For other PS versions or themes: add the lines exact after the line {$HOOK_HEADER}

 

The block than should be:

        {$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'}">
{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}

GOOD LUCK !

Edited by selectshop.at (see edit history)

Share this post


Link to post
Share on other sites
  • 4 weeks later...

...I'd like to be able to understand that, women would love me here, but I don't :D
Not sure what you mean but you don't need any facebook app id to run it, you just need to share the page

Share this post


Link to post
Share on other sites
  • 2 months later...

Hi, thanks for an amazing module . Do you know where the problem may be with accents ? All files are in UTF-8. thanks

(post-537436-0-31202600-1430927130_thumb.jpg

 

sorry for google translate :)

Share this post


Link to post
Share on other sites
  • 2 weeks later...

It should be, but it's hard to tell what you need to do, as it really depends on the module, and where/when it assigns variables to the page (so that you can add them to the graph tags of the header)

Share this post


Link to post
Share on other sites

Hi Nemo,


I also installed your module on 1.6.0.9, and it seems to work, i mean i can see the tags in the head and they're correct. 

But (while geolocalization is off) when I click on a facebok share button, there's no picture displayed. the og:image tag is correct and i can access the image with a browser.

 

 

Facebook Debugger is pretty harsh :

Error parsing input URL, no data was cached, or no data was scraped.

 

also :

Document returned no data

I still can see the product's name, description and the website URL in the shared content. Can you please tell me what I should look for ?

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Odd. What is the image size?
I noticed something odd with another plugin (for wordpress). Basically it keeps rotating through all the page's images even if there is an ograph tag. Hard to tell why at the moment

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Hello,
 
thank you for your module its really great. But if i have bigger price on some product, FB debbuger returns it as invalid object, because 
price looks like this:
 

<meta property="product:price:amount" content="5,886.00">

 
So i fixed in psograph.php

'og_product_price_amount' => number_format($product_price, 2),

 
to

'og_product_price_amount' => number_format($product_price, 2, '.', ''),
Edited by ggebl (see edit history)

Share this post


Link to post
Share on other sites

ggebl, thanks for spotting it!
@Can Memiş,​ it appears the snippet is duplicating your domain, you can try dumping $cover_img in the module's core file and see if that's correct

Share this post


Link to post
Share on other sites

Well you nee dto know a bit of php. Just locate that inside psopengraph.php, then right after it's assigned use var_dump($cover_img) and see if it's the correct url, in the front.

Share this post


Link to post
Share on other sites


// Product Image

$id_cover = Product::getCover($id_product);

 

if($id_cover)

$cover_img = $this->context->link->getImageLink($id_product, $id_cover['id_image']);

else $cover_img = '';

 

$this->context->smarty->assign(array(

'og_product_price_amount' => number_format($product_price, 2),

'og_product_image' => $cover_img,

'og_product_price_currency' => $currency

));

Share this post


Link to post
Share on other sites
  • 2 weeks later...


<div style="float:left">

 

<form style="text-align:right" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">

<input type="hidden" name="cmd" value="_s-xclick">

<input type="hidden" name="hosted_button_id" value="GSG68TUKQC24J">

<input type="image" src="https://www.paypalobjects.com/en_US/IT/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

</form>

</div>';

Share this post


Link to post
Share on other sites
  • 2 months later...
  • 2 weeks later...

How do I tell if the module works? I have a test site that closely resembles live site and while on a product page, I'm not seeing any difference in Pinterest Pin buttons or when I click on them 

Share this post


Link to post
Share on other sites
  • 1 month later...

Hi guys i had a problem with opengraph tags and facebook sharing it took me 4 days of banging my head on the wall before i realized that having geo-ip feature enabled and not having hong-kong enabled in countries able to access my product cataloge ment that the facebook servers in hongkong just could not see my product images. 

Share this post


Link to post
Share on other sites

I do not use this module but you clearly have at least, one problem, check the source of your pages and you will see multiples instances of the tag :

meta property="og:image"

 

each one with a different image so it can't work as you should have it only once...

 

check your pages in Facebook debug Here: https://developers.facebook.com/tools/debug/

 

Beside your open graph problem you have bunch of tags messing your pages and i am afraid you run into troubles to get your site properly indexed , use the W3c validator : https://validator.w3.org/ and Google page speed insight :

 

https://developers.google.com/speed/pagespeed/insights/

 

get a webmaster tool account + analytics at Google this also help a lot to discover errors

 

good luck ....

Edited by ventesites (see edit history)

Share this post


Link to post
Share on other sites

Studio1

 

here is the url to that store www.corecosmetic.com and it seems to be some kind of error when I check facebook debug.

Check the source of your page, your open graph image tag is:

/img/clone-corecosmeticcom-1417990650.jpg

 

You have an error somewhere in the set up of your site's url so it comes in double which mean erreur 404... your open graph image can't work !

Share this post


Link to post
Share on other sites
  • 3 weeks later...

Hi nemo,

I had problem that product images wouldn't load, and og tags were printing twice. I unhooked Social Sharing from Header hook and that fixed the product images, but then the Social Share buttons don't do anything, so I had to disable the Social Sharing module entirely. Now all the images appear correctly on Facebook, but I have no Social Share buttons. Is there any way Social Share can work with your module?



Thanks for your work, and thanks in advance if you are able to assist with this :)

Share this post


Link to post
Share on other sites

I'll look into it and if I figure solution I'll post - one other problem:

I have SSL on everywhere but my og:url is http so I get a Circular Redirect Path from

original   https

og:url     http
301        https

Can you point me in the direction to fix?

Share this post


Link to post
Share on other sites
  • 1 month later...

Does someone know how to make facebook share a product also with price.

I have inlcuded open graph price tag but sharing doesn't inlcude price.

Thanks for any help

Share this post


Link to post
Share on other sites
  • 1 month later...

Testing my site thecakeboxes.co.uk using opengraph debugger and getting the following errors. Also on rich pins validator it  is unable to retrieve any data.

 

og:image could not be downloaded or is too small

og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image '' will be used instead. Consult http://developers.facebook.com/docs/sharing/webmasters/crawler for more troubleshooting tips.

Share App ID Missing The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog. Parser Mismatched Metadata The parser's result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: 'og:site_name'

Edited by undiscovered33 (see edit history)

Share this post


Link to post
Share on other sites

I haven't updated it in a while, it might be lacking some of the latest needed features. As for the image, is og:image outputting in the html?

Share this post


Link to post
Share on other sites
  • 3 weeks later...
Hi, i installed your module but some it s wrong....when i try share some products in facebook, image size it s no the same for every products and miss all...description...price....

webside it s joomoda.com

can you look why make this ?

 

Thank you

Jolanta

Share this post


Link to post
Share on other sites
  • 1 month later...

Thanks for this free module Nemo.

 

I have 1 small error on my install.

 

"The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog."

 

Is this needed ? I cannot see anywhere in your app config to set this.

 

Thanks

Share this post


Link to post
Share on other sites

Unless the api has changed in a way that is required now (it might have, I didn't check it recently), it should not

Share this post


Link to post
Share on other sites
  • 2 months later...

Hi i installed your module on v1.6.1.6 its working perfect except description tag is always empty items do have a description  thanks for your free modules and tutorials i have learned alot 

 <meta property="og:type" content="og:product" />
<meta property="og:title" content="See Through Mesh Sexy Swimwear" />
<meta property="og:image" content="http://www.sexywifelingerie.com/248/175.jpg" />
<meta property="og:site_name" content="Sexy [spam-filter] Lingerie" />
<meta property="og:description" content="" />
<meta property="og:url" content="http://www.sexywifelingerie.com/one-piece-swimsuit/175-see-through-mesh-sexy-swimwear.html 

except og:description is empty 

Share this post


Link to post
Share on other sites
  • 1 month later...

Hello. 

 

Thanks for the module. But there is something missing here.

 

If the link will be rendered by facebook for the first time, it doesn't get the image and says "The provided 'og:image' properties are not yet available because new images are processed asynchronously. To ensure shares of new URLs include an image, specify the dimensions using 'og:image:width' and 'og:image:height' tags."

 

Is it possible to add width and height for the images?

 

Edit: The second problem is language selection doesn't work at module configuration page. 

Edited by servetsarap (see edit history)

Share this post


Link to post
Share on other sites
  • 1 month later...

It should work, but I didn't test it honestly

If the link will be rendered by facebook for the first time, it doesn't get the image and says "The provided 'og:image' properties are not yet available because new images are processed asynchronously. To ensure shares of new URLs include an image, specify the dimensions using 'og:image:width' and 'og:image:height' tags."

 

Is it possible to add width and height for the images?

 

Second problem is I can not set images for different languages. When I press the flag, it doesn't show the other languages in my shop. How to fix it?

 

Regards,

Share this post


Link to post
Share on other sites

Well I should upgrade it for 1.6 as the language switcher has changed. Unfortunately, I don't have enough time to do it now, and I will in any case wait for a stable 1.7

Share this post


Link to post
Share on other sites

I think it has a different problem. Because i have a localhost 1.6.1.7 website and the moodule works with it. My live website is 1.6.1.6 and it doesn't work. 

 

Is it possible to remove language selection easily until 1.7 released? At least i can use same photo for all languages.

 

Regards,

Share this post


Link to post
Share on other sites
  • 1 month later...

Hello everyone.

 

I'm fairly new to prestashop. I have installed the module but the metatags do not show in the product pages. When I press the share button I'm getting the wrong image for the product that is shared on FB.

My website is http://www.top-hair.gr/ if anyone can give me some guidance I'd appreciate it.

Thank you in advance.

 

My prestashop version is 1.6.1.2

Edited by pourouz (see edit history)

Share this post


Link to post
Share on other sites
  • 4 weeks later...
  • 4 weeks later...

Very odd, try to reset it, it should hook to displayHeader

 

I have reinstalled the module but it doesn't solve the problem. Still, I can't use the language selection bar. Nothing happens when i click on the flag. Someone said that maybe the problem is javascript but i have no idea how to fix it.

 

Is it possible to edit the codes and remove language selection? So, I can use the same photo for all languages. I really need it.

 

Thanks.

Share this post


Link to post
Share on other sites

Hi, how can I do so when I share a category I have several articles. As it did prestashop 1.6 in the original version (without this module).

I would also like to get this effect on new products and discount products.

 

thanks.

post-1316083-0-32131200-1487269373_thumb.jpg

Edited by bsldiego (see edit history)

Share this post


Link to post
Share on other sites
  • 4 weeks later...

Hi NemoPS,

 

Are you able to tweak the code such that it allows multiple "og:image" instead of one?

 
In return for your help, I found an error in the switch case lines for product where $og_type is suppose to be "product" but your version came with "og:product".
                                case 'product':
                                        $og_type = 'product';
                                        $this->assignProductOG();
                                        break;
                        }
Edited by johngoh (see edit history)

Share this post


Link to post
Share on other sites
  • 6 months later...

Hi folks,

 

is possible use this module in PS 1.6 ?

 

thx

 

 

Hi!

No, it only works on 1.5. You can, however, manage to make it work if you change the image upload snippet

Share this post


Link to post
Share on other sites
  • 3 months later...
  • 2 weeks later...
  • 3 weeks later...
  • 5 months later...

Hi. Thanks for great module. 

Anybody can help me I`m trying to paste categoty name for Product OG

	protected function assignProductOG()
	{
		// get product info
		// product:price:amount
		// product:price:currency
		if ($id_product = (int)Tools::getValue('id_product'))
		{
			$product_price = Product::getPriceStatic($id_product);
			$currency = $this->context->currency->iso_code;
			//category
			$category = new Category((int)$product->id_category_default, (int)$this->context->language->id);

Last line im trying to get category name

			$this->context->smarty->assign(array(
				'og_cat' => $category,

Then assign for tpl

And when I`m put in tpl is no result

	<meta property="article:section"           content="{$og_cat}" />

 

Share this post


Link to post
Share on other sites
11 hours ago, NemoPS said:

Try

 


'og_cat' => $category->name,

 

Changed to 'og_cat' => $category->name

But no results. In front-office product page I see

<meta property="article:section" content="" />

Share this post


Link to post
Share on other sites
  • 2 months later...

I've installed this module on prestashop 1.6.1.21 and everything works fine but the text in content attribute of og:title is shown coded instead of showing text in persian.

also consider that all Persian texts in the pages view source are fine except og:title tag.

screenshot:
https://www.screencast.com/t/d8D7MDKcW

All of this happens also the main pages title tag is shown in Persian correctly, as you can see in the screenshot:
https://www.screencast.com/t/x2Va4xG9

Share this post


Link to post
Share on other sites
On 2/9/2018 at 6:08 PM, attila729 said:

in Prestashop 1.7.2.4 what is the code open graph and where is it write?

Hey friends, have you found a solution for Prestashop 1.7? 


I haven't used any module but used the following code within the file head.tpl, however, even if the browser gets the variable contents, therefore it shows in "Show source code" the right description and title of the current page, Facebook and Facebook debugger only show the title and description set in the SEO and URLs section of the back-office on my shop. 

Any idea, please?

Moreover, do you have any idea on how to set the og:image dynamic?
 

<meta property="og:title" content="{block name='head_seo_title'}{$page.meta.title}{/block}"/>
<meta property="og:description" content="{block name='head_seo_description'}{$page.meta.description}{/block}"/>


Thanks!

Share this post


Link to post
Share on other sites
  • 2 weeks later...
  • 3 weeks later...
  • 4 weeks later...

Hello

I have PS 1.6.0.14 but it doesn't seem to work.

When i try to share the main url it fetches images from the homepage but no specified image in the module.

I tried FB debugger and it says that all og tags are missing. www.tullat.com is my website.

Any help!?

Thanks.

Share this post


Link to post
Share on other sites
  • 10 months later...
  • 3 months later...
  • 2 months later...
  • 11 months later...

Hi,

 

Does anybody knows why when i share a product, it appears like:

Exmple:

Image (Bigger than on the site)

Product Name

Product Name again

And it's it... No price, no meta tag of store, nothing,  and the name of the product two times?! Why?

 

Can someone help fix it? Working on Prestahop 1.6.1.24

 

 

Thanks.

 

Untitled.png

Share this post


Link to post
Share on other sites
7 hours ago, Sergio said:

Hi,

 

Does anybody knows why when i share a product, it appears like:

Exmple:

Image (Bigger than on the site)

Product Name

Product Name again

And it's it... No price, no meta tag of store, nothing,  and the name of the product two times?! Why?

 

Can someone help fix it? Working on Prestahop 1.6.1.24

 

 

Thanks.

 

Untitled.png

Ok the second line with the "duplicated" name, i got it, it was the Meta description of the product.

That leaves me only with the zoomed image, and no price.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More