Open Graph Box

The Open Graph Box adds Facebook Open Graph and Twitter Card functionality to your website.

This gives your content an enhanced presence whenever you or anyone else shares a URL from your site on Facebook or Twitter, and this means more shares, more likes, and more engagement!

Installation and Setup

After installing and activating the Open Graph Box, you’ll need to visit the Open Graph settings page, which you can access from the Boxes dropdown menu in the Thesis Admin or from the Settings link on the Manage Boxes page.

Open Graph Box settings

Setup Step 1: Specify a Fallback Sharing Image

The main element in both the Facebook Open Graph and Twitter Card sharing functionality is a big, inviting image.

Because of this, the first thing you’ll want to set up is the primary fallback sharing image for your site. This image will be used when people share your home page, archive pages (categories, tags, etc), or any other posts/pages where a Featured Image or other sharing image has not been specified.

Pro tip: Based on the way shared content appears in social media feeds, we recommend an image aspect ratio of 1.91:1.

Here’s the procedure for setting up your fallback sharing image:

  1. Create your sharing image, and be sure to optimize and compress it
  2. Upload the image to your WordPress Media Gallery
  3. While inside the Media Gallery, copy the image URL
  4. Paste the image URL into the Fallback Image URL field on the Open Graph settings page

Open Graph Box Options

Enter a Fallback Image URL and a Twitter Username to get started.

Setup Step 2: Specify a Twitter Username

To enable Twitter Card functionality, you’ll need to specify a Twitter Username in the appropriate field on the Open Graph settings page (see the image above).

If you don’t have a Twitter account or don’t wish to enable Twitter Card functionality, simply leave this field blank.

(Optional) Setup Step 3: Specify a Facebook App ID

If you’re running a Facebook App you’d like to associate with your content shares, you should include the Facebook App ID on the Open Graph settings page.

Otherwise, just leave this field blank.

Specifying a Sharing Image on Posts and Pages

The Open Graph Box gives you all the control you need to get the perfect sharing image for your content.

Although the sharing image functionality is mostly automatic, you can override this behavior whenever you want more precise results. Here’s how the automatic image hierarchy works for posts and pages:

  1. WP Featured Image — If you’ve specified a WP Featured Image on a post or page, it’ll be used as the sharing image.
  2. First image in content — If you’ve not specified a WP Featured Image and if your content contains images, the first image will be used as the sharing image.
  3. In the absence of 1 or 2, your Fallback Image will be used as the sharing image.

Open Graph Box post optionsNot happy with the automatic results? You can override them on any post or page by specifying an Image URL Override in the WordPress post editor.

This option is particularly useful if your WP Featured Images do not have aspect ratios that work well in Open Graph or Twitter Card output.

By specifying an Image URL Override, you can have a perfectly-formatted sharing image without affecting your WP Featured Image or content.

If you want, you can also tell the Open Graph Box to simply ignore the WP Featured Image and/or first image in the content by selecting the use site fallback image for this post option.

How to Test Your Content for Open Graph Functionality

To ensure everything looks and works great, you should test your Open Graph content with both Twitter and Facebook before sharing.

Simply enter the URL of your page in the tools below, and you’ll see a preview of what your content will look like when someone shares it:

Pro tip: Both Facebook and Twitter attempt to cache Open Graph data, and because of this, you might not always see the image you expect. Use the tools above to force both platforms to refresh the cache with your latest and greatest sharing image!

Changelog

  • 1.1 — October 29, 2019
    • Removed calls to getimagesize() due to the fact this is the worst PHP function in existence
    • Improved URL reconstructions for automatically-pulled images that have relative file paths
  • 1.0 — October 24, 2019