Showing Open Graph Protocol og image, og description Properly

Showing Open Graph Protocol og image, og description properly can be a challenge – either proper post specific og image is not shown or description is chopped or sometimes overflown ! This is very common issues and you will find them even in standard theme developers’ own blogs’ output because of faulty logic in Plugin’s function. There are various reasons why showing Open Graph Protocol og image, og description properly can be a challenge – it can be for a PHP, Apache configuration, can be for using non Apache server or can be simply for change in WordPress function reference. For this guide on showing Open Graph Protocol og image, we are taking that you are using Genesis 2.0 Beta or higher and WordPress Facebook Open Graph Protocol Plugin. The function references are not specific to these Themes and Plugins, at least we have tried to make it universal, but it is fact that; it is not possible to code or correct all the kind of same plugins and themes.

Commonly Faced Issues With Showing Open Graph Protocol og image, og description Properly

Case 1

If you visit Bryan’s Blog right now (Copyblogger.com) and open any blog webpage, you will notice the chopping :

“expe” is not expected. He is using Genesis 2.0 Plus WordPress Facebook Open Graph Protocol Plugin. It is enough good plugin.

Case 2

Image is not shown properly by Facebook or Twitter, live example can be produced by you if follow our guide – Twitter Card Embed Options in WordPress. Twitter or WordPress is not caring what actually you want to show.

Fixing and Showing Open Graph Protocol og image, og description Properly

For case 1, you will need to fix the Plugin’s main file in the way I have done. The source code of the modification is available on my GitHub repository.

You can see the diff here. Basically, it is not the Plugin Author’s mistake or kind of that. The change I guess was made based on people’s feedback. You can download the zip and use it as plugin itself, there is no other changes made.

For case 2, the wish is :

1. Showing post image as thumbnail in Twitter, Facebook
2. Showing Fallback image for home or other Categories in predefined way
3. Through point 2, avoiding multiple og images and preventing the error output as no default image set.

All the function are normally present, at least logically; but for some it does not work or add double og image. Facebook, Twitter prints out the blog’s main set default image if it gets two options. That is bad. I have modified the code more for me :
So, if I do not use a default image from plugin’s control panel in WordPress side, the normal function of the plugin was to print the error message, but it actually will output the default image. It is done to make the thing easy to edit by everyone.
Now, if you want to add category specific ogg image, obviously use the normal WordPress functions, if the category is Cloud, a white thing looking like that will show, else for category named ‘download’ it will show another thing, else will show Lotus icon. Easily customizable.

Obviously, what already published, can not be modified back. You can comment out the echo functions to print Plugin name an version to reduce a small CPU consumption. It is good to comment out the unnecessary link to other website in outputs in these latest Penguin days. April 2013 breaking changes has made some changes in Facebook, you can read them here :

https://developers.facebook.com/blog/post/2013/04/03/platform-updates--operation-developer-love/