I have seen threads on this subject as well as the articles, but I am not certain the problem was answered. I have added a Facebook "like" button to my Large Product Display (and the button works). The large product display has several upsell/cross-sell items on it.
When I am testing it, I go to my FB page and look to see that it has indeed been posted. However, 2 problems show up.
1. The photo shown is not the main item, but one of the upsell/cross-sell items.
2. The descriptive text is using my footer text as the description.
Where did I go wrong?
I want to use the main photo and the product description (both of which are in the product's information). Is there a modifcation I can make to the module? Is something else needed?
Chuck
For this you would use the Open Graph Tags, in this case the < og:image > and < og:description >. These are going to be Meta tags you will place in your Large Product Layout, using the image and description tags as the Meta content. Then when the page is loaded BC will place these into the head tag of the website.
Something like this:
<meta property="og:image" content="http://yoursitehere.com/{tag_imagepath}"/> //relative path might work, i tested a absolute path
<meta property="og:description" content="{tag_description}"/>
Another option is to use custom fields to populate these values.
This page describes the Open Graph tags you can play with:
https://developers.facebook.com/docs/opengraphprotocol/
You can also use facebook's debugger to find out what info facebook is pulling from the pages you’re looking at, so you don't have to like and unlike things.
https://developers.facebook.com/tools/debug
Hope this helps you.
Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7
I think I spoke too soon. As I was testing this code, the first several items I "liked" and posted came out fine. However, as I tested more items, the photos defaulted back to the upsell image, and in some cases, did not appear at all. This is the code at the top of the page....
<meta property="og:image" content="http://sweetsandtreatsboutique.2121customcontact.com/{tag_imagepath}" />
<meta property="og:description" content="{tag_description}" />
Sounds like something happened between BC and FB to screw it up, because the code did not change.
Yeah, looking at your source, your image value still has your tag within it. You may check to see if the tag is correctly spelled, and if your using the large product image I don't think you can use the _value to just get the value. May be better to use the custom fields to get the path of the image.
<meta property="og:image" content="http://sweetsandtreatsboutique.2121customcontact.com/{tag_largeimagepa th}" />
<meta property="og:description" content="Our premium greaseproof cupcake liners will not fade and the colors and patterns will stay bright after baking - even with chocolate cake. No more doubling up on liners before baking!" />
Hi - I realise this is an old one but I'd like a little help if it's available. I've tried to implement these tags into a Business Catalyst Large Product Layout template and they're not working.
The products you can see at http://gourmetbasket.com.au/gift-baskets-by-price/vino-and-various-gif t-basket
The code I've used is:
<meta property="og:image" content="http://www.gourmetbaskets.com.au/{tag_largeimagepath}" />
<meta property="og:description" content="{tag_description}" />
Can you tell me what I'm doing wrong? Thanks so much ![]()
The image tag is wrong if your doing it for products, your missing the _ for the path.
Also description will render the entire html for the description area not just content, HTML in a meta tag in the head? - Mess. You need to use custom field 1,2,3 or 4 as the means for your og description.
{tag_largeimage_path}
Hi, thanks for that. It's gotten me part way - the description is now working, but the image URL is not because there are spaces in it. When I looked at the scraped URL for a page, it's showing this:
<meta property="og:image" content="http://www.gourmetbaskets.com.au/products/Vino and Various NB 391.jpg">
That's using the following code:
<meta property="og:image" content="http://www.gourmetbaskets.com.au{tag_largeimage_path}" />
Any ideas? Thanks again.
Ah yes, there's a known bug I've found: https://developers.facebook.com/bugs/399517520083442. Well, here goes another call to a client telling them they've done it wrong. Thanks heaps for your help :-)
North America
Europe, Middle East and Africa
Asia Pacific