Facebook Meet Blog: Installing Open Graph

Facebook Meet Blog: Installing Open GraphWouldn’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.

Upload customized images with Facebook status links

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.)

Open Graph Admin ID

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.

Open Graph App ID

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).

blank

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:

blank2

 

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.

OG-RealFBSnippet

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:

Open Graph In View Source

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.

 

Comments

  1. thank you for this information ..that was good post
    but how can i install open graph for other cms !? :(
    i use a lot of cms and want to install open graph on all of them!

    • Amin, that’s an excellent question. I have been asked how to install it on Blogger blogs as well and I’m researching that. I’ll share my finding in the coming weeks. You may want to sign up for my newsletter or RSS (links at the top of the sidebar) so you’ll know when I publish them. Thank you for stopping by and asking!

  2. I’ve been struggling with facebook images when posting lately. It used to pull the proper images, but for some reason it stopped. This could make FB updates a lot easier.

  3. The WP Open Graph is very useful if you know how to use it. Looking forward to the YOAST article

  4. Thanks for answering a question that I didn’t know to ask, Melanie! I thought I just had to live with the random blog picture selection and the fact that I couldn’t put out some universal message to those kind enough to share my post on FB that sometimes they can change the thumbprint pic so that my FACE (from the sidebar) didn’t accompany my post instead of that perfect picture I spent so much time coming up with!

    • Shel, it is so frustrating when the wrong image pulls on Facebook! But beyond fixing that issue, Open Graph is also important because it helps Facebook immediately *know* what your link is about (rather than guessing). That helps with FB search and FB assigning relevancy to a user’s news feed. Thanks for commenting!

  5. It’s about time this was invented. I have found it frustrating in the past trying to promote my posts on facebook only to find that it didn’t pull the description, or that it pulled my blog title in front of my article title etc, and I ended up using code to solve the problem, but this is great news and will make it a whole lot easier for bloggers starting up new blogs today.

  6. @Melanie Nelson, Open Graph image upload option really Great. it support blogger.com platform?

  7. The WP Open Graph is very useful if you know how to use it. Looking forward to the YOAST article

  8. Thanks, Melanie! This is really clear and easy to understand.

  9. Wow, Melanie, you explained the answer I needed about the open graph. I know how to do the image but you explained the other details very properly. Cheers!

  10. Great information! Thanks for sharing. We have found that debugging a link prior to sharing it on Facebook solves the issue of the incorrect image pulling with the shared link; it does not address anything related to the size of the image posted on Facebook. By using this plugin, does that eliminate the need to use the debugger tool?

Speak Your Mind

*

css.php