Facebook Open Graph Meta WordPress Plugin

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.

Download

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

About mahmud ahsan

Programming is my passion from high school. I always looking for innovating new ideas and making them real application. I love mobile application and game development as well as web development. Having 4+ years web development experience and 6+ years mobile application development experience on different platform and business on it. My Mobile Apps Portfolio: iThinkdiff.net Mobile Apps

, , , , , ,

35 Responses to Facebook Open Graph Meta WordPress Plugin

  1. Deals August 27, 2011 at 1:42 am #

    Associated images, when people click like or share, are really a huge headache for me!!!!

  2. Quang Cao So August 27, 2011 at 8:20 pm #

    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.

  3. Raju August 27, 2011 at 10:33 pm #

    nice idea.

  4. Ryan Lumbye August 31, 2011 at 5:46 am #

    Thx, for a great pluging :)

    What to do when you have custom images?? it won’t show them. :(

    • mahmud ahsan September 1, 2011 at 1:48 am #

      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.

  5. Brian September 2, 2011 at 8:32 pm #

    Hi Manmud, I use your plugin on my site and it works great! :) now all facebook comment shows correctly ^_^ thanks!!

    • Brian September 2, 2011 at 8:34 pm #

      btw, I’m planning to use it not only on my main site, but on all my wordpress powered site :)

    • mahmud ahsan September 2, 2011 at 9:52 pm #

      Thank You. Glad to know it helps you.

  6. vadakkus September 4, 2011 at 2:40 pm #

    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

    • mahmud ahsan September 4, 2011 at 4:46 pm #

      Did you change the theme’s html tag manually by adding extra parameters? Follow my tutorial about the change of html tag.

  7. vadakkus September 4, 2011 at 10:08 pm #

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

  8. Niraj September 10, 2011 at 11:27 pm #

    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

  9. Jonathan September 14, 2011 at 6:43 pm #

    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

    • mahmud ahsan September 14, 2011 at 10:33 pm #

      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.

  10. Marco Almeida October 8, 2011 at 7:15 am #

    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?

    • mahmud ahsan October 8, 2011 at 12:50 pm #

      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.

  11. Hasnain November 2, 2011 at 6:55 pm #

    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”?

  12. Tim Ware November 18, 2011 at 8:55 pm #

    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

    • mahmud ahsan November 23, 2011 at 11:37 pm #

      In that case you’ve to modify the plugin code and have to provide unique description.

  13. Brian December 2, 2011 at 4:25 am #

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

  14. Rich Tucker January 6, 2012 at 5:14 am #

    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!

  15. ต่างหู January 18, 2012 at 8:53 am #

    Thanks you so much, these solution help our problem

  16. william February 2, 2012 at 4:08 am #

    how do you Change theme’s html tag ? thank you

    • Momo February 15, 2012 at 11:24 pm #

      I was wondering the same thing :(

  17. Hasnain February 15, 2012 at 11:55 pm #

    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

  18. Ermin March 10, 2012 at 9:28 pm #

    Great tip iwe been wondering about this for a while. Thanks for sharing this=)

    Mvh Ermin
    http://www.spelakasino.com

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

  20. Sunny April 12, 2012 at 4:08 pm #

    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

  21. Normando Hall May 29, 2012 at 11:51 pm #

    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

    • mahmud ahsan May 31, 2012 at 6:00 pm #

      Thank you brother, If I could manage some time I’ll update the plugin.

  22. John Smiansa June 7, 2012 at 10:06 am #

    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

  23. dharma August 4, 2012 at 4:36 am #

    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…

  24. dharmaWebStudio August 5, 2012 at 7:07 pm #

    Nothing? So this is not working…

  25. Jon October 31, 2012 at 7:08 pm #

    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!