How to Integrate Facebook’s Open Graph with Business Catalyst Tags

Mike Damian at symbiotiq.com helped me customize the Facebook Open Graph (OG) metatags for the Cruz Skate Shop website. It is currently on Adobe Business Catalyst (BC) platform, so we needed to use BC’s tags to keep the OG meta tags dynamic. (See my previous post covering Twitter Cards and BC.)

Dynamic BC tags in Open Graph meta tags

You can get an overview of Open Graph on the Facebook Development site. What I will cover here is how we used BC’s tags to create dynamic values in the content attribute of OG tags.

I’m using some base OG code that I picked up from an article on QuickSprout and on Yoast. It looks like this before dropping in the BC tags:
[sourcecode language=”plain”]<meta content="en_US" property="og:locale" />
<meta content="" property="og:title" />
<meta content="" property="og:url" />
<meta content="" property="og:site_name" />
<meta content="product" property="og:type" />
<meta content="" property="og:image" />
<meta content="" property="og:description" />
[/sourcecode]
The next step is to copy the BC tags directly from the module template for the product detail page and applied them to the above code.

• {tag_name} for product name/title
• {tag_custom2} for description (BC’s ‘Custom 2’ field is what we are using for our page description.)
• http://domain.com{tag_largeimage_path} for the large product image, though you may be using {tag_smallimage_path} (use your own domain obviously.)
• http://cruzskateshop.com{tag_itemurl_nolink} for the product detail page URL (use your own domain obviously)

The final production code was added to the product page template in BC, passed Facebook’s Lint Tool and looks like this:
[sourcecode language=”plain”]<meta content="en_US" property="og:locale" />
<meta content="{tag_name}" property="og:title" />
<meta content="http://cruzskateshop.com{tag_itemurl_nolink}" property="og:url" />
<meta content="Cruz Skate Shop" property="og:site_name" />
<meta content="product" property="og:type" />
<meta content="http://cruzskateshop.com{tag_largeimage_path}" property="og:image" />
<meta content="{tag_custom2}" property="og:description" />
[/sourcecode]

NOTE: I am using “product” for the og:type, but I am finding that lately Facebook has removed or buried it in their documentation. This may not be valid anymore, but I am rolling with it until I get better proof than it just not being listed anymore.

Open Graph for blog posts – no BC tags allowed

Adding OG to your Blog Post Details Layout can help control how your posts look on Facebook. If only BC had better control over their blog post templates, we could capitalize on this. As it stands, Facebook requires OG be in the head tag, so we cannot use the BC tags since they need to be in the body tag to work. But, it’s not a total loss since we using the following OG meta tags without a BC tag:
[sourcecode language=”plain”]<meta content="en_US" property="og:locale" />
<meta content="Cruz Skate Shop" property="og:site_name" />
<meta content="blog" property="og:type" />
<meta content="http://cruzskateshop.com/cruz-skate-shop-roller-derby.gif" property="og:image" />
[/sourcecode]
So, in short, the OG meta tags above are not dynamic and not capitalizing on the BC tags at all.

Business Catalyst Tags – Quick Reference guide

Use the Business Catalyst Tag Quick Reference guide to help you decide which tags are best for your needs. There are dozens to choose from, and what works for one site may not be appropriate for your site.

Help with your site

As I said in my previous post, Business Catalyst is a build-to-suit CMS: each website works differently depending on how your web developer coded it. I am not a Business Catalyst developer, so if you need help with your BC site, I highly recommend you contact a certified BC developer/partner like Mike Damian at symbiotiq.com to work out any development needs you may have.