Home   .    Blog   .    About   .    Contact   .    Sign In

Business Catalyst

 
You are here: Business Catalyst

OG Tags for Business Catalyst Products and Blogs



Showing your CHOSEN title, text and image when someone shares your blog posts or products on Facebook has been a little bit of a challenge for some website owners. In this article we look at how to use OG Tags in Business Catalyst.

The following notes are a summary of what we have started applying on our sites. The information available to get this has been scattered or mostly incomplete in any of the locations I have found. I hope you find this useful. While Business Catalyst could choose to change things in future, I'll try to update this as I see changes.

WARNING: This article gets technical. Don't continue unless you are sure you know what you are doing :-)

If you ONLY want Facebook to show an image and your chosen text, for your blog, then you only need to choose three of these lines. See the bottom of the article for this subset.

Firstly; 

Your whole site (meaning all your Page Templates in /Templates/) should have this in the top, before the first <head> tag:
You can edit this in Site Manager > Page Templates
OR in Develop or FTP mode:
/Templates/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">


There are mixed reports on the requirement for this item, as Facebook will work without it but lets just keep it as clean as possible. You probably don't need to edit the 'DOCTYPE' as this should already be there. You might already have a <html> tag which you should replace with the one above, or append each statement after.

Also in the templates the following tags are used:

<meta property="og:site_name" content="NAME OF SITE">  
<meta property="fb:admins" content="FB ID" />


Name of site: can be what ever you want it to be. Usually the company name.
FB ID: visit the facebook help page: https://developers.facebook.com/docs/insights/ to learn where to get your FB admin ID

OG Tags for Products in Business Catalyst:

The following code is placed on the ‘Large Product’ view which can be edited:  
Site Manager > Module Templates : Online Shop Layouts : Individual Products Large
OR in Develop or FTP mode:
/Layouts/OnlineShop/large_product.html 
 Place the following within the <head>   ... </head> tags.

<meta content="{tag_productmetatitle}" property="og:title" />
<meta content="{tag_productmetadescription}" property="og:description" />
<meta property="og:url" content="http://www.easywebsitemanager.com.au/business-catalyst/og-tags-for-business-catalyst-products-and-blogs" />
<meta property="og:image" content="http://YOURURL.com{tag_largeimage_path}" />
<meta property="og:type" content="product" />



og:image requires the sites URL, without the trailing slash(/) before the tag.


OG Tags for Blogs on Facebook:

The following code is placed on the ‘blog post detail’ view which can be edited:

Site Manager > Module Templates : Blog Layouts : Blog Post Details Layout
OR in Develop or FTP mode:
/Layouts/Blog/post.html

<html>
    <head>
        <meta name="description" content="Showing your CHOSEN title, text and image when someone shares your blog posts in Business Catalyst by using OG Tags." />
        <meta property="og:title" content="OG Tags for Business Catalyst Products and Blogs" />  
        <meta property="og:description" content="Showing your CHOSEN title, text and image when someone shares your blog posts in Business Catalyst by using OG Tags." />
        <meta property="og:url" content="http://www.easywebsitemanager.com.au/business-catalyst/og-tags-for-business-catalyst-products-and-blogs" />
        <meta property="og:type" content="Article" />
        <meta name="author" content="Brendan Byrne" />
    </head>

For og:title you may also use OG Tags for Business Catalyst Products and Blogs if the blog author does not edit the 'SEO Title'. This is good for older blogs where you don't want to edit all past posts  


For Google Plus, 

you will want something like this in your blog posts:
<a href="https://plus.google.com/u/0/[YOURID]?rel=author">G+</a>

We use this:
 <p>Posted by: Brendan Byrne <a href="https://plus.google.com/u/0/CUSTOMERS_PLUS_PROFILE_ID?rel=author">G+</a> 

AND on your Google+ profile, You will need to edit your "Contributor To" and link to your blog.
(full details are here: https://support.google.com/webmasters/answer/1408986?hl=en)
If you have multiple Authors for your site, and you were using Brendan excels at his ability to simplify the internet and create effective online marketing programs for clients. Brendan Byrne is the one of the founders of OneOrangeCow.com and EasyWebsiteManager.com.au. in your post layout, then you might be able to include this link in each author's bio, but I have not had to do this yet, so can't confirm this will work.


Images for Blog Posts when shared in Facebook;

In some cases you want to specify the image for each blog post that will appear when it is shared in facebook. Here is how you do that, without building a whole web app. 

At the VERY Bottom of each blog post, in ‘HTML' view, after the final </p> or the final </div>
place this text:
<meta property="og:image" content="http://www.FULLDOMAIN.com/IMAGE-NAME.png" />

minimum 200x200px, prefer 1500px, change the link to your image for Facebook, and it must include the full domain name.
YES this does mean you have to teach the blog editor how to view the HTML view of their site, but it works. 


Absolute minimum for Facebook blogs:

Adding only these two lines to your blog post detail layout should work:
        <meta name="description" content="Showing your CHOSEN title, text and image when someone shares your blog posts in Business Catalyst by using OG Tags." />
        <meta property="og:title" content="OG Tags for Business Catalyst Products and Blogs" /> 
Friday, April 04, 2014