[FREE MODULE] Facebook Open Graph Tags

[NemoPS]

 

Download for free here

 

Social Media Marketing will be they Key to increase your website's rank in Search Engines and boost  your visibility. If you share you products on Facebook, you might want to get 100% out of the Open Graph api, to display the right image, product name, site origin and more for the items you like!

Features

• Totally FREE
• Supports Pinterst RIch Pins!
• Creates a complete set of Open Graph Tags for all pages
• Price and currency information added to the og product object
• Custom Images for each language
• Manufacturers and Suppliers images too!

[BoutikShop69]

Bonsoir,

 

Est-ce que votre module supporte prestashop 1.4.4.0 ?

 

Cordialement

[NemoPS]

Hi!

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

[BoutikShop69]

How, please?

[NemoPS]

It's long to explain, you have to be aware of how images were uploaded in 1.4, as 1.5 uses an imageManager class

[MockoB]

Hello.

First of all thank You for your work. It is great and useful module.

Unfortunately I have a small problem and I don't know is it connected with the module or something else. The facebook share does't share my product image just some undefined part of my logo. When I use facebook open graph object debugger, it says that og:image should be larger and instead it will use ... The picture shown few lines below is the right picture of my product and when I open it, it shows the right size which is more then 200x200. The most strange thing is that when I use debugger tool for the same product once again it doesn't give me error anymore, and when I share it through my page everything is ok. Please explain me where the problem could be? And how can I solve this without debugging manually every single product of my store?

Thank You in advance.

[NemoPS]

It's really weird, can you link your website?

[MockoB]

Hello again.

I opened the site two hours ago for you to view the problem. Now I am trying to share some of the products, and every one of the products looks to share with a picture in all social network buttons!?!? Is it possible that my site is in maintenance mode, and is not accessible from external ips to cause the problem?

Regards

[NemoPS]

It works for me now, I think it was the maintenance mode!

[srm200]

Hello Nemo,

 

I installed the module and it seems it does not work.

 

My problem is that when I share a product page on facebook it shares the block advertising image instead of product image.

 

Here is my site.

 

Is there any way to fix this issue ?

 

Thank You in advance.

[NemoPS]

The module is not active, there are no opengraph tags in the site's html at the moment

[srm200]

Hello Nemo and thanks for the quick reply.

 

The module is installed and i guess it is active to, this is the print screen.

When i saw that it does not work i have also tried to uninstall and instal it allover again, but nothing has changed .

 

I don't know if i'm doing something wrong or not.

 

What do you suggest  ?

 

Thank you again.

[NemoPS]

So it seems!

Weird, it's simply not appearing in the front office! 

[srm200]

It is better to uninstall and instal it again ? (i have done this before)

[srm200]

I have download it and install it all over again butt nothing changed.

[NemoPS]

Clueless.

 

Try checking that it's actually there in modules, positions.

 

Prestashop version?

[srm200]

Yep its there prt sc1     prt sc2 .

 

PS version 1.5.1.0

 

Thank you again for your time.

[NemoPS]

I'm bugged, can you open the php file and replace wht WHOLE hookHeader function with

 

public function hookHeader($params)

{

 

return $this->header15($params);

 

}

[srm200]

I have did it but unfortunately nothing changed.

[NemoPS]

It might be he prestashop version at this point. 

 

$this->context->controller->php_self

 

might not be available on that version

[srm200]

I understand.

 

Is there something that can be done to resolve this issue ?

[NemoPS]

I can't recall the alternative now, maybe it was a global $page_name ...?

[srm200]

Where can i change that ? Is there a chance for this bug to be fixed somehow ?

 

Thank you.

[NemoPS]

I'll try to have a look when I have some time

[artofadornment]

Hi!

I am having the same problem as srm200, module does not work. It appears in module positions, and seems to be trying to work because when I view page source in the FO the entire module is missing except for the comments, with a big blank space between them.

 

