Ihave a sharer FB popup window on my site. It worked, but for some time it doesn't show an image of a page. My code of the link:
<a title="Opublikuj na Facebook" onclick="window.open('http://www.facebook.com/sharer.php?s=100&p[summary]=Sebastian+%C5%9Awiderski%2C+by%C5%82y+reprezentant+Polski+i+trener+Zaksy+K%C4%99dzierzyn+Ko%C5%BAle%2C+potwierdzi%C5%82+sw%C3%B3j+udzia%C5%82+w+meczu+gwiazd+dla+hospicjum.+Pojawi+si%C4%99+r%C3%B3wnie%C5%BC+Piotr+Makowski%2C+szkoleniowiec+reprezentacji...&p[title]=Kolejne+gwiazdy+potwierdzaj%C4%85+sw%C3%B3j+udzia%C5%82+w+turnieju+dla+hospicjum&p[url]=http%3A%2F%2Fsalps.szczecin.pl%2Findex.php%3Fcontent%3Dnews%26view%3D285937&p[images][0]=http%3A%2F%2Fsalps.szczecin.pl%2Fzdjecianewsow%2F285937_1.jpg', 'sharer', 'toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)"><img src="maingraphics/f_logo.png" alt="Facebook logo"></a>
What can cause, that image is not loaded? It is public and anyone can access it.
Any ideas?
Your picture is too small, which only 100*66 pixel. The document at https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ stated:
og:image – This is an image associated with your media. We suggest
that you give us an image of at least 200x200 pixels. However, bigger
is better, so if you have a 1500x1500 image that you can use, please
give it to us. 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.)
I do a quick test and noticed that 200*200 pixel also got problem. So i recommend you using higher resolution picture if possible.
Related
I've been banging my head against the wall with this issue and I hope someone can help:
I have a page that I'm sharing on Facebook (currently using the js sdk / fb.ui / method: 'share'), the flow works fine, the page gets shared BUT the preview of the page on the user's wall or feed sometimes shows a square image sometime shows a rectangle image.
I have set the open graph tags properly on the page and the scraper seems to find everything fine, but I still get this inconsistency when it is displayed on user walls. Is there a way that I can specify 2 different images (one for square presentation another for rectangle)?
One more thing, the image that I have specified on the og:image tag is exactly 1200 x 630 pixels, as per the best practices docs.
The problem is that Facebook will crop pictures that appear to have white space on the sides. To avoid this problem, fill the sides with a different color (like a light grey). Also sometimes the preview image seems to be cached on FB servers longer than it should be, especially if you haven't changed the filename. You can use FB's debug tool at https://developers.facebook.com/tools/debug/sharing to preview image links for any URL before you insert them.
https://developers.facebook.com/docs/sharing/best-practices#images
Since you said that the image is 1200x630, there should be no problem. That being said, Facebook decides how the posts look like and there is nothing else you can do. It depends on several factors afaik (how many likes, how many spam reports, ...).
Facebook will crop pictures that appear to have white space on the sides
They don't seem to do that with me. They just hack it into a square, usually centered (I'm assuming we're talking about general pics in posts, and not profile pics.)
What I've had to do is make the image square by adding dummy filler strips to the top and bottom for landscape pics, or to the left and right sides for portrait. I'll have to be careful if I use white filler.
I've used a resizing program to resize my image to the requisite 100 by 155 pixel dimensions for the banner image; but when I upload it I get an error message saying there's something wrong with the dimensions. The image I'm uploading is a stock photo I've purchased and have full rights to, meaning it's not home made. Any idea what else the problem could be. The program im using is pretty old and standard. Is there a specific one that can be recommended that is straightforward and won't give me an error on the facebook details page?
Sorry for misunderstanding,
Check out these instructions here:
https://developers.facebook.com/docs/guides/appcenter/#uploading
Especially those:
Don't put logos and text against the border of images.
Make sure banner images fill out the frame completely (and that they leave no white space, no rounded edges or no borders).
Round the edges of icons. We recommend that you use transparency and PNG, not GIF.
If your problem persist, Try another program. Personally, I use Adobe photoshop (Actions) to generate all graphics for my facebook apps, also there's tons of other programs that can help.
If you mean facebook cover Photo by banner image then the optimal size for it is 851px by 315px.
Here you'll find a quick Reference for Facebook Timeline Image Sizes:
http://laurenproctor32.com/tag/facebook-image-size/
Have a nice day.
I am using the facebook plugin on my wordpress website. My posts are image-only. I am able get the open graph functionality to work, however the image is either a tiny thumbnail with a useless excerpt box beside it, or full-sized with half of it cut of because of the useless caption box.
Now, I say useless, but I wouldn't mind having only my url presented below the image if possible, but without all the extra space. It looks terrible. Also, My image posts do not have titles so in the excerpts box the only title option without a separator for the "collection" theme I am using is sitenameonly....which leave my
sitename
site url
< .........huge extra excerpt space..............................................................................................................................................................................................................................................................................................................................................................>
I have looked elsewhere, in fact all over but can't find information to:
make images full-sized (as if they were posted directly to facebook)
Remove extra space in the excerpt box, leaving only the url
(or remove the box entirely--leaving a full-sized image)
thanks so much in advance
As long as your Wordpress plugin assigns a proper image to each post using the og:image tag and the conditions stated below (emphasis added) then you should be able to get full size posts.
We've increased the size of images in link page posts by 4x on mobile
and 8x on desktop to help you drive better fan engagement. As part of
this change, we've also made the aspect ratios for images consistent
across mobile and desktop. We recommend the following steps to
optimize your images for this new format:
Use images that are 1200 x 630px or greater for the best display on high-resolution devices. At the minimum you should use images that are
600 x 315px to display link page posts with larger images.
Use images that have an aspect ratio of 1.91:1. Try to keep your images as close to this aspect ratio as possible to avoid any cropping
in News Feed.
Use the og:image tag to choose the image that you want to share. If you don't use the og:image tag, users can choose the image they want
to post, giving them a chance to select an image that is poor quality.
Source: Larger Images for Link Page Posts
share image doesn't refresh on pravoved.ru
We have changed all the pictures, for example og:image attribute picture about a week ago, but it doesn't refresh, so if you click facebook share link in the footer, you will see still croped picture. How to change it? I've tried everything. For example, using of this service https://developers.facebook.com, and i have pasted such a javascript code "&p[images][0]=" + "http://pravoved.ru/images/pravoved-avatar.jpg"
But it doesn't work.
you will see still croped picture
That is your actual og:image http://pravoved.ru/images/pravoved-avatar.jpg, but as you said, it gets cropped by Facebook.
In the share dialog, when you inspect the preview image, you can see its URL is
https://fbexternal-a.akamaihd.net/safe_image.php?d=AQAtXVeqx7Q9IPa8&w=100&h=100&url=http%3A%2F%2Fpravoved.ru%2Fimages%2Fpravoved-avatar.jpg&cfs=1&upscale
– so you can clearly see that the value of the url parameter is what you want it to be.
If you change the last parameter of that URL to upscale=0, you can see it is exactly your image (cropped to square). (You can’t do that in the dialog, of course – I’m mentioning it just to prove the point.)
Your original image is only 100 x 103 pixels big, whereas Facebook recommends using images that are at least 200 x 200 pixels. So swap your image for a bigger one, and ideally totally square. Facebook says 600 x 600 px is good (for retina displays on mobile), and they even say somewhere that if you have an image of 1500 x 1500 pixels you should feel free to use it, “the bigger the better” (within reasonable limits, of course).
We're using the facebook graph API http://developers.facebook.com/docs/reference/api/post/ and adding the picture parameter. Our picture is a 30x30 pixel image, which is exactly the size we want for the facebook web version. However, the image will be pixelated when using the FB mobile app on an iPhone4 (retina display).
Is there any way to serve a 60x60 high resolution image, but render it always at 30x30 for facebook wall posts?
Well.. as of this moment, here is what I have found out, and offer a 'solution' that has worked for me based on the time i've had to test & play with this concept. For all the readers out there, who need a quick answer to the question, i don't have the exact solution to the question, but…. Essentially, your 30x30 image is being scaled to 90x90. The 60x60 image is being scaled to 90x90. And I can not find a way to go around this.
Below is what I have tried. Feel free to add input.
Take your feed image, and stroke a 2-5px black line around the frame of the image.
Load up your app, initiate a wall feed on the device. With the image present, take a screenshot. Mail yourself the image. Open it up in Photoshop (or photo editing program). Use a Marquee tool to outline the image. Cut it out of the screenshot and paste it as a new image. What size is it? 90x90, right? (and obviously 180x180 if image is retina)
Create a 90x 90 image. Copy your original 30x30 image and paste it anywhere you want within the new 90x90 images' frame. Upload it to the URL parameter's location. Re-run your app. By re-running it, i mean you have to shut it down completely, it appears as though the SDK is cacheing the image upon first launch of the feed and you can clear that cache by closing the app completely, and rerunning it. When you do, you will see significant improvements with the look of the image. It may not be a retina image, but it at least won't be 'fuzzy ugly'. At this point, it boils down to how nice of illustrative lines that where done in the design process to remove the aliasing effect produced from the conversion to a raster graphic. As well, i'm not sure if a variation of resampling method will produce even better results.
Some things i've tried:
I've also saved it as a png file with no transparency : 144ppi at 90 x 90 size. In other words, save your 90x90 image with a higher resolution (pixels per inch). Remember to not constrain proportions as you image resize. And note that If you are using adobe products, i.e. photoshop ) - don't save for web, just use 'save as…', as this will retain the ppi you specified. Although, i don't believe i see much of a difference in the quality which this is displayed going this route, and best to try to keep the file size down as this will increase the overall image size by about 500% or more.
I've tried variations of hosting the image twice the size (180x180) within the same hosted folder and naming it image#2x.png & image-large.png <--(just for the heck of it). This is not really solving the problem either.
Some other things I have not tried:
Monitoring your web server traffic, and any "not found" errors to a resource to see if FB is trying to access an a potential alternate resource when grabbing your image for display, the wall feed box that comes up is a webview. Meaning web graphics. (It's FB's web page…meaning their rules, and i doubt the pages' source is available to dabble with within the SDK.. so!…
Look at the HTML of the feed itself with safari browser:
The inspection of the HTML within the final resulting image that is posted on my FB wall I can see this….
<img class="img" src="http://platform.ak.fbcdn.net/www/app_full_proxy.php?app=153675474666495&v=1&size=z&cksum=773bba91f6146b2463eed0a0bb77dc42&src=http%3A%2F%2Fwww.thumbwizards.com%2Fspeakinapps%2Fgraphics%2Fboxed%2Faussie.png" alt="">
I am wondering:
Within HTML5 isn't there a mechanism to provide a toolkit type of javascript to display retina graphics from a web page?
Would it be possible to have that code run when grabbing the url to the image (in meaning, the url of the image would be acting as a pointer to the code.? I haven't tried playing with this, since my logic tells me that per the url above that FB is essentially taking control over the image at this point. I have noticed (and not waited long enough to see) that the image is apparently cached and posting to the wall with a new image, sometimes results in the older image still being used. (and yes, i've cleared my browser cache)… perhaps simply cached in another location..
If there is another parameter for the image type, that is not published, I have not stumbled across any yet.
Can anyone figure out if through source of:
[http://platform.ak.fbcdn.net/www/app_full_proxy.php] if this php file is part of an available image processor out there we can access to view what could be done?
Can anyone mention an app that uses a retina graphic in their feed post?
Just thoughts really, I've decided to not really give a crop, and if
you've made it this far. Thanks for tuning in. ..So, Sulf, your 30x30 is being scaled to 90x90. making it UGLY!.
Good luck.. If you figure anything else out, let me know!
Mark
apple specify that if you want to add the retina effect for your ios app then the images you are using in this format -i.e
sampleImag.png- 57*57(size) , 163 (DPI)
sampleImag#2x.png - 114*114(size),326 (DPI) when you use these specific graphic images you will get your app is showing retina effect in iphone 4 and above generation.
Just point your code to a larger scaled image and Facebook will take care of the rest.