Facebook Meet Blog: Installing Open Graph

Wouldn’t you just love it if Facebook and your blog could shake hands and be friends? You’re in luck. Facebook Open Graph does just that.

Open Graph is a set of rules that help integrate your blog into Facebook’s social graph via metadata. That metadata tells Facebook which title, description, and image to display when you share a post or page link from your blog.

Open Graph helps Facebook quickly understand what your content is about, who wrote and published it, and what Facebook page it’s associated with. Open Graph tags do all sorts of cool stuff — and fix issues that may have annoyed you for awhile (e.g., pulling the wrong image for shared links).

Wait. It will pull the right pictures on Facebook? Do tell.

You may have noticed that sometimes when you share a link on your Facebook page, Facebook pulls the wrong image — even when you’ve set a featured image for the post. Not any more! Tell Open Graph which image you want and it’s there (I’ll tell you how later in the post). But be sure you’re image is the recommended size for Facebook: 600 x 315. Be sure the main part of your picture is in the middle of the image in case Facebook crops is a little. You may have to experiment a little.

What if those sizes don’t work with your blog layout? There are two things you can do:

1.  When you put a link in a Facebook update, it auto-populates the image from your post (or some random sidebar image, as many of us know). If the wrong image is pulled or if it’s too small and doesn’t quite look right, you can click the Upload Image link just under the image that’s currently showing. Then you can upload a picture that fits the space or is more relevant to the link’s content.

2.  The other option is to load two images to your blog. I generally use a smaller size for my on-page images (I make sure the width is 300 and the height can vary), but that size isn’t ideal for Facebook. To get around this I could upload two of the same images, that are different sizes. One would be the size for my blog post (300 pixels wide), and one would be the optimized size for Facebook (600×315). Then I could insert the smaller image into my post and set my featured image as the larger image. When Open Graph looks for the image to pull, it knows to pull the larger image.

The instructions below explain how to install Open Graph on a WordPress.org blog. If you happen to be using Blogger, you can find instructions on Blogger Hints and Tips. I could re-write them here, but why do that when there is a perfectly good set of instructions over there?

Install the WP Open Graph Plugin

How do you get this amazing functionality? It takes a little setting up, but it’s not hard. The first thing you need to do is install the WP Open Graph plugin.

1. Login to your WordPress dashboard and click Plugins.
2. At the top of the Plugins page click Add New.
3. On the new page, in the Search box, type WP Open Graph and click Search Plugins. A list of plugins shows up and WP Open Graph should be at the top of the list (if not just scroll down until you see it).
4. Under WP Open Graph click Install Now and follow the instructions.

Establish Your WP Open Graph Settings

Before you get started with the settings for Open Graph, you need to find some specific Facebook information: your Admin ID and your App ID. It’s important to note that you’re not making a new Facebook app; you’re using an established Facebook app to communicate with Facebook more efficiently. So don’t worry, these IDs are easy to find and you don’t need to know any code.

To find your Admin ID open a new tab and go to graph.facebook.com/yourname (yourname = your personal user name, not your page name). You’ll see a page like the one below with some basic information. At the top of the page you’ll see “id”. The string of numbers listed there is your Admin ID. Keep this tab open so you can copy the Admin ID later when we get to the Settings page. (Your information will display where the blue boxes are; I just hid my info for security.)

To find your App ID open another new tab and go to https://developers.facebook.com/apps. On this page you’ll see a section called Settings and it will show you your App ID/API Key. Keep this tab open too, so you can copy this ID to the WP Open Graph page.

Now let’s get down to business. Go to your WordPress dashboard and mouseover the Settings option in the left sidebar. Choose WP Open Graph from the menu. On the WP Open Graph Settings Page, complete the information needed.

• Default image. Type in the URL of the image you want to use — it can be anything you like. Look in your Media Library and grab the URL of the image you want. Open Graph will use this image if you haven’t set a Featured Image for the blog post or page.
• Facebook App ID. Type in the ID you found on the Apps Setting page.
• Facebook Admin ID. Type in the ID you found on the graph.facebook.com/yourname page.

The rest of the items are pretty self-explanatory.

Be sure to click Submit to save your changes.

Customizing Individual Post Open Graph Settings

We’re in the home stretch! Every time you write or update a blog post or page you can now set the Open Graph information for that specific post or page. Just open the post or page you want to edit (or write), then, while you’re on the Edit Post page, scroll down until you see the Open Graph Data box. You’ll see it has

• a Facebook snippet preview
• a box for a customized title (this is the title Facebook will show when you share a link)
• a box for a customized description of the post (Facebook will show this under the image and title)
• the Open Graph Type

A quick note about descriptions: Without a customized description, Facebook will pull in the first few sentences of your post and they may be truncated. Since shorter descriptions are catchier, try to use just two sentences in your description.

You can see the different kinds of Open Graph types at The Open Graph Protocol website. The default type is article so you can leave this box blank if you’re just posting a straight article as you normally do (this is recommended).

If you haven’t set a featured image for your post, the Facebook snippet preview shows the default image you set on the WP Open Graph settings page).

I recommend setting a featured image for your post, customizing all your Open Graph options, then saving the post. Scroll back down to the Open Graph Data box and the snippet should show the new information and image like this:

 

You’ll notice that the snippet shows you a small image to the side and the title and description to the right. The snipped will actually appear like the image below on Facebook. If it doesn’t, check your image size and try again.

Checking Your Post with the Facebook Debugger Tool

Definitely check your post with the Facebook Debugger Tool to ensure you’ve installed everything correctly and there are no issues before you post and share. On the debugger page, type in the URL of the post or page you want to check and click Debug. You’ll get a page that lets you know if there’s a problem.

When Open Graph is installed correctly and working, if you view the source code you’ll see this:

Thanks for hanging in there with me.

Next week I’ll show you how you can use WordPress SEO from Yoast as your Facebook Open Graph tool.