<!-- Nemops.com OpenGraph Module -->

 

<!-- /end Nemops.com OpenGraph Module -->

 

 

I have tried uninstalling/reinstalling and the fix you suggested for hookHeader, but nothing has worked. So afterward I found a way to  add some of the og: tags of my own, ignore those if you check any of my pages. 

 

PS version: 1.5.3.1

site: http://www.artofadornment.ca

 

 

-Elaine

[NemoPS]

For some reason the page name is not being assigned.

If you look at the header15 method, you will see it's assigning an $og_type variable depending on the page. Can you try writing var_dump($this->context->controller->php_self); at line 340? it should dump the page name

[artofadornment]

I gave that a try but it did nothing. :/

[NemoPS]

Nothing at all? It should dump the variable, you must be able to see it, if not in the page, in the html code

 

Add it before this:

 

if(isset($this->context->controller->php_self) )

[artofadornment]

var_dump($this->context->controller->php_self);

 

Yeah, adding that did nothing. Initially I had it on the wrong line... line 340 for me is right above switch ($this->context->controller->php_self) { 

 

However I went back and added it above if(isset($this->context->controller->php_self) ) and still it did nothing. If my hunch is correct, that was supposed to display the raw code on either the FO page and/or the page's source, but it did neither. I only get the opening and closing comments. Something weird is definitely going on there, but unfortunately I have no idea what.

Edited February 28, 2014 by artofadornment (see edit history)

[NemoPS]

I'm clueless, as the tpl displays the hooking function runs, so that should be showing up as well :/

[DanKimble]

It appears that og:availability isn't created as part of the module. Is that something you can add?

[NemoPS]

I'll add it to the TODOs Thanks for spotting!

[rruhan]

Hi, i am in problem with this module. it is not working in prestashop version 1.6. what should i do for version 1.6 ? will you upgrade this module any future for prestashop 1.6 ?

[NemoPS]

What kind of issue are you having?

[cherojo]

Hello!!

 

Thank you for share the module!!

 

I just have a problem...

 

it doesn't add the stock of the product to the Open Graph info.

 

I already ser to display the stock (my theme don't have that feature).

 

Do you know if i can do something about it?

 

Thanks!

 

Prestashop 1.5.6.o

www.leadrunway.com

[NemoPS]

Uh, I can't see any reference to product quantities here

 

 

https://developers.facebook.com/docs/payments/product/

[cherojo]

Sorry, i forget to explain.

 

Its in the case of Pinterest Rich Pins.

 

Also some startups, as Keep.com or similar use this features.

 

As feedback, for all european stores, the module send the info in Euros (or the default currency even if you have other currency options), and some webpages only accept the info in dollars, it will be awesome of this module send the info in all available currencies of the store.

 

Hope you can help us to become available in all platforms.

 

Thanks and keep going!

[NemoPS]

Oh, I see, well I should add pinterest's own data in that case. As for the currency, yes it grabs the current one, not sure the ograph's product object can hold all currencies supported by the store

[RussianButch]

Good morning, Nemo!

I didn't use your module, but I have Open Graph in my theme (Warehouse) and I didn't get a reply from author.
So I hope for you kind reply.

 

Please find results of checking meta tags of my web site (index page):

Description:  INDEX PAGE META DESCRIPTION 
Set=:  =utf-8
Viewport:  initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width
Generator:  PrestaShop 
Robots:  index, follow 
Erty=og:title content=INDEX PAGE NAME - NAME OF MY :  INDEX PAGE NAME - NAME OF MY STORE
Erty=og:url content=http:*addr*:  *address.ru*  (*addr* - only part of address... Why?)
Erty=og:site_name content=NAME OF MY :  NAME OF MY STORE
Erty=og:type content=we:  website
Erty=og:description content=INDEX PAGE META DESCRI:  INDEX PAGE META DESCRIPTION

Erty=og:image content=http:*address.ru*imglogo:  http:*address.ru*imglogo.jpg  (there is no slash /. Why?)

 

As you can see there are some repeating of tags.

Please find results of checking meta tags of category page:

 

Description:  CATEGORY META DESCRIPTION 
Set=:  =utf-8
Viewport:  initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width
Generator:  PrestaShop 
Robots:  index, follow 
Erty=og:title content=CATEGORY META TITLE - NAME OF MY :  CATEGORY META TITLE - NAME OF MY STORE
Erty=og:url content=http:*address.ru*7-potolochnye-sveti:  http:*address.ru*7-potolochnye-svetilniki
Erty=og:site_name content=NAME OF MY :  NAME OF MY STORE
Erty=og:type content=we:  website
Erty=og:description content=CATEGORY META DESCRI:  CATEGORY META DESCRIPTION
Erty=og:image content=http:*address.ru*imglogo:  http:*address.ru*imglogo.jpg 

 

CATEGORY META TITLE, NAME OF MY STORE, CATEGORY META DESCRIPTION, INDEX PAGE META DESCRIPTION and INDEX PAGE NAME are written by myself in settings instead of real description (for your easy reading).

 

Why are there repeating of tags? There is no simply TITLE tag of pages. There is no slashes in links. Why? Is it normal?

 

I sincerely hope you will reply...

 

Thank you very much in advance.

[NemoPS]

Uh, can you share your site's url? I think I am missing the point here

[RussianButch]

Uh, can you share your site's url? I think I am missing the point here

Yes, of course: rumum.ru

I was checking yesterday with Facebook, it's seems to me works fine, but I'm not sure.

Thank you in advance.

[Creastyle]

Thank you for this module , work great

[iGiorgis]

for me dont works...the button share for facebook are without pic

[NemoPS]

for me dont works...the button share for facebook are without pic

 

Can you share your site's url? Prestashop version?

[tinyhands]

Hi Nemo1,

 

I just tried your module (by the way, thank you for offering this to us for free!) without any success. The opengraph tags are not on the page, it seems. I'm using v 1.5.2. Here's an example page on my site: http://tinyhandsonline.com/scented-cinnamon-roll-necklace.html

[NemoPS]

Try checking the module's presence in modules-> positions in the header hook

[tinyhands]

Try checking the module's presence in modules-> positions in the header hook

Yeah, I've confirmed that it's in there... Here's a screenshot:

[NemoPS]

That's really weird, are you using multistore?

[tinyhands]

That's really weird, are you using multistore?

Nope! Yeah, I'm not sure why your code isn't appearing... I tried hardcoding the og tags in my product page manually but I guess I'm not smart enough to do it successfully lol! 

[NemoPS]

That's really strange. Do you have any php knowledge? you can try echoing out something from the hook method and see where it breaks

[Fuwa Dog Boutique]

Hi,

 

I'm using Prestashop v1.6, this works great for Pinterest rich pins for single product, but doesn't work for product packs, not sure if anybody has sent this feedback yet.

 

But being able to list my products is good enough for me!

 

Thank you for offering the module for free.

[NemoPS]

Right, packs! That's a nice catch, I'll see what I can do!

[Tanelorn]

Hello. Thanks for this great free module!

 
I've found a small bug in the way the site name is removed from og:title, and I'm hoping you'll be able to update the module with the fix.

 
Currently the module's template psograph.tpl removes the site name using:

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

The problem is that the title is HTML-escaped before removing the site name, so for my site the escaped meta title has an apostrophe in the form ' yet $og_site_name has the apostrophe in its original form ('). The fix for this issue is to perform the replacement prior to escaping:

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

[NemoPS]

Hey! Thanks for spotting! Updated

[bigyiin]

Hi Nemo1,

 

I just tried your module (by the way, thank you for offering this to us for free!) without any success. The opengraph tags are not on the page, it seems. I'm using v 1.5.2. Here's an example page on my site: http://tinyhandsonline.com/scented-cinnamon-roll-necklace.html

 

Hello Nemo, It seems i am experiencing a similar issue. I have installed the module. and used chrome to view the header I can see all the og tags have been added. i can even see that OGimage has been assigned the appropriate image for the product page. 

However for some reason when i share the link the page logo is shown. any ideas?

 

facebook opengraph debugger is returning this error. Provided og:image could not be downloaded or is not big enough. Please use an image that's at least 200x200px and is accessible from Facebook. Image 'http://www.chi-k-clothing.co.uk/img/chi-k-clothing-1405118947.jpg' will be used instead.

 

which is a bit of a joke because the image facebook decided to use is the logo 350x99px and the image shown as og:image in the header is larger than 200x200px.

 

I have added below an image of the page header and the full info from facebooks opengraph debugger

 

 

 

Open Graph Object Debugger

Input URL, Access Token, or Open Graph Action ID

Debug

Scrape Information

Response Code 503 Fetched URL http://www.chi-k-clothing.co.uk/shop/259-pink-strappy-dress.html?search_query=pink+strap&results=23 Canonical URL http://www.chi-k-clothing.co.uk/shop/259-pink-strappy-dress.html?search_query=pink+strap&results=23

Warning

Critical Errors That Must Be Fixed

Bad Response Code URL returned a bad HTTP response code.

Warning

Errors That Must Be Fixed

Missing Required Property The 'og:type' property is required, but not present.

Open Graph Warnings That Should Be Fixed

Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags. Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags. Inferred Property The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags. Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags. og:image could not be downloaded or is too small Provided og:image could not be downloaded or is not big enough. Please use an image that's at least 200x200px and is accessible from Facebook. Image 'http://www.chi-k-clothing.co.uk/img/chi-k-clothing-1405118947.jpg' will be used instead.

Edited July 19, 2014 by bigyiin (see edit history)

[NemoPS]

hm, maybe the target image is not accessible for some reason? Talking about file permissions I mean

[bigyiin]

hm, maybe the target image is not accessible for some reason? Talking about file permissions I mean

 

I fixed this issue. Preferences => Geolocation => geolocation by ip. I set it to off. It seems to block facebook scraper that reads the og tags. it also causes issues with gtmetrix. both return 503 errors when its switched on. fyi, i had all the appropriate facebook ip addresses white listed. 

Edited July 21, 2014 by bigyiin (see edit history)

[NemoPS]

Ah! Thanks for sharing the solution!

[hannes01]

Hi,

 

thanks for the module!

 

However, I have similar problem like some other users: instead of a product image, there's a shop's logo and Facebook debugger shows me message: Provided og:image could not be downloaded or is not big enough. Please use an image that's at least 200x200px and is accessible from Facebook.

 

Here it seems that the right properties are defined:

 

Geolocation is turned off.

 

All ideas are very much apperciated.

 

Thanks,

Hannes

[NemoPS]

Any chance you are running something like mod_security?

[hannes01]

Any chance you are running something like mod_security?

 

Thanks for answer. Nope, these modules are not enabled.

 

Any more ideas?

[NemoPS]

Are you able to access the image directly from the browser?

[hannes01]

Are you able to access the image directly from the browser?

 

Yes, no problem.

[NemoPS]

clueless... any problems hotlinking the image somewhere? hotlink protection from your hoster? mod_security? 

[Patrick_64]

Hello,

 

thanks for your great module.

 

it works correctly in 1.5.6.2 with original theme.

 

I have alle the datas :

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

<meta content="Photophore métal blanc à l'oiseau" property="og:title">

<meta content="http://www.monsite.com/4449/2484.jpg" property="og:image">

<meta content="Mon SIte" property="og:site_name">

<meta content="Photophore réalisé en métal peint en blanc rehaussé d'un oiseau" property="og:description">

<meta content="http://www.monsite.com/objets-deco/2484-photophore-metal-blanc-a-l-oiseau.html" property="og:url">

<meta content="9.95" property="product:price:amount">

<meta content="EUR" property="product:price:currency">

 

[Sickboards]

Thanks for this great module,

sometimes when a module is not (yet) working it is due to caching systems, make sure you clear it all if it not working

[fredekac]

Hello everyone, 

 

Quick question! 

 

Can I use this module with Version 1.6.0.9 (latest)?

[NemoPS]

Yup, sure you can

[fredekac]

Yup, sure you can

 

OK, thank you ;-)

