WordPress OpenGraph, a simple and lightweight plugin to automatically add OpenGraph meta tag to the head section of your WordPress Blog. The OpenGraph meta tags helps your visitors to share your content in social media websites with proper title, description and image.
WordPress OpenGraph Plugin Features
Here are some of the basic features of the WordPress OpenGraph Plugin that you might find useful.
- Uses Post Title as the OpenGraph Title. Doesn’t matter whether you are using Thesis, Genesis or any other SEO Plugins.
- Uses first 25 words in post content. You can, however, change it from the settings page.
- If you are using Thesis or Genesis Post Image, the plugin will use that as the OpenGraph image. If not, the plugin will look for a featured image and use that if present. If that is also not there, the plugin will look for images uploaded for that post. If that too isn’t there, the plugin will use a default thumbnail which you can set from the settings page.
- If you are using JetPack, the plugin will disable the OpenGraph tags generated by it. Therefore, no conflict.
- Supports 77 Blog Languages.
WordPress OpenGraph Plugin Configuration
You can customize almost everything this plugin outputs. All you need to go to Settings > OpenGraph and customize it.
- Facebook App ID: If you have a Facebook App for your blog, you can enter the Application ID to farther customize the sharing.
- Facebook Admin ID: It’s normally your own ID (not username, but the ID). If you don’t know what it is, check here. Just replace “abhiktheone” with your username.
- Default Thumbnail URL: The URL to your default thumbnail URL. It will be used if no image is found for your post. I am working on an onpage uploader, but meanwhile you can upload the thumbnail using the WordPress Media Uploader and copy/paste the URL.
- Blog Language: The language of your blog.
- Description Word Limit: The number of the words you want in your OpenGraph description. The default of 25 words works just fine.
WordPress OpenGraph Plugin Installation
The installation of WordPress OpenGraph Plugin is super easy.. Just follow the standard procedure.
- Upload ‘opengraph-microdata-generator‘ folder and all it’s contents to the ‘/wp-content/plugins/‘ directory.
- Activate the plugin ‘Opengraph and Microdata Generator‘ through the ‘Plugins’ menu in WordPress
- Start customizing the settings from Settings > OpenGraph.
Screenshot
Hello, I’ve activated the plugin and input my fb id number and thumbnail image url however when I go to share my site on FB it still pulls a random image from a banner on my page. Please advise? Thanks,
Joseph
In that case, the Facebook crawler is picking up all the images present in that page.
There should be a thumbnail selector arrows in Facebook while sharing the link. You can use that to select the proper thumbnail.
Do you have any other plugin installed that deals with opengraph or any other schema markups?
Thank you for the great tutorial. I have an additional question: is it possible to use existing facebook fanpage as a app while implementing the open graph into my wordpress instalation? my your_fb_app_id would be an ID of my facebook page?
It’s the ID of the App you want to use for tracking. You can leave this blank if unsure.
Thanks a lot for the plugin!
I’ve just put it on my blog and it’s working fine: http://www.vamtunes.com
I had some troubles at first with the facebook image URL, but then I deactivated it, and re-activated it and it all worked just fine. I thought I would share this.
Cheers.
Hello there,
Sorry for the stupid question, but I’m not sure where to place the line exactly.
Just want to be sure. Is this correct ?
<html xmlns="http://www.w3.org/1999/xhtml" itemscope itemtype=�?http://schema.org/Blog>
Thanks
It’s no longer necessary. You can just avoid that part.
Guess I need to update the instructions.
Hello!
There seem to be a bug with creating a correct og:image URL if the image is located on an external webserver.
Check this example:
http://otsokivekas.fi/2009/12/muistojen-karjala/
The line:
is incorrect. Should be without the “otsokivekas.fi” in the beginning.
I think the error might be on the following lines in the plugin:
176 $pos = strpos($image, site_url());
177 if ($pos === false) {
178 return $_SERVER['HTTP_HOST'].$image;
179 } else {
180 return $image;
181 }
There should be an additional check for the $image variable, to check if it is a URL, that is, if there is a protocol in the beginning continuing with a colon. E.g. “http:”, “https:”, “ftp:”, …
Could somebody fix this who knows the code better? Thank you very much! Otherwise the plugin rules and thanks for making it available!
Regards,
Kim
Argh, the line disapeared since it was HTML code. Here is the wrong line in the HTMLT output (shown below without the greater than / less than marks in the beginning and the end):
meta property=”og:image” content=”otsokivekas.fihttp://upload.wikimedia.org/wikipedia/commons/0/0f/Kartta_vanha_suomi.png”
Yes, you can use a default image that can be accessed via the domain where the plugin is installed.
Why don’t you just upload the image in your own server and use that link?
Thanks for the reply! The problem is that we have a big archive consisting of years of postings that now were imported to the new site but the images are hosted elsewhere. (Not sure if they will be imported later, but at the current moment that is not possible.)
Also, frankly, I think the plugin just works wrongly if it invalidates a completely correct URL by putting a wrong string in the front of the URL… Or what do you think?
Just updated the codes.
Please try the new version and let me know if the issue persists or not.
Super cool! Now it works correctly! Thanks, Abhik!!!
I don’t have a Facebook account, and so I don’t have any Facebook App ID/Admin ID. Can I still use this plugin? If yes, what do I put in this field?
I’ve tried this plugin, but something wrong with og:locale & og:image
about og:locale, facebook debugger complains that the locale mismatch, but I’m not sure why
about og:image, this plugin generates strange url if the images are from outside, say, flickr. take http://blog.ijliao.info/archives/2011/10/07/4361/ for example
thanks for your kindly reply
Fixed in version 3.1
I am using Thesis theme and there is no header.php. Any idea where to add it ? If i add it to the tag do I add it like this: itemscope itemtype=�?http://schema.org/Blog or like this ?
Thesis > Site Options > Additional Scripts is where you put any scripts you want to show in the
Hi,
I installed this plugin and have added the line manually to the header.php file. My problem is that I do not have a facebook admin id / nor am I an open graph user at this point as I have no app in my name.
Hence when i run the site through the w3c validator, it gives me a lot of open graph related errors. Is there a way i can locate or activate an opengraph id or should i not worry about it.
I am mostly interested in the plugin since it seems to be quite good in dealing with microformats. In the current SEO landscape this is the future.
Please guide. Thanks
Q
If you are talking about these errors, you can safely ignore them.
Hey, thanks for the quick reply. Btw, I use a custom excerpt for most blog posts however, the plugin extracts the first n characters from my post. Is there a way to ensure that it uses the custom excerpt from wordpress that I am defining for that post?
Also, It would be great if you allowed the same open graph data to be shared with general meta as well. I am a bit of a newbie at this hence I dont know for sure if the same data works with both (search engines and facebook).
the problem is with this line:
$theContent = trim(strip_tags(get_the_content()));
it is trimming the content no matter what… i couldn’t find any instance or notion of the excerpt in the plugin code, so i’ve changed it to:
if(get_the_excerpt()==”[...]“) $theContent = trim(strip_tags(get_the_content()));
else $theContent = trim(strip_tags(get_the_excerpt()));
and now it is working as expected. please add this to the next update.
i have installed your plugin and i dont know what is facebook admin id. Can you please tell me?
Hi, Quick question. I have shortcodes defined on each post, for mobile and non-mobile, as well as ads inside the post.. Every time I post it to Facebook for e.g. I get the shortcodes on description.
e.g.
[wptouch target=non-mobile][/wptouch][wptouch target=webapp][/wptouch][wptouch target=mobile][/wptouch]Hi, Quick question. I have shortcodes defined on each post, for mobile and non-mobile, as well as ads inside the post.. Every time I post it to Facebook for e.g. I get the shortcodes on description. [Google AdSense 468 google468=""]
There’s a way to exclude [ shortcodes ] ?
I post all my posts at facebook, google+, digg, etc and I have to remove the shortcodes every time … you know
thx
Yes!, I entered the tag as is in my previous message, but it was stripped from the comment
Abhik, I have found you don’t escape double quotes, so bad things happen, like:
Where exactly? In descriptions?
Abhik, easy fix. Just changed the if(is_single() ) to if(is_single() || is_page() ){ and it worked. May be a good thing to add to the next update. Simple and will make pages work too. I would consider adding is_archive and is_category too.
Thanks
Facebook debugger had this warning.. “Open Graph Warnings That Should Be Fixed”
Inferred Property The og:locale property should be explicitly provided, even if a value can be inferred from other tags.
Okay, please wait for the next update.
hello, been searching for this plugin but something occur to me on step 3. can you explain how to add “itemscope itemtype=�?http://schema.org/Blog” into header?
or just copy and paste the line. is it?
Yes, you just need to copy and paste that line at html tag of your blog’s header.php.
Seems to be working fine now – thanks for your help Abhik and good luck with developing the plugin further.
My only sugggestion for refinement is that it would be good to have a simple settings panel in the admin allowing me to upload my default image, rather than copy it to the specific folder.
Thanks again,
Scott.
Thanks.. Will put the top of the priorities list.
You should replace line 44 of your plugin with the following code:
$iafbschemameta[]=get_option(‘home’);
Several People (like me) have installed wordpress in a subdirectory, only index.php being in the main directory. get_option(‘siteurl’) however points to the wordpress install and not to the url that’s used from outside.
No, I dont (as far as I know!). The strange thing is that even though I cannot see the image when I first created the share (I just see the default facebook blue F logo), one of the test shares that I did earlier is now correctly showing the right image? How can this be?
Okay, just updated the plugin to version 1.1. Can you please update the plugin at your blog and try sharing a new blog post?
Please let me know the result.
Have just downloaded the plugin and it is still version 1. (that is what is says in WP). Need to go out now, so will try again first thing tomorrow.
Thanks for your quick responses so far, and I hope that we can get this fixed.
Have installed your plugin and it is the simplese and easiest to use I have seen so far… BUT…
the image is not working. You can see the code in the page http://www.powerofgolf.co.uk, and the image that it has listed DOES exist, but when I go to share the page it does not give me a valid image? Everything else works ok – do you have any ideas?
Do you have hotlink protection enabled?
thanks for a plugin.