33

I am using mediawiki 1.19 and I've added facebook 'like'. When I click like the image posted is the site logo. How do I take the image from the page. I've run the site through http://developers.facebook.com/tools/debug and it seems og:image is set to the site logo. How do I change this meta property? My site is thepetwiki.com Thanks

LTech
  • 1,677
  • 5
  • 29
  • 48

2 Answers2

34

You are going to gave to add some custom og:tags to the HTML markup of your page and specify the image that you want to use...

Take a look at the example from the Facebook documentation - 

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock"/>
    <meta property="og:type" content="movie"/>
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
    <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
    <meta property="og:site_name" content="IMDb"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description"
          content="A group of U.S. Marines, under command of
                   a renegade general, take over Alcatraz and
                   threaten San Francisco Bay with biological
                   weapons."/>
    ...
  </head>
  ...
</html>

As you can see the og:image parameter is specified here and that allows Facebook to correctly display the meta data associated with that URL...

You might not need all of the og:tags specified here, title,url,image and description should be fine for just a LIKE button.

You are already aware of the debugger tool - it will help you debug your LIKE button and og:tags. Make some changes in your HTML markup and each time you'll have to send your URL though the debugger to refresh Facebook's cached version of your URL.

A quick Google search gave me this mediawiki extension that looks like it could help you -

http://www.mediawiki.org/wiki/Extension:OpenGraphMeta

OpenGraphMeta provides OpenGraph protocol metadata for articles on the wiki for 3rd parties like Facebook to extract...

Lix
  • 47,311
  • 12
  • 103
  • 131
  • how do I do this with mediawiki? Also I don't want to have to create new meta tags for each page (I have 100s of pages on my site). How do I set it so facebook takes the image from the content area? – LTech May 20 '12 at 08:52
  • You use `og:tags`. I am sorry but I have zero knowledge in `mediawiki`. At the end of the day, each individual URL must have the appropriate meta tags for Facebook - otherwise (as you have seen) it will take what ever image it wants to... – Lix May 20 '12 at 08:54
  • So check it out - a quick google search gave me this result - it appears to be a `medawiki` extension for exactly this purpose - http://www.mediawiki.org/wiki/Extension:OpenGraphMeta – Lix May 20 '12 at 08:56
  • I've already tried the extension and http://www.mediawiki.org/wiki/Extension:Add_Metas to change the meta data but it isn't working. I can't figure out how the og:image was set to begin with, at present I have Meta Tag set as my og:image showing in the debugger. How do I change this!?!? – LTech May 20 '12 at 09:45
  • It seems can add a new meta tag but I can't override the original propert=og:image, so the posted image on 'facebook like' is still the logo – LTech May 20 '12 at 09:51
  • If I go to https://developers.facebook.com/apps/xxx/summary/ and click on 'open graph' it says Page not found. How do I edit my opengraph data? – LTech May 20 '12 at 09:52
  • If the tags are not set, then Facebook will attempt to get any data it can... If the site's logo is the first picture it sees then it will take it. Again, I'm not sure how you can do this in your case - but you'll have to add that meta data to your pages... – Lix May 20 '12 at 10:12
0

see post http://www.mediawiki.org/wiki/Extension_talk:Facebook#OpenGraph_image_problems. The open graph coding is all part of the Facebook extension.

LTech
  • 1,677
  • 5
  • 29
  • 48