Summer of Love This Week: Facebook Open Graph Integration

We love you. Really, we do. And this summer, we're expressing our love by rolling out hot new LightCMS features week after week. Can you feel it? I hope so because today we've got another great feature to announce. This is one I've been looking forward to for a long time.

What is Open Graph?

If you spend time with blogging and social media like I do, you likely know the significance of Open Graph tags. These are meta tags that can be added to the header of any web page to define certain things about the page such as its title, description, associated image ... etc. In theory, this data will then be consumed by any outside services utilizing the Open Graph protocol. In practice, the only reason anyone cares about this is because the Open Graph protocol is used by a little piece of software known as Facebook.

When someone shares or likes a web page, Facebook gathers information about that page by looking for Open Graph tags. It uses the information specified by these tags to determine how the Facebook story shows up on a Facebook timeline or elsewhere across the Facebook platform. Therefore, providing information about your page through Open Graph tags improves the way your page shows up inside Facebook.

Automatic, Out-of-the-Box Integration

LightCMS has always allowed you to specify Open Graph tags. You can do this by adding the code directly into your HTML templates or into the additional header field on any page's settings. Of course, this is a manual process and it also has limits when it comes to dynamic pages such as blog posts, calendar events, and product details. We also know that most users don't have time or desire to even think about these types of things. So, we wanted to create a solution that would provide automatic, out-of-the-box support for Open Graph across every page of a site.

Always On Unless You Override It

LightCMS now automatically generates Open Graph tags in the header of every page of your website (including dynamic pages) unless you manually override our tags. To override, you simply need to add an Open Graph tag of your own. You can add your tags in your templates or in your additional header fields. Either way, our system checks first to see if a particular Open Graph tag exists and, if not, fills in the holes with our own automatically-generated tags.

How We Handle Images

By far, the most common use of Open Graph tags is to specify the image used in a Facebook post when a webpage is shared or liked. Without Open Graph tags, Facebook tries to determine on its own which image to use, and the results are not always desirable. We set out to create a system that would automatically specify an image, or a set of images, that were likely to be your desired choices, while still providing you a way to dictate the image you want used.

It's important to note that if a page specifies multiple Open Graph images, Facebook gives the user the opportunity to choose the image they want but defaults to the first image listed. So, in our solution, we often provide multiple Open Graph image tags, with the first tag representing the image we feel is most likely to be desired. Here's how it works:

  • If you have uploaded a website logo on your Website Settings page, we always output that logo as one of the Open Graph images (unless you override with your own tags as described above). On the home page, the logo will be the first (default) image. On all other pages, the logo will be the last image in the list.
  • We also include additional images that we pull from certain elements on the page itself. We include one image per element (if the element has an image) as defined below:
    • The first image in any text element
    • The first image in any photo gallery or slideshow
    • The first image in any blog post
    • The first image in any calendar event
    • The main image for any product
    • For elements containing multiple blog posts, calendar events, or products, we will pull the image as defined above from the first post, event, or product in the list.
    • Images pulled from elements in the main content region will be prioritized over images pulled from other regions.

How Do I Make Sense of all this Image Business?

The bottom line is this — we will automatically select images for you, but if you want to ensure a particular image is used by Facebook, make sure it is the first image in the top element in the main region of your page. Also, upload a website logo if you want to ensure every page has at least one image.

Please note: at this time, Facebook does appear to require that images have dimensions of at least 50x50 and maximum aspect ratios of 3:1 in order to be included in Facebook stories. If your images don't meet these requirements, they will still be included as Open Graph tags (as described above) but they may not show up when shared on Facebook.

Other Tags We Support

