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
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...
see post http://www.mediawiki.org/wiki/Extension_talk:Facebook#OpenGraph_image_problems.
The open graph coding is all part of the Facebook extension.
Related
We have a Facebook app that generates custom shareable links for users when they complete certain activities. The shareable pages have the following meta tags:
<meta property="fb:admins" content="1000000000000000">
<meta property="fb:app_id" content="1000000000000000">
<meta property="og:site_name" content="ActivityApp">
<meta property="og:title" content="I just completed this activity.">
<meta property="og:description" content="Click here to see John's activity!">
<meta property="og:type" content="website">
<meta property="og:url" content="http://activity.com/abcd69478383951886c14ae">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="420">
<meta property="og:image" content="http://cdn.com/abcd69478383951886c14ae.png">
<meta name="author" content="John">
Most of the time, Facebook will correctly show the title, description, and image on the Newsfeed when the links are shared. But sometimes, the og:image and og:title will be hidden for no reason. This is what it looks like...
The strange part is that when we check the link on the debugger by clicking Show existing scrape information it would say that it was correctly scraped and would display the title, image, and description at the bottom.
Why does this happen, and what can we do to make sure that our links will display correctly every time they are shared?
Additional info: our app generates millions of stories so we can't manually do anything to the links.
I still cannot post comments, so I try to give my answer: try using og:image:url instead of og:image. I know they should be the same, but sometimes it works.
link to answer
Read and try any of these:
https://photographylife.com/how-to-make-facebook-show-images-in-links
http://www.addthis.com/academy/how-to-optimize-facebook-sharing/
There are plenty of suggestions that you can try but I don't have concrete knowledge about that so you can search for more information in the google page.
People used to work on this:
https://developers.facebook.com/tools/debug/og/object/
But you can also try this:
https://developers.facebook.com/tools/debug/sharing
If you still can't make the image there, then it must be something wrong with your website. Unless you can provide an actual link to your resource, I can't do any further help.
How facebook identify the entered hyperlink and get data from that link. it shows thumbnails, text, pictures, etc. Does facebook using any javascript for framework?
Open graph protocol (OGP) is what helps Facebook get specific data from URL i.e. Web page title, site name, description ... etc
To install OGP on your site (page)
Add: prefix="og: http://ogp.me/ns#" into <html> tag
And:
<meta property="og:title" content="{Title}" />
<meta property="og:type" content="{site_type}" />
<meta property="og:url" content="{page_URL}" />
<meta property="og:image" content="{Thumbnail}" />
between <head> tags.
Those above are basic meta properties You can read more about it on OGP
I'm building a facebook iFrame application that uses facebook comments. When a user leaves a comment the default action is that this comment will be posted to their wall. The wall post is something along the lines of
UserX commented on example.com
# the comment text goes here
http://example.com
apps.facebook.com
You should be able to include an image, a description, and set the link to be the title of the page (where it says http://example.com above the apps.facebook.com), but I'm having no luck getting this to work.
I thought it would grab the information from my meta tags (as long as they included the appropriate 'og' tags), but that isn't working. Nor am I able to define values for title, url, image etc. in the same way that you can for normal wall posts.
Anyone have any idea how to get this working??
EDIT:
Here are the meta tags I currently am using.
<meta property="og:title" content="USERNAME'S PAGE" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://example.com"/>
<meta property="og:image" content="http://example.com/images/wall-post.png" />
<meta property="og:description" content="Some description goes here." />
Use URL Linter to Debug
http://developers.facebook.com/tools/lint/
Make sure all meta tags are correct and if you've made some changes, it takes some time to update for facebook and here's a sample, this is a working version:
<!doctype html>
<html xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml" lang="en">
<head>
<meta charset="utf-8">
<title>Facebook Comment Box Sample</title>
<meta property="og:title" content="YOUR-POST-TITLE"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://YOUR-SITE-URL"/>
<meta property="og:image" content="http://YOUR-IMAGE-URL"/>
<meta property="og:site_name" content="YOUR-SITE-TITLE"/>
<meta property="og:description" content="YOUR-DESCRIPTION"/>
<meta property="fb:admins" content="YOUR-USER-ID"/>
</head>
<body>
<h1>Facebook Comment Box:</h1>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://YOUR-SITE-URL" num_posts="10" width="500"></fb:comments>
</body>
</html>
OK, after a lot of stumbling around I figured this out.
My iFrame application requires facebook authentication before accessing the application (as I believe all facebook apps do). This means that the facebook crawlers were unable to crawl my homepage and pick up the og: meta tags.
To solve this I first had to figure out what the facebook crawler looks like. I logged the HTTP_USER_AGENT for all requests and then used the facebook URL Linter (http://developers.facebook.com/tools/lint/) to ping my site.
The facebook crawler identifies itself as "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"
Once I had that I was able to just add a little conditional logic to let the crawler bypass authentication and access my site. I hope this helps others.
First I made sure I had all my meta properties set, then I just put my code in this:
if (strpos($_SERVER['HTTP_USER_AGENT'],"externalhit_uatext")<5)
{
}
I'm using the facebook comments widget and for the most part, it's working but I have two issues.
In order to have the right title show on the wall post, I'm having to use the <fb:title> tag and this is making the actual title show up right above the comment box. I would have liked to use the title propery of but that doesn't seem to do anything. The safest thing seems to be using the <title> property in the header but unfortunately, I have a page that sets the title of the page using javascript after some logic has been executed and different phps have been included so that option is not easy. Using javascript doesn't seem to have the same effect as setting the title explicitly when I'm writing out the header.
I still don't know what I have to do to have any control over what image gets posted on the facebook wall with the comment. I have a page with multiple lists on the side of the detail page and it seems like fb arbitrarily picks an image from one of the listings. Obviously, this is highly undesirable because a lot of times the comment and the image will have nothing to do with one another. I've read that using img_src in your header helps but that hasn't worked for me either.
Any suggestions?
Not sure if this is what you're looking for; as i was confused to what your question was.
But if you're trying to set and provide a title/image for when someone comments on your page you may want to review the Open Graph protocol.
Not sure why you're setting your title with javascript; but if you use the meta tags you can get more granularity and provide facebook with a desired title and desired image.
Example (From Open Graph Documentation):
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://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."/>
So lets break this down:
You want to set an image:
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
Set a title for Facebook to parse:
<meta property="og:type" content="movie"/>
Make sure you set your xmlns:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
In my website I have a small gallery with about 100 images only. It would be cool if facebook users could "like" an image so that this appears on their wall and all their friends see the image. I'm not sure if this is possible with facebook. Maybe someone knows?
What you are trying to do is possible, but you have to think about it a little differently. You will need to dynamically create the open graph tags on the page based on some query string or url information. If all of your images are on the same page you would do something like this: Say my page is http://www.example.com/photos.php. First, add all your like buttons to this page. Each image will have its own like button like this:
<fb:like href="http://www.example.com/photos.php?id=###"></fb:like> (where ### is the id of the photo)
Now, what happens with a fb like is when a user clicks like the href url is sent to facebook, then facebook actually makes a request to that url to read the open graph data. So this is where you have to build a dynamic page that provides dynamic open graph data.
So for each image ?id=### display the appropriate open graph tags on the page like so:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Image Name"/>
<meta property="og:type" content="image"/>
<meta property="og:url" content="http://www.example.com/photos.php?id=###"/>
<meta property="og:image" content="http://www.example.com/img/myimg.jpg"/>
<meta property="og:site_name" content="My Site Name"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description" content="A cool image I made"/>
...
</head>
...
</html>
So now when facebook makes a request to the url http://www.example.com/photos.php?id=### it will read the og:image tag and display that image as the image with the post on facebook. It will also use the other properties accordingly.
Let me know if this makes sense or if you have any questions.