[duredo]

nice module, but I do small fix on psograph.php

				case 'product':
					$og_type = 'og:product';
					$this->assignProductOG();
					break;

to

				case 'product':
					$og_type = 'product';
					$this->assignProductOG();
					break;

*if you use PS 1.6 don't forget to unhook social sharing module from displayHeader, it will cause duplicate meta

[UGO decoración]

Hi Nemo1 i install you module to have Rich Pins but i have one problem.

I received this when i try rich Pins Validator:

It looks like your URL is missing some required info. Please check the documentation and add anything that's missing.

 

Thanks in advance.

[NemoPS]

Link to your site?

[UGO decoración]

I solved yesterday with a module.

Thanks anyway

[lordbdp]

Hi,

 

Tks for your module, it works nice

 

I want do a modification and I need help to do it...

 

When we share a product link, there are 2 possibilities for the picture shared :

1) A square of 114*114px at the left of the description

2) A rectangle of 484*252px upper the description

 

I do not know how Facebook chose the display format and I'd just like to be able to display the image at size rectangle only when it exists.

Clearly I need to create a format og_image_484x252 image would recover only original in this format images when it's possible.
Then it would have in the meta it is asked to show the og: image in the following descending order:
* Og_product_image_rectangle (for 484x252 image)
* Og_product_image (for 114x114 image)
* Og_image_logo_url (if no image found!)

 