In addition to the Open Graph image tag, we also automatically output the following Open Graph tags: Title, URL, Type, Site Name and, in some cases, Description. Here's a run down of these additional tags.

  • Title uses the Page Title, Blog Post Title, Calendar Event Title, or Product Title as defined in your settings.
  • URL uses the URL of the page removing any query strings that may exist.
  • Type uses "website" for the home page and "article" for all other pages.
  • Site Name uses the Website Name as defined in Website Settings.
  • Description uses the meta description content specified on the advanced tab of a page's settings. If this setting does not exist or is not specified, no description tag is output.

How to Test Your Pages

If you'd like to see how the new Open Graph tags make your pages look in Facebook, follow the instructions below.

First, pull up the Facebook debugger tool, enter your URL in the box and click "Debug." Facebook will show you all of the data it is pulling from your webpage. It will also show you the images it is pulling and list them in order (remember, the first image is the default).

Next, go to Facebook and paste your URL into the box as if you were going to share it with your fans or friends (you don't actually have to share it, just act like you are going to). Give it a second and Facebook will create a story out of the link. This story should use your title, description and images. If you have multiple images, you'll see a little tool enabling you to flip through and select the image you want to use.

If you want to change something, you can edit your LightCMS site to make the appropriate changes or even override the automatic tags with your own tags in the header. Then, be sure to run your URL through the debugger tool again before you try adding it to Facebook. The debugger forces Facebook to reset the cache for that particular URL so any time you change your Open Graph tags you'll want to run the debugger to be sure Facebook caches the updates.

Enjoy!

We hope you enjoy the new Open Graph integration tools. If you have any further questions, please let us know in the comments below or you can also discuss on the LightCMS Forum as well.

6 comments (Add your own)

1. Keith Storm wrote:
This is very cool! Thanks!

Thu, July 26, 2012 @ 10:50 AM

2. Tim Nyquist wrote:
Love it! However, I am seeing issues with the og:image. The website logo that has been uploaded is never a default option (Facebook's debugger tool does show it). Even the homepage uses a single random image from a blog post. Pages with no available content images simply have no image options.

Thu, July 26, 2012 @ 4:05 PM

3. Tim Wall wrote:
Hi Tim. Can you tell us what site you are looking at so we can take a look? If you don't want to share it publicly, please send it to me by email - tim@lightcms.com - Thanks!

Thu, July 26, 2012 @ 4:10 PM

4. Crystal wrote:
This is great, specifically for the images. It was such a hassle before because other images were not available to choose from in secure folders and FB didn't always pull images from the website.

Thu, July 26, 2012 @ 11:17 PM

5. Tim Nyquist wrote:
Tim,

The website is www.communicationsfinance.com. If you go to post the homepage on Facebook, for example, you only get the Microsoft Surface image from a blog post as a thumbnail option. However, if you use Facebook's debugger, you will see that the website logo is also scraped, and even listed first, just as you mention in this blog post. (I find it interesting that the blog posts are scraped at all, as a side note.)

Then, say you use www.communicationsfinance.com/solutions. When posting on Facebook, you have the 2 image options that appear in the main content areas (the footer images are apparently never available). However, Facebook's debugger also displays the website logo, last, again as you describe in this blog post.

So, the website logo is technically available just as you say, but is somehow blocked when you are actually on Facebook.

Fri, July 27, 2012 @ 2:33 PM

6. Tim Wall wrote:
Tim, thanks for the further information. I see what you are saying. I believe this is happening because your particular website logo falls outside of the dimensions / aspect ratio that Facebook finds acceptable when creating stories. While Open Graph itself doesn't require any particular specifications for images, there is one place in Facebook's documentation that indicates images need to be at least 50x50 and have a maximum aspect ratio of 3:1. It's my belief that this is why Facebook is consuming these images when they scrape your page, but ignoring them when creating stories about your page.

I'm going to update the blog post to include this extra bit of information so people are aware. Thanks for bringing this to our attention.

Fri, July 27, 2012 @ 2:51 PM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

Tags

Archive

Try it yourself. It's free.

Takes less than 60 secondsNo commitmentNo payment information required

Sign Up for Free