I've noticed there are two different ways facebook shows an open graph story with an image in a users' feed: one with a small image and the title and description next to it (example), and one with a larger image with the title and description beneath it (example).
Following a tutorial, I was able to generate the large images. However, now that I'm leaving the tutorial and designing my own script, my posts are always shown with the small image.
Anyone has an idea what's causing this? I'm pretty sure both methods use <meta property="og:image" content="someimage.jpg" />
In order to get the large image format your images must be at least 200x200. However, with the new News Feed rolling out soon, you'll want to make your images even larger. Facebook is now recommending 1200x630 images.
Note that even if you are using an image this large, Facebook may still display your story with a smaller image format. Facebook attempts to auto-optimize the format that it shows to people by continually running A/B tests, and so your posts may show up in any of the available image formats.
We recently wrote a blog post showing the different image formats which you may find helpful.
Use an image that is at least 1200 width by 630 height.
Use the Facebook DEBUG tool to call your page again, thereby clearing the Facebook cached version that you uploaded previously at a smaller size:
https://developers.facebook.com/tools/debug/
Related
I am onto a photo project. Dynamically added a watermark in the large picture preview. But someone with general idea can manipulate the link and get the original picture. Disabling Right button seems to be useless. In this case what can be the appropriate solution?
Disable any access to original pictures. Make server script that receives picture's ID (or name) and sets watermark before picture will be shown. And make your application such way that this script only can access images by users. If manipulation with link allows users to have unauthorized access, then it looks like you have problems with architecture of project.
I properly set og:image on my website, the facebook linter sees it (facebook debugger) however, it says the image should be at least 200x200, which it is not the case, my image is 250x250 image.
What could be causing the issue? Could this have anything to do with Cloudfront?
Edit: I got around it by switching from this image to another image which is a
jpg image, but still I couldn't find the cause for the problem since the image
looks fine.
This was happening to me. I was only using the meta og:image tag. I added the following in the head
<link rel="image_src" type="image/jpeg" href="img_path" />
and it fixed the problem for me.
The thread here is pretty helpful: og:image Open Graph Warnings image size
Generally, FB's parser prefers images that are (1) measured in multiples of 100 and (2) square format.
I have experienced same error with my custom Web server ServeRick, the solution unexpectedly was to send Content-Length header with images.. without this header facebook didn't accept any of my og:image links
I was having a space in my image path of my image.
Like my image path was http://example.com/jodha akbar/image.jpg
If you observe above. The jodha akbar directory is having space.
And Facebook was not picking up the path due this special character may be.
I added a PHP str_replace function. And it worked for me.
str_replace(" ","%20",$image_path)
Converting the same image from JPG to PNG did the work for me.
Since the past few months, I've been noticing that they tend to some kind of pixelated image first which then gets replaced by a much better image.
Is this some kind of trick to reduce perceived latency by facebook?
Or is it Chrome doing it?
i think it's progressive image rendering. Quote from the linked blog
Images already render progressively in a web browser -- but you can do even better. Simply save your GIF or PNG images with the "interlaced" option, or your JPEG images with the "progressive" option.
This blog might answer your query - checkout following links -
Image Optimization Part 3: Four Steps to File Size Reduction
Image Optimization Part 4: Progressive JPEG…Hot or Not?
Trying to pull user images via the Facebook Social Graph.
Finding it odd that no matter what I upload the image as (gif, bmp, tiff, or jpg), my call to https://graph.facebook.com/507988137/picture?type=large (my pic) always returns a jpg.
Does anyone know if I'm OK assuming that his image is always a "jpg"? I'm using php get_file_contents to pull the images & would prefer not having to sniff test them for various formats.
Facebook doesn't save the original image that you upload. Instead it converts all uploaded images to jpgs of 4 different sizes to support all the different places where the image may be displayed.
In case you are interested, Facebook basically has this down to a science, in fact, I've read several times that they are the largest image hosting service in the world. More details within this Facebook blog post, Facebook Photos Infrastructure
That's because FaceBook stores it as a jpg, because that is in general the most efficient image format for pictures.
It's always a good idea to check if the data is what you expect. Checking image type is quite easy. It will always be a web format, which basically comes down to jpg, png and gif, with gif being very unlikely because of its limitations (GIF can contain 256 colors at most, and is generally larger than png. Has license limitations too).
BMP is not a web format and cannot be displayed in most browsers. You will not get a BMP from that url.
make sure you also handle the case where a gif is returned to you.
This is the default profile pic for users that doesn't update their profile pic
I have an rss reader app which works perfectly on some feeds, but on others it just displays text and no images.
Is it the feed which should be adjusted to publish images or Im sure it is something with the way I read the stream.
Why does it work for some streams(shows entire posts, images, videos etc. from e.g. blogspot rss feeds) but not for other rss feeds?
I have read that the stream itself can be set to publish different content amounts.
How can I parse the feed so that all feeds will work correctly?
It's very likely that it's due to the feed themselves... and not to the reader app.
Feed publisher can decide whether they want to include all or parts only of their content in their feeds (RSS or Atom).
Then, even if they publish all the content, they may decide to publish it as raw text (just the text content) or full XHTML, which would allow the inclusion of images.
Unfortunately, there is little that you can do, except maybe ask the developer of your app to allow to show the original site/page and not just the feed entries.
Ok, so what are the differences between the feeds that work and the feeds that don't? What assumptions do you make about the RSS content, and in what situations are those assumptions not satisfied? When you run the code in the debugger, what do you see when you encounter a feed where images don't work? Also, what code? ;)