Business Catalyst and Facebook problem

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

Hey Chad, just a help note for you - The old forums etc had to have a space on BC tags they they would not render. New forums do not need to have that. You will have people copy pasting and wondering why things not working because of those spaces

Good looking out Liam. Thanks for the heads up.

No worries davis2121!! Glad to have helped.

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_largeimagepath}" />

<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-gift-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.

Because you uploaded with an image with captials and spaces.

Should never do this on the web as you run into many issues with files and images like this on browsers and things like this.

Files for web should ALWAYS be all lower case and no spaces and where there is a space use - or _

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 :-)

Files, thats why you follow the well known convention

Hello everyone,

We did an article with video on adding Open Graph tags to Business Catalyst sites.

Hope this helps, let me know if you have any further questions!

Anna Zelenskaya

EZ-BC Team

Anna,

That worked really well -- to add

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

to my template made the FB OG work again. You might want to check on the images in your blog post because they weren't visible when I went to read it. Also, the link provided in your above post doesn't work, but I did a search for the blog title.

Thanks!

What is the link to the video? We're having the same issue... Thanks