Open Graph Protocol Framework

Download

Description

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

This WordPress plugin is aimed at automating the process of adding basic and optional metadata to a site’s pages. It is also designed to act as a framework for other plugins or themes and allows to modify and adapt the information provided as needed.

Usage

Install and activate the plugin. It will automatically render the following metadata for posts, pages, etc. :

og:title : The page’s title is used, this provides the title for posts, pages, archives etc.

og:type : The type will be article in general, website for the front page and blog for the blog homepage.

og:image : For post types that support featured images, the URL of the featured image is used. Additional metadata og:image:width and og:image:height is added.

og:url : The URL of the current page.

og:site_name : The name of the site.

og:description : Uses the full excerpt if available, otherwise derives it from the content. For author and archive pages, the type of page and title is used.

Filters

This section is for developers. If you’re not a developer, you can safely skip it.

The plugin provides the following filters:

open_graph_protocol_meta

This filter allows to modify the value of the content attribute for a given meta tag. It is invoked for every supported type of metadata.

Parameters:

stringcontent – the current value of the content attribute

stringproperty – the metadata name, for example og:title

Filters must return:

string the desired value of the content attribute

open_graph_protocol_meta_tag

This filter allows to modify the actual HTML <meta> tag that is rendered in the <head> section of pages.

Parameters:

string HTML <meta> tag

stringproperty – the metadata name, for example og:title

stringcontent – the value of the content attribute

Filters must return: – string the desired output for the HTML <meta> tag

open_graph_protocol_metas

This filter allows to add or remove metadata before it is rendered.

Parameters:

array of metadata indexed by metadata name

Filters must return: – array of metadata indexed by metadata name

open_graph_protocol_echo_metas

This filter allows to modify the HTML that renders the plugin’s meta tags in the <head> section.

Parameters:

string HTML with <meta> tags to be rendered

Filters must return: – string HTML with <meta> tags to be rendered

Why this plugin?

This plugin was created because we needed an extendable way to render meta tags based on the Open Graph protocol, which would allow to modify the meta tag content rendered or add meta tags when appropriate based on external data.

None of the existing plugins provided a sufficiently flexible way of doing that, among other reasons we needed a solution that would comply with all of these requirements and none of the existing solutions does:

must be compatible with WordPress 3.5

must automatically add meta tags for featured images

must be automated and create sensible meta tag content for each page, we don’t want to manually indicate the tag content for every page

must provide a framework for extension through hooks and filters on every tag, and provide a design that allows other plugins to modify the meta tags in flexible ways

must not ask to provide your Facebook account details or application ID when there is no need for it

must not be bloated with features you don’t want or need when you simply want Open Graph metatags to be rendered automatically for your pages

Many thanks for your kind feedback, great to hear you like it! If you would like to use a bigger font, you can edit your theme’s CSS or better derive a child theme where you customize your CSS. See Child Themes for more details please.

If I input the URL before sharing, it comes up with an image related to the post so that seems to work. I don’t get any error but a link to the image BUSTED-11.png is recognized which seems correct, too. Probably what you saw was related to a previous version cached?

I would rather recommend to use the open_graph_protocol_metas filter instead, as it allows to add metadata before it is rendered. The one you are using could be used to modify the final output, which is also an option but could clash if there already is an image defined. You can find more info on the filter on this documentation page.

Thank you, but I need to be able to share it from a hyperlink because using the share button will post it to my personal Facebook page, which isn’t what I want. Is there a chance you can test it that way? I appreciate your help.

Hi. I want to use your plug-in, but I’m not sure if it will work for me. I do not use featured image. Have you updated the plug-in to allow us to choose an image from our media file or from the post? Thank you!

Hi there,
I’ currently building a new website with your OGP plugin and I think I’ve found a bug.

On 404-pages I get this in the :
Notice: Trying to get property of non-object in /var/www/html/web200/html/janbrinker_dev/wp-content/plugins/open-graph-protocol-framework/lib/core/class-open-graph-protocol-meta.php on line 67

And because it’s not wrapped in some tag my visitors would see it at the top of the page.

I found the problem. While following the steps to use google authorship I added “Google+” to the top of the header.php file above the section. This as it turns out is a bad thing. Moving it down in the file after the corrected the issue.

It doesn’t have a settings page (yet) – up to now with what it offers it’s not needed, but the plugin has filters that allow to customize things. If you’d like to have a look at those, see its documentation please.

I installed the plug in, but when someone shares to Facebook the words “About SHARE!” appear as the description instead of the actual article description. Click on the below article URL and share it to Facebook, you’ll see what I mean.

Thanks for your feedback Julie, the width and height metas are based on the attachment image width and height and created automatically. Maybe it’s a problem of the validator they use? The meta tags seem to be created fine normally.

Great plugin. Thanks!
It would be nice if you had a bit of customization.

