Join our HiFi mailing list to receive the latest news & updates

How to set up Facebook Open Graph meta tags in a HiFi theme

0 Comment(s) | Posted | by Tyler Pearson | |

Social media -- and more specifically Facebook -- is a huge driver of traffic to websites nowadays, so it's increasingly important that sites are optimized for sharing on the social network. To determine what information will be shown when a site is shared, Facebook first checks for the existence of special meta tags that follow the Open Graph protocol.

These tags provide information to Facebook about the page's title, preview image, url, description, in addition to numerous other properties, which will in turn be used when Facebook users do various actions like sharing a website, posting a link on a friend's wall, or clicking the "like" button on a website.

Additionally, these tags tell Facebook who the administrators are for the website, in turn giving them the ability to make changes to the app on Facebook, moderate Facebook plugins like Comments, and access Insights for the site.

One tip before we go through setting up the tags -- a page you will find to be invaluable as you set up Facebook open graph tags is the URL Linter tool. This page gives you the ability to see a preview what a page will look like when shared, circumventing the need to irritate your friends by constantly sharing pages that you are testing.

Additionally, when a website is shared, Facebook caches the properties for the page for 24 hours. This means that any changes we make to the tags won't be reflected for a day unless we have a way to force Facebook to re-cache the page. Fortunately, every time we add a url into the linter the page properties are re-scraped and updated.

Lastly, the linter will tell you any errors that have been made when setting up the tags and offer suggestions on how to fix them.

Now that you have a brief background on what the open graphs tags are used for, let's do a quick run-though of what each tag is and how they can be set up in Hifi.

og:title

og:title example

In the photo above, we can see that the part outlined is where the og:title tag will be shown. Unless the home page is being shared, we will want the title to match what we are already using in the meta title tag, On the home page we will only want to include the site title, since we do need the title of "Home" or "Home Page" to be included.

{% if this.type == "home" %}
     <meta property="og:title" content="{{ hifi.settings.title }}">
{% elseif this.meta.title %}
     <meta property="og:title" content="{{ this.meta.title }}">
{% else %}
     <meta property="og:title" content="{{ this.title }}">
{% endif %}

og:type

Next up is og:type, which won't show up in the preview, but tells Facebook what type of website we are sharing. For example, a website for a political candidate may be designated as "politician" and a non-profit could be designated as "non_profit". The full list of options can be found here.

In Hifi, the code will first check to see if the Hifi page type is a post and if it is, will set the og:type as "article". If it isn't, we will want to use the type of website that we found by looking at the list linked above. In this example, I have the og:type set to "website".

{% if this.type == "post" %}
    <meta property="og:type" content="article">
{% else %}
    <meta property="og:type" content="website">
{% endif %}

og:url

og:url example

Now we have og:url, which tells Facebook what the url is of the page we are sharing. Even if you redirect one to the other, Facebook differentiates between www and non-www, so make sure that this is accurate so that the wrong url isn't shared and Insights are accurate. Additionally, the url will show in the preview box.

<meta property="og:url" content="http://{{ hifi.url.host }}{{ hifi.url.path }}">

og:image

og:image example

The og:image tag is used to tell Facebook what image to use in the preview. Facebook requires this to be larger than 50px by 50px and encourages it to be larger than 200px by 200px and have a square shape. Since this is what will be important in catching people's eyes as they browse a feed, be sure to spend some extra time customizing this.

In the Hifi theme, we will first check to see if we are on the homepage. If so, I have it set to check for an image called "logo.png", but this can (and should) be customized to a specific preview image that would catch someone's eye. For example, this is an image we used on a microsite that was launched a few months ago.

If we aren't on the home, the code will check to see if an image was uploaded to the media section of the page. If so, it will crop and resize the first image to a 300px by 300px square. If there isn't any media, Facebook will give the option to select a preview image from the images on the page.

Lastly, remember that the image must use an absolute path in order to work correctly.

{% if this.type == "home" %}
     <meta property="og:image" content="{{ hifi.url.images }}logo.png">
{% else %}
    {% if this.media %}
        {% set photo as this.media[0] %}
        <meta property="og:image" content="{{ photo.url|imagesize({ width:300, height:300, crop:true }) }}">
{% endif %}

og:site_name

The og:site_name tag is used to tell Facebook what the name of the site is that the url is shared from.

<meta property="og:site_name" content="{{ hifi.settings.title }}">

og:description

og:description example

For the code, we will first check to see if a meta description has been set for the page. If there isn't, we will move on a check to see if there is an excerpt set. Lastly, since something is better than nothing, the code will truncate the content to 160 characters and add an ellipsis at the end. The amount of characters displayed varies depending on where the page preview is on Facebook, so it's best to keep it shorter and have more important information near the beginning. Facebook suggests keeping the description to one or two sentences.

{% if this.meta.description %}
     <meta property="og:description" content="{{ this.meta.description }}">
{% elseif this.excerpt %}
    <meta property="og:description" content="{{ this.excerpt|striptags }}">
{% else %}
    <meta property="og:description" content="{{ this.content|striptags|truncate(160,'...') }}">
{% endif %}

fb:admin and fb:app_id