Can you do me the modifications to do plz ?

[Şahin YILDIZ]

How do I?

 

[NemoPS]

Just find this in the code

 

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

 

 

And add a third parameter for the image type, like in that case 'large'

 

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

 

Same for the post above, but I think adding 3 images will create conflict actually. You just have to use this 3 times with 3 different image names and variables

[lordbdp]

Just find this in the code

 

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

 

 

And add a third parameter for the image type, like in that case 'large'

 

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

 

Same for the post above, but I think adding 3 images will create conflict actually. You just have to use this 3 times with 3 different image names and variables

Tks,

 

Can you develop what you want to do because I don't anderstand by "You just have to use this 3 times with 3 different image names and variables" ?

[Crowell]

Very nice module, and thank you for it!
I have a small problem which I don't know how to solve, my website description doesn't appear when I link on fb. At the same time I can see the right description on https://developers.facebook.com/tools/debug/og/object/

 

Is it fb and I should just wait?

[NemoPS]

@2lordbdp

like this

 

 

if($id_cover)

{

 

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

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

}

else { $cover_img1 = '';  $cover_img2 = '';}

 

@crowell: do you have other graph tags on the template?

[Crowell]

@Nemo1

I think I do, I remember marking once my homepage in some google tool..

[lordbdp]

 

@2lordbdp

like this

 

 

if($id_cover)

{

 

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

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

}

else { $cover_img1 = '';  $cover_img2 = '';}

 

Not good after images generated before

 

I have replaced those lines by yours :

if($id_cover)

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

			else $cover_img = '';

Edited October 29, 2014 by lordbdp (see edit history)

[NemoPS]

But did you also assign the second image, and used it in the template?

[Crowell]

I used https://www.google.com/webmasters/markup-helper/ and I installed PS Rich Snippets and Breadcrumbs , if rich snippets have any influence. Any idea why I can't see the description on fb?