I use Opengraph to define the facebook share image.
I upload image APPLE.jpg in my article.
The meta tag is
<meta property="og:image" content="http://example.com/APPLE.jpg" />
Then, I found I uploaded the wrong image.
I edit the article and removed the APPLE.jpg image.
I upload a new image BANANA.jpg
<meta property="og:image" content="http://example.com/BANANA.jpg" />
While I share the article to facebook.
The image is still showing APPLE.jpg image.
How do I settle this?
Facebook keeps your image in cache. So if you have changed your image, but kept the same name, you have two solutions :
Use the Facebook debugger and fecth new scrape information. If the image doesn't change, use the second solution.
Change the name of your image, and Facebook will cache the new image.
Related
I have generated the following url to share the page into facebook,
https://www.facebook.com/dialog/feed?app_id=195106440518444&link=https%3A%2F%2Fwww.capella.edu%2Fcapella-experience%2Fflexpath%2F&picture=https%3A%2F%2Fi.pinimg.com%2Foriginals%2Fdd%2F56%2F37%2Fdd56376f6bb3f69130ec3216a13ec99c.jpg&name=Capella+FlexPath&caption=FlexPath%3A+Your+degree.+Your+pace.&description=With+FlexPath%2C+you+can+still+build+the+career-advancing+skills+and+knowledge+you+need%2C+but+with+a+class+schedule+entirely+controlled+by+you.&redirect_uri=https%3A%2F%2Fwww.capella.edu%2Fcapella-experience%2Fflexpath%2Fflexpath-trial-course%2F&ext=1519158959&hash=AeY6NpBp29iik5NI
While hit on the above link, I couldn't see the picture. And I know the picture attribute is deprecated. Then I have tried to use the other way,
I can achieve the same thing with the help of meta tag,
<meta property="og:image" content="https://static.xx.fbcdn.net/rsrc.php/v3/ye/r/lWB96Z8sFtt.png" />
If I have include this meta tag in my page the image will display.
But I would like to display the picture dynamic also same page I would like to use different image on different shares.
Please provide suggestions If you have a idea.
I need to share an image from my webpage to Facebook.
I've looked at Facebook's dev pages, and it you need to add meta data to your page - you may specify an image - this will then be shared.
The problem is I have a number of images on my page.
Is it possible to share specific images - where should I be looking in the api?
If you have a bunch of images and want to select a particular one during sharing, then you can add multiple og:image tags - one for each image.
<meta property="og:image" content="http://image1.jpg">
<meta property="og:image" content="http://image2.jpg">
<meta property="og:image" content="http://image3.jpg">
...
Once you do this, on sharing, the user will be able to select from one of these images.
Also after you add these tags, make sure that you force a re-scrape to update your OG object: pop your url into the URL Debugger and 'Fetch new scrape information'.
I've added a FB share button to a page on my site, using this method: https://developers.facebook.com/docs/reference/plugins/share-links/
Source code looks like this:
<a href="https://www.facebook.com/sharer/sharer.php?
u=https://[subdomain].mysmilecentral.com/public/show?link_code=[access code for individual's photo]" target="_blank">
<img src="https://[our S3 bucket]/images/fb-share-btn2.png" style="margin-top: -35px; margin-right: 126px; float: right" />
</a>
I've got the FB Javascript SDK loading asynchronously, and am using OG meta tags:
<meta property="og:url" content="https://[subdomain].mysmilecentral.com/public/show?link_code=[access code for individual's photo]" />
<meta property="og:title" content="Order Pictures of [child's name] at [studio name]'s MySmileCentral!" />
<meta property="og:description" content="View images and/or order pictures of [child's name]." />
<meta property="og:image" content="https://[our S3 bucket]/[path to JPEG image]" />
Facebook's Object Debugger finds everything without a problem.
However, the Share Dialog doesn't show the thumbnail image defined in my og:image tag until I refresh the page. Every subsequent time that image is shared the thumbnail properly displays without needing a page-refresh.
What's the issue here?
For anyone revisiting this issue, as of approximately Nov. 11, 2014, Facebook has provided a better solution than previously mentioned. According to this FB bug report:
If your site provides both og:image, og:image:width and
og:image:height, that image will be used even for the first share
created. Failing to provide these means that you will need to wait for
our crawlers to fetch and analyze the images first.
See http://ogp.me/#structured for an example of how this can be done.
Can you confirm that your image is valid:
og:image – This is an image associated with your media. We suggest that you use an image of at least 200x200 pixels. However, bigger is better, so if you have a 1500x1500 image that you can use, please use it. We'll downsample and crop it for for people using smaller-resolution devices but will use it on a larger device. The larger this image is, the more likely it will be used when sharing stories on Facebook. (Note: image sizes must be no more than 5MB in size.)
From Facebook: Maximizing Distribution for Media Content
EDIT:
Clear the cache of your browser.
I faced similar issue, submitted a bug to Facebook: https://developers.facebook.com/bugs/354887144656001
The first share issue appeared to be known bug to them, and there they suggest a workaround (submitting the new page to FB Debugger programmatically right after page creation).
I would like to know how I detect a image from a webpage.
I want a code that if I want to share something on facebook the image from the page where I am at that time, automatically detect.
example:
<meta property="og:image" content="http://www.geturl.thedoctorofhouse.com/audi_a3_2.jpg" />
What should I do with the og:image content?
Yes, that looks correct - content should contain the url to the image that you want used.
You can check how the page metadata is interpreted by using the linter tool provided by Facebook
I was wondering if it is possible to have the post that the like button shows on the facebook feed not show any image but rather just a link like it used to.
I don't think so, but you can try setting your og:image meta take a blank image:
<meta property="og:image" content="http://www.domains.com/img/spacer.gif" />
The test it here to see if it's being pulled properly: http://developers.facebook.com/tools/lint/