How to Integrate Twitter Cards with Business Catalyst Tags

Posted by

I recently worked with Mike Damian at symbiotiq.com to customize the Twitter Cards for the Cruz Skate Shop website which uses Adobe’s Business Catalyst (BC). While adding Twitter Cards to your website is pretty straightforward, Business Catalyst—like WordPress—requires we use dynamic tags to populate the content of the meta tags.

Twitter Cards for products

I won’t go into the benefit of Twitter Product Cards and why you should use them on your site, since you can get that info from the Twitter Development site. What I will cover is how we used Business Catalyst’s tags to create dynamic values in the content attribute of Twitter Product Cards.

After running through the Twitter Card Validator Tool (you will need to sign into Twitter to use it) we were given some sample code like this:
[sourcecode language=”plain”]<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@cruzskateshop">
<meta name="twitter:creator" content="@cruzskateshop">
<meta name="twitter:title" content="Antik Spyder Skates">
<meta name="twitter:description" content="Antik Spyder quad skates with leather uppers, Reckless wheels and Moto bearings, Gumball toe stops, on Powerdyne Triton plates">
<meta name="twitter:image:src" content="http://cruzskateshop.com/images/products/complete-skates/Antik-Spyder-Large.jpg">
<meta name="twitter:data1" content="$269">
<meta name="twitter:label1" content="PRICE">
<meta name="twitter:data2" content="Berkeley, CA and online">
<meta name="twitter:label2" content="WHERE TO BUY">
<meta name="twitter:domain" content="http://cruzskateshop.com/">
[/sourcecode]
We pulled 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} which is what we are using for our page description.
  • http://cruzskateshop.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)
  • {tag_retailprice} for the price; no need to precede it with a $.
UPDATE: I found a problem with how BC handles prices when on sale. When ‘on sale’ in enabled, the {tag_onsale} tag injects a <span style="text-decoration:line-through"> around the retail price. Problem is that these two double quotes getting injected inside the content="" causes the content attribute to close prematurely after the style= attribute. BC doesn’t allow you to modify the HTML that the tag creates, so I had to remove using the {tag_retailprice} tag for data1 and use my {tag_custom1} (short description.) I am leaving the code below showing the {tag_retailprice} because I would love to hear back on whether you are having that problem too.

The final production code was added to the module template in BC, passed Twitter’s validator and looks like this:
[sourcecode language=”plain”]<meta name="twitter:card" content="product">
<meta name="twitter:url" content="http://cruzskateshop.com{tag_itemurl_nolink}">
<meta name="twitter:domain" content="http://cruzskateshop.com{tag_itemurl_nolink}">
<meta name="twitter:site" content="@cruzskateshop">
<meta name="twitter:creator" content="@cruzskateshop">
<meta name="twitter:title" content="{tag_name}">
<meta name="twitter:description" content="{tag_custom2}">
<meta name="twitter:image:src" content="http://cruzskateshop.com{tag_largeimage_path}">
<meta name="twitter:data1" content="{tag_retailprice}"> <!– see above note/issue –>
<meta name="twitter:label1" content="PRICE">
<meta name="twitter:data2" content="Berkeley, CA and online">
<meta name="twitter:label2" content="WHERE TO BUY">
[/sourcecode]

NOTE: while Twitter says that the twitter:domain is optional, I highly recommend you use it and set it up. This is what generates the link at the bottom of the Card, and unless you write something in the content attribute Twitter will just write “View on the Web”.

Twitter Summary Card

The Twitter Summary Card is great for home, landing pages and article pages. Using the same principle idea above, our valid production code looks like this:
[sourcecode language=”plain”]<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@cruzskateshop">
<meta name="twitter:creator" content="@cruzskateshop">
<meta name="twitter:title" content="{tag_name}">
<meta name="twitter:description" content="{tag_custom2}">
<meta name="twitter:image:src" content="http://cruzskateshop.com{tag_largeimage_path}">
<meta name="twitter:data1" content="{tag_retailprice}">
<meta name="twitter:label1" content="PRICE">
<meta name="twitter:data2" content="Berkeley, CA and online">
<meta name="twitter:label2" content="WHERE TO BUY">
<meta name="twitter:domain" content="http://cruzskateshop.com{tag_itemurl_nolink}">
[/sourcecode]
You should be able to see the similarities in the two Cards using the BC tags. Below you can see the outcome of what the Twitter Summary Card looks like with its extended footer to any tweet linking to a Twitter Card enabled page.

I modified the Summary Card to work for blog posts as well. The validated production code:
[sourcecode language=”plain”]<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://cruzskateshop.com{tag_permalinkonly}">
<meta name="twitter:domain" content="the Cruz roller derby blog">
<meta name="twitter:site" content="@cruzskateshop">
<meta name="twitter:creator" content="@cruzskateshop">
<meta name="twitter:title" content="{tag_blogposttitle_nolink}">
<meta name="twitter:description" content="Posted {tag_blogpostdate}, {tag_blogpostauthor} wrote {tag_blogposttitle_nolink}">
<meta name="twitter:image" content="http://cruzskateshop.com/cruz-skate-shop-roller-derby.gif">
[/sourcecode]
A couple notables here:

  • I had to use the {tag_permalinkonly} because I found the {tag_permalink} caused all kinds of problems inserting an href in the content attribute.
  • Same goes for {tag_blogposttitle_nolink}.
  • twitter:description is required, so to keep from having to use a static description I did a mashup of tags to create the following: Posted {tag_blogpostdate}, {tag_blogpostauthor} wrote {tag_blogposttitle_nolink}. This way a reasonable and dynamic description is posted.

Cruz blog on Twitter

The description metatag workaround

Business Catalyst doesn’t do metadata or SEO very well. In fact, I don’t think they even know what it is. So, there isn’t an out-of-the-box way for you to manage the meta description at the page level without you setting it as a global and static element (which is not good SEO.)

Since twitter:description is required in the Twitter Cards, we can’t leave it out and validate our code. Our particular workaround was to use the {tag_custom2} on the products to manually enter the short description for that product. This worked out well in that we now have much better control over what Twitter and Open Graph decide to show.

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

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

You may visit a product page on the Cruz Skate Shop website to see the Twitter Product Cards in action. (See the source code, we are awaiting approval by Twitter for the Product Card to become activated in the timeline.)

Leave a Reply

Your email address will not be published. Required fields are marked *