Have you ever noticed that, if you implemented Facebook like or Facebook Share in wordpress blog and when people click Like the shared post on user wall looks not good most of the time. This is because you didn’t implement the facebook open graph meta data in your blog post or page. As a result when facebook parse the link sometimes they can’t parse it properly that you expected.
To solve the situation you’ve to add open graph meta data in your site. Some days ago I manually added this in my blog’s theme, but later I decided to make a wordpress plugin so that it become easier to use and share with others.
My plugin features:
1. Automatically set facebook open graph meta data in your wordpress site
2. Open graph meta data will be dynamic based on post or page
3. In the admin panel you can provide AppId
4. In the admin panel you can provide facebook user id (admins)
5. You can set a default image that will be used when there is no image associated with a post or page
6. In the plugin admin page, you’ll see detailed specification to setup facebook app.
Plugin setting page
You will see detailed tutorial about how to set facebook application and retrieve the information in the plugin setting page.
If you activate this plugin you’ll see when people share or like your wordpress post or page, that will show nicely on their facebook walls. Thus user’s friends will be inspired to click the link.
After successfully installed the plugin and changed the html tag by yourself, if you view the source code of your blog page/post from browser you’ll notice the following things:
HTML tag is changed
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" dir="ltr" lang="en-US">
Open graph meta data added
<!-- Facebook Open Graph --> <meta property="fb:app_id" content="XXXXXXXXXXX" /> <meta property="fb:admins" content="YYYYYYYYYYY" /> <meta property="og:url" content="http://thinkdiff.net/facebook/sharekit-must-have-ios-app-share-library/"/> <meta property="og:site_name" content="Thinkdiff.net" /> <meta property="og:description" content="geeky stuff, facebook, twitter, linkedin, php, mysql, web development, tips and more" /> <meta property="og:type" content="website" /> <meta property="og:image" content="http://thinkdiff.net/image/thinkdiff.net_splash.jpg" />
Where XXX… and YYY… should be your app id and admin user id.
Hope this helps 
Associated images, when people click like or share, are really a huge headache for me!!!!
Thanks. It’s really nice plugin, but I have to weigh up installing Facebook Like/ Share or sth related because, many main ISPs in Vietnam have been blocked Facebook. So it’s hard for my blog’s viewers to share on Facebook.
nice idea.
Thx, for a great pluging
What to do when you have custom images?? it won’t show them.
Suppose when your visitor visits your blog homepage, not a page or post, or if a post/page don’t contains any image as attachment then the default image will use as the image part of facebook shared content when people like your blog post.
Hi Manmud, I use your plugin on my site and it works great!
now all facebook comment shows correctly ^_^ thanks!!
btw, I’m planning to use it not only on my main site, but on all my wordpress powered site
Thank You. Glad to know it helps you.
Hi Mahmud,
I can see the meta tags in the source code, but the Facebook linter (debugging tool) stubbornly refuses to find the tags. I have tried entering the code manually referring numerous sources, have used a number of plugins, and the result is all still the same. Could you help me out I have changed the HTML also
I use WordPress 2.9 on the Continuum theme.
Thanks
Did you change the theme’s html tag manually by adding extra parameters? Follow my tutorial about the change of html tag.
Hi, yes, I did. I changed them in the header.php file. You meant the xmlns attributes, right? I changed them just as you had mentioned.
I have been struggling for a week now. Do I have to make any more changes anywhere?
I ran my code through http://w3.valdidator.org, and they tell me there is an error at
, that
there is no attribute “property”.
Hey I tried your plugin, everything works fine but just the image is not coming, I have set the featured image in my post, but still I am getting my default image,
Why I am not able to get the featured image of my post?
I am using Twenty Eleven Theme
Thanks for your plugin
I was wondering if there was a way to use the default image on all posts (or selected ones) even those that have a featured image.
Thanks,
JMR
Its possible in that case you have to modify some part of the code of the plugin. If you want to know, I could show you how to modify which part.
I’m using WP 3.2.1 + Classipress 3.1.5 with your plugin and also plugin Jetpack, all lastest versions.
When using your plugin the “Sharedaddy” part of the Jetpack plugin does not work. Any ideas?
Hi Marco,
I actually don’t know what is the reason behind it. My plugin code is quite simple just added the facebook graph api nothing else.
Its very nice and simple plugin but i want to know how can we show aggregations on timeline with our site like “Hasnain Ali read an article on thinkdiff.net”?
Hello. I’m using your plugin for a client.
For some reason, the og:description content is being pulled from whatever text content is in the post.
Is there a way to use your plugin to create unique og:descriptions for each post?
Thanks. Tim
In that case you’ve to modify the plugin code and have to provide unique description.
Hey Mahmud, love this plugin – it’s made plenty of things very simple for me. There is one small problem, though – whenever I run my pages through FB Linter, it gives an error message: “Inferred Property: The og:locale property should be explicitly provided, even if a value can be inferred from other tags.”
Can you add in an og:locale tag before the EOD on lines 42 and 53? I’ve manually added it, I just want to make sure you’re aware before the next update.
Will this open graph plug in make it possible to republish to the newsfeed of those who click on like on a blog post?
Thank you!
Thanks you so much, these solution help our problem
how do you Change theme’s html tag ? thank you
I was wondering the same thing
Hi Mahmud,
Your plugin is working perfectly in one of my website but on the other website where i am using classipress theme i am getting “‘og:image:url’ could not be parsed as type ‘url” error in debugger when not setting default image which means plugin is not getting first or featured image from the post.
Please help
Great tip iwe been wondering about this for a while. Thanks for sharing this=)
Mvh Ermin
http://www.spelakasino.com
Hello my family member! I want to say that this article is awesome, nice written and include almost all significant infos. I’d like to see extra posts like this .
Great Plugin
Really useful for bloggers
Thanks for sharing
but i am looking for plugin in which user can upload image from wordpress website to facebook
Hi Mahmud
thanks for the plugin. I notice that can’t handle the attachment images, so I made a little mod for your plugin. I modify this function to get first the image in a post, as your plugin does, then, get the attachmente, and at the end get the default fbimage.
function get_first_image() {
global $fbappId, $fbadmins, $fbimage;
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘//i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //
$matches = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘thumbnail’);
$first_img = $matches [0];
//$first_img = $fbimage;
}
if(empty($first_img)){ //Defines a default image
$first_img = $fbimage;
}
return $first_img;
}
Of course, FB need a minimal size of 200 x 200px, so I also change in Media Setting the size for thumbnails from 150 x 150px to 200p x 200px.
See you
Thank you brother, If I could manage some time I’ll update the plugin.
Thanks for this plugin Mahmud!
Everything is working fine except for the default image feature. I have set the URL as stated in the instructions but doesn’t show up in Facebook for some reason.
PLEASE help me with this! I’d greatly appreciate it.
Thank-you
Please visit this tool https://developers.facebook.com/tools/debug and paste your url and debug. Next time try to share and see what happens.
This is not working for me. Still when I like something from the page I created I don’t have nice beginning of the text showing on FB. Only when I debug that certain post then the text is nice but I don’t have the thumbnail of the post shown, instead my logo is shown…
I don’t quite understand these FB apps but I have done this step by step, although there is a slight diferrence from tutorial and real thing…
Nothing? So this is not working…
Hi ahsan, When i liked this article. It shows as i liked your article on thinkdiff.net. How do i do that? Similarly when people like on my site, i want it to as someone liked an article on ‘sitename’. Please help me out. Thanks!