I am trying to share the product url using facebook sharer and the link is also sharing properly but the problem is that while sharing, it didn't sharing the product image. Its sharing some other random image from the page, I don't understand why its happening. Also, while sharing contents contain the html tags.
Here is my sharer url :
Here is my image while sharing:
enter image description here
I have also added the line in <head></head> i.e.
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
but not useful.
Please help me out, I am poorly trapped in it.
You just need to put the following line
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
And debug in facebook debugger. if it doesn't show the correct image, click Scrape again button.
Also, something is wrong in your og:description. That's why its showing the code
Related
I've read many tutorials, and edited the page correctly.I have all the meta tags that are needed to provide the right image to be picked after a like.
I also ran my site through the debug site, and there it shows the right texts and images. Only not when i try to like it, then i keep getting the wrong thumbnail.
How come?
http://www.verkeersschooltilburg.nl/proeflesfacebook/
<meta property="og:title" content="Gratis proefles!"/>
For right thumbnail to display, when you hit "Like" you must use:
<meta property="og:image" content="http://www.yourdomain.com/yourimage.jpg" />
Maybe it won't work instantly because of cache, try to clear browser cache and wait couple of moments..
I've been testing the open graph tags for facebook and I can't get my logo to show when I share my website link on facebook.
If I use the lint debugger (https://developers.facebook.com/tools/debug) I get:
**Open Graph Object Properties**
og:url http://www.movimenting.me/
og:type website
og:title http://www.movimenting.me/
og:updated_time 1318267537
**Raw Open Graph Document Information**
Canonical URL http://www.movimenting.me/
Meta Tag <meta property="fb:app_id" content="210576275672723" />
Meta Tag <meta property="og:image" content="http://www.movimenting.me/images/logo2.jpg" />
Meta Tag <meta property="og:title" content="Movimenting.me" />
Meta Tag <meta property="og:type" content="website" />
Meta Tag <meta property="og:url" content="http://www.movimenting.me" />
Meta Tag <meta property="og:site_name" content="Movimenting.me" />
You can see that it gets the og:image on the raw part, but doesnt on the object properties..
Why is this? I always specify the same URL and opengraph.in gets the right tags..
thanks in advance.
everything comes out clean now on lint:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.movimenting.me%2F
image, locale, you name it. no errors or warnings or others.
BUT STILL, when you share the link (www.movimenting.me) on facebook, no image apears.
What can I do now, or what should I look for now?
Oh, btw now i recall: if I remove the og:image tag, it will indeed find 30 images to share, but not the logo. It's so strange, since the logo is the first one..
what now?
thanks in advance
Is there any errors in the debugger? Maybe the app_id doesn't match that domain?
Late reply but I've been having the same problem even though Facebook debug would report no issues and finally fixed it.
Nothing would show up when I had a 50x50px image which Facebook didn't complain about in the debugger. I finally changed the image URL to use a 128x128px one. It worked even though Facebook complained that the image should be at least 200x200px which I then used.
You can see the fix working here. https://www.thesuiteq.com
I wanted to know how can I use Facebook Like button on my Ajax web application, that will capture changes in the Open Graph tags for both the og:title and the og:url. I already created a Facebook app and got an API ID.
What I want to know is the code that I need to put on my website in order for Facebook to capture the changes that I've made to the meta tags which contains that title and url information (ie. og:title, og:url).
I followed the instructions on Facebook without success. Furthermore, I want to know how can I locally test the Like button to see that it grabs the data from the Open Graph tags properly.
Also worth mentioning that I've a JQuery code that automatically alters the Open Graph meta tags to include the relevant information for the current Ajax changed page.
Thanks.
You will need to have a separate url for each different page that you want to allow people to like. I would recommend actually pointing the like button to the physical pages you're trying to return via the og:url tag. To refresh the data that Facebook stores about a given url, pass that url into the linter at http://developers.facebook.com/tools/lint.
i created a rotator file for facebook share on my dynamic ajax website.
rotator.asp code sample:
<html>
<% lang=request("lang")
id=request("id")
..some sql to get data...
ogTitle=....
ogImage=....
originalUrl=....
%>
<head>
<meta property="og:title" content="<%=ogTitle%>" />
<meta property="og:image" content="<%=ogImage%>" />
.....
......
<meta http-equiv="refresh" content="0; url=<%=origialUrl%>" />
//dont use redirect.. facebook dont allow 302...
</head>
<body></body>
</html>
for example xxx.com/#!/en/153 page will share xxx.com/rotator.asp?lang=en&id=153
When you share a link on facebook it will automatically find images on the website and randomly picks one as a preview. How can you influence the preview image? When a person shares the website link on his facebook?
1. Include the Open Graph XML namespace extension to your HTML declaration
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
2. Inside your <head></head> use the following meta tag to define the image you want to use
<meta property="og:image" content="fully_qualified_image_url_here" />
Read more about open graph protocol here.
After doing the above, use the Facebook "Object Debugger" if the image does not show up correctly. Also note the first time shared it still won't show up unless height and width are also specified, see Share on Facebook - Thumbnail not showing for the first time
Note also that if you have wordpress just scroll down to the bottom of the webpage when in edit mode, and select "featured image" (bottom right side of screen).
Years and years pass and this problem with the facebook cache has not yet been solved ...
Why doesn't facebook put a button to totally clear the cache in Debug Tools ???? How difficult is that?
OK ... Now the definitive solution:
Use this on "og:image"....: ?[sequentialNumber] example: ?1 / ?2 / ?3 .....
Example of use:
<meta property="og:image" content="http://example.com/image.jpg?1" />
Did you change the image? Add 1 to the number ...
<meta property="og:image" content="http://example.com/image.jpg?2" />
Each time the image is changed, add 1 to the number
This can be done manually or dynamically, with PHP for example.
It's working really well for me, I hope I helped.
If you're using Weebly, start by viewing the published site and right-clicking the image to Copy Image Address. Then in Weebly, go to Edit Site, Pages, click the page you wish to use, SEO Settings, under Header Code enter the code from Shef's answer:
<meta property="og:image" content="/uploads/..." />
just replacing /uploads/... with the copied image address. Click Publish to apply the change.
You can skip the part of Shef's answer about namespace, because that's already set by default in Weebly.
I code a news PHP script. End of each news I have a Facebook share button. The problem is I can't display thumbnail images with Facebook share.
I tried Meta OG
<link rel="image_src" href="" />
element without any success. Interesting thing is, some of the domains which is using my news PHP Script, has no problem with it but some has.
Domain without any problems:
http://www.yenialanya.com/manset/vergi-denetmenine-itiraz.htm (please check the bottom of the news)
Domains with problems:
http://www.usakhabermerkezi.com/egitim-ogretim/usak-universitesi-rektorluk-secimleri-sonuclandi-iste-secim-sonuclari.htm
http://www.demokrathaber.net/dunya/dunyanin-ekseni-kaydi.htm
http://www.tebilisim.com/v4/siyaset/benzin-zamlardan-bizde-hosnut-degiliz.htm
I also tried addThis and it didn't solve the problem.
All of the domain names above are using the same system. I thought it might be because of the system so I tried clean HTML page:
http://www.phpsistem.com/fb/
As you can see in the last example, I used 2 different kind of sharing options. First with popup. I sent all parameters over URL but some domains display images, some don't. I also added addThis option.
I also thought about .htaccess and cleaned everything in it since I thought .htaccess might block something. I took every step very carefully which I could think of.
This issue started to be annoying, I would be glad if anyone could help me out.
Use Open Graph protocol
<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."/>
To test each links use URL Linter
Look at this forum, most of them will ask same questions, why OG image is not working on like button. It's a bug maybe? Bug 16580
Are you using a public server or a local one? Facebook share doesn't show pictures if the URLs are coming from localhost.
Facebook seems to want images that are at least 200px in both directions, whether supplied in the OG metadata, or just embedded on the page. They have updated their URL linter to show this error for the OG metadata recently. I can't find sources now, but I thought they used to have a maximum pixel dimension of less than 200px previously...
Also, I've seen problems displaying thumbnail images for Chrome on OS X, where on Windows browsers there is no problem. Really strange.
Go to http://developers.facebook.com/tools/debug and fill in your url
If the Responscode is 503 then your website is not accessible. It could be that your website is under construction…