Particularly, I would like to be able to choose an OG image – I like to create one that may or may not actually appear on the page, but rather one which is a composite of site images or an attractive summary image to pull people to the page.

Many thanks for your feedback! It’s planned to extend the plugin so it allows you to choose a specific image (or none), I think that would be in line with what you’re saying and what others have also suggested.

Great plugin –thank you! I am having difficulty getting my custom description to appear for my homepage. It seems like the plugin is only pulling from the surrounding text (which doesn’t exist–it’s only a slider, so the shortcode appears). On other pages, the surrounding text is fine, but I’d like for the custom description to come up on the home page.

Additionally, I updated the og-logo in my File Manager. How long does it cache usually take for the new image to start appearing?

On the home page it takes the site’s description as the default, with single entries it first looks at the excerpt and if empty, derives it from the content. If you want a specific description, you can try indicating an excerpt and it should use that for the page.

One thing I’ve noticed and wasn’t aware of before, is that it takes shortcodes and puts them in the description tag ‘as is’. That’s something that could be improved, taken note of it.

Oh, by the way, there are two entities rendering OG meta tags on your site, one from this plugin and there’s another set. Jetpack? You should have only one rendering those.

I can’t really say about the image getting updated, but try clearing the site’s cache.

Thanks for the feedback, this is useful as I’ve discovered the thing with shortcodes in the description thanks to you 🙂

Hi Megan, thanks for reminding me about the issues with the shortcodes appearing. What happens is that it looks in the post content directly and doesn’t apply the rendering process, I think that should be changed in the plugin. It might also be a good idea to at least have it as an option to use the excerpt for the description.

I didn’t see a support category for this so I hope asking here is acceptable.

Installed the plugin and it worked perfectly first try! Always a good sign. My posts will often not have images. Is there a way to set a default image to be used for the og:image tag that is used when no featured image is specified? Without one, Facebook grabs a theme-related image and I end up advertising Woothemes instead.

Sure, this is the right place and your question is very welcome, too 🙂

It is possible to set a default image using the filters, but there’s no setting in the user interface, so it would have to be coded as an extension (well not an “extension” really, just a function that implements the filter). Do you know how to use the filters?

Hi Kento, and thank you for your plugin. I have the same need as Bob to set a default image for all the pages that don’t have one. Unfortunately I don’t know how to use the filters… I’m quite tech savvy in general, so if you could point me to the right direction — if not tell me how to do from A to Z — that’d be super helpful. 🙂

I haven’t had a chance to take a look at this, so I can’t really point you towards a direct solution other than what I’ve indicated about using the filters. I’d really have to take the time to draft a solution based on that … anyhow, the best would be to allow to choose an image through the user interface. Maybe that would make more sense in general.

Sorry the tag didn’t show up on my first post because I forgot to drop the tags .. I need it to generate meta property=”og:price:amount” content=”15.00″ – where the 15.00 is the price of whatever the product is on the page.

I am pretty much a novice with this stuff. I tried adding the code to generate the tag on the product page itself rather than messing with the plugin by trying a couple code variations. I looked thru the code that supposedly generates the price on each product page but I think I have done something wrong. I tried the following two things with no success.

?php echo $product->get_price_html(); ?

and

?php echo get_woocommerce_single_product_price(); ?

One creates white screen of death. The other doesn’t break anything but the tag simply does not generate when I view page source.

You should rather use the filter, it seems you are simply trying to output the price somewhere on the product page. The filter will allow you to have the meta tag correctly generated when the others are rendered (at the right place on a page).

I love this plugin. Is there a way to get it to generate an open graph tag for “product” instead of “article” – I could just change this in the code I suppose. But my real question is can I make the plugin generate the following tag for Woocommerce

The price would be whatever the product price is of course. This will help with Pinterest Rich Pins. Thanks!

You don’t need to change anything in the code, it would rather be some kind of extension based on the open_graph_protocol_metas filter that the plugin provides (see details on it on the plugin’s documentation page).

Great plugin! I am wondering, though, how can I make the medium size image or the thumbnail the “default” image. Mostly because my featured image size is really lenghty and looks weird on facebook.
Thank you so much for an awesome plugin, though!

Thank you so much for your kind comment 🙂 One way to achieve this would be using the open_graph_protocol_meta filter on the og:image property (also on the og:image:width and og:image:height properties to set the right dimensions).

Hi Kento,
this is a great plugin! I’ve just installed it on my blog and it works out of the box.
But one little issue I have: When I try to publish my homepage on google+ for example it shows my blogname in the description field. Everything is ok on a post page but not on the homepage.

Can you change this, that the plugin uses the wordpress description field for the open graph description tag?

Hi Antonio,
problem is my theme doesn’t support featured images, it’s a rather old, but (internally) heavily reprogrammed theme. We look into if we can activate featured images, but it woulsd be nice if the plugin just used the first image in a post when there’s no featured image.