Finally, we have fb:admin and fb:app_id. While these tags technically aren't part of the Open Graph Protocol, they are important and necessary to tell Facebook who the admins are for the site. Admin privileges allow access to the Insights for the site in addition to other on-site actions, like moderating a Facebook Comment Box plugin.

Assigning admin privileges can be done two ways:

  1. Assigned directly by adding the user's Facebook id number in the fb:admin tag (multiple ids should be comma-separated)
  2. Creating a new Facebook app and adding the user as an admin to the app.

Which approach you will want to take is up to you, but on a smaller site you will find that setting up a separate app for the site is overkill and simply adding fb:admin is adequate. Alternatively, one thing to keep in mind is that the user ids will be visible in the page source, so instead assign admin access through an app if privacy of admins is important.

<meta property="fb:admins" content="">
<meta property="fb:app_id" content="">

Optional tags

In addition to the tags above, there are a wide range of additional optional open graph tags that can be used if they fit the content of your site. To learn more about these, visit Facebook's page on Open Graph.

Full Code

<!-- facebook og tags -->
{% if this.type == "home" %}
<meta property="og:title" content="{{ hifi.settings.title }}">
{% elseif this.meta.title %}
<meta property="og:title" content="{{ this.meta.title }}">
{% else %}
<meta property="og:title" content="{{ this.title }}">
{% endif %}
{% if this.type == "post" %}
<meta property="og:type" content="article">
{% else %}
<meta property="og:type" content="website">
{% endif %}
<meta property="og:url" content="http://{{ hifi.url.host }}{{ hifi.url.path }}">
{% if this.type == "home" %}
<meta property="og:image" content="{{ hifi.url.images }}logo.png">
{% else %}
{% if this.media %}
{% set photo as this.media[0] %}
<meta property="og:image" content="{{ photo.url|imagesize({ width:300, height:300, crop:true }) }}">
{% endif %}
<meta property="og:site_name" content="{{ hifi.settings.title }}">
{% if this.meta.description %}
<meta property="og:description" content="{{ this.meta.description }}">
{% elseif this.excerpt %}
<meta property="og:description" content="{{ this.excerpt|striptags }}">
{% else %}
<meta property="og:description" content="{{ this.content|striptags|truncate(160,'...') }}">
{% endif %}
{#
<!-- uncomment these after the ids are added -- doing before can cause a scraping error --> 
<meta property="fb:admins" content="">
<meta property="fb:app_id" content="">
#}

Olark Review: 25% of our Customers Live Chatted with Us Before Buying

5 Comment(s) | Posted | by Joel Sutherland | |

olark

We soft-launched HiFi about two weeks ago.  This meant closing down the beta program and launching our pricing and sign-up pages. We've been writing posts on this site for some time so we get a fair amount of traffic to the blog from people who might be interested in our product.

Like most new products there is a lot of marketing left for us to do. We haven't come close to explaining all of the features and advantages that HiFi has on this site.  Since the our team knows the product well, it only made sense to try letting our customers contact us and ask us about it. We turned to Olark to help make this possible.

The results are already pretty impressive.

Just over 25% of our signups have been from people that have chatted with us first. About 50% of the people that chat with us have gone on to sign up!

Generally the conversations have gone really well: our customers are web designers and developers and our staff is made up of web designers and developers so both parties have a lot in common.  For the most part, customers have been happy that we have been able to answer their questions with as much depth as we have.

How to set it up

Olark works through a simple Javascript file you include at the bottom of your page.  On HiFi this is super easy to do.  We like to set up a JS block that allows us to add scripts only on the pages they are needed.  We just wanted Olark to run on the pricing and signup page.  To get it to work there, I edited the JS block on both pages as follows:

{% block js %}
    {% parent %}
    <!-- begin olark code --> <script type="text/javascript">...</script> <!-- end olark code -->
{% endblock %}

Once you've done that, Olark will recognize that it has been installed.  From there, you can sign in to just about any IM client and link it to your account.  I use Google Talk so I linked that up.  When you do this, Olark will automatically request to chat with you from a number of different names like "webuser1@olark.com".  Once you approve this, you're good to go.

Now, whenever somebody is browsing a page on your site with Olark installed, you'll see an active buddy on your chat list.  Either you or your customer can initiate the conversation, it's that simple!

One great feature for those on gchat is that Olark is smart about when to show up. If you aren't logged in or have your status set to 'Busy' it won't give visitors the option to chat with you.

Also, you can connect it with multiple gchat accounts.  Once one of them responds, it blocks the others.  This allows for several of us to be available at the same time without having to worry about whether someone else is already chatting with a customer.

How it looks

olark on hifi

You can control where on the page Olark shows up.  The bottom right is default and probably most common so we put it there.  It starts closed, but will open when you click on the title. You can control 100% of the copy that people see.

Conclusion

Our experience might not be 100% typical.  We're able to make our founders and developers available to our customers. I don't know that it would be working as well otherwise.  Additionally, our product has high switching costs.  Before someone commits to using HiFi as a CMS they will need to be willing to build a site on it!  This means that our customers likely want to do a lot more research before making a purchasing decision.

That said, we would highly recommend giving Olark a shot.  It's so easy to install and its defaults are really sensible.  You'll be able to get a feel for how well it works quickly and uninstall it if you don't think it's worth it.  There is a 14-day free trial so you can figure out if it works for you at no charge.