I've just added the Facebook like box to www.glasgow.ac.uk/careers.
It seems to be working fine, except that photos are appearing stretched/distorted in the box (i.e. one at the moment is about twice the height it should be.)
We've changed from the default box width, but even at the default this was happening with our pictures. Is there any way to fix this?
Many thanks,
Jamie
Jamie:
Based on multiple examples, I have inferred the algorithm that Facebook are using to resize photos in the Like Box. It's unusual and it's not one that I would choose. I suspect that when they get a handle on what they're actually doing, they will change it.
But right now, as per my calculations, the only large photo size that will shrink without squeezing, is 170 x 320.
David
It should also be noted that the CSS that Facebook uses in the iframe has a max width of 120px set.
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 been looking for the pixel width of the facebook homepage, excluding the page ads and your profile options, such as MESSAGES and News feed.
I have tried searching for it, but my answer is not found. Please let me know if you have the answer. (And if you have facebook on max size on your browser, if that changes anything, but I mean like the full width of the full size web-browser.)
Thanks.
If you want to know things like this, and you know your way around a graphics editing program, make a screen shot of the FB page, load it into your editor and measure in there.
These programs e.g. all show the size of the bounding rectangle if you make a rectangular selection of the item you want to measure.
This does not work if the objects in the web page size with your windows browser size, but even then you can often calculate a size by e.g. subtracting sizes of fixed elements from your browser window size.
I have been scouring the Facebook docs and Stack Overflow to try to find a way to set the Open Graph image meta tags declaration to none or blank. I cannot find this anywhere, which is strange because I would almost be certain someone would have wanted to do this before, too.
I can find nothing.
My next guess -- to pull this off -- would be to set the OG meta image to a blank gif or png. This seems kind of hacky, but if there is no way officially to set the OG image tag to blank or none, is this the best (and only) way to do it?
I think you've answered your own question. There is no way to do it in the Facebook API docs. You could try setting the meta data to a blank or white image and see if it works.
I hope that helps, even tho its not much of answer.
After extensive research, I also tried the transparent image route, and while it does appear to get used by Facebook, there are various difficulties that made it unusable in our case.
I attempted both a 1x1px transparent og:image (which Facebook
ignores, because it doesn't meet Facebook's minimum specs (i.e., the image must be at least 200x200px).
This led me to a 200x200 transparent PNG, which is used, but it presents a blank white image to the left of the article presentation (Facebook preview of a 200x200px og:image).
I even attempted to set the width and height (OG) tags, and set it to 1px wide and 1px tall (though the actual image was 200x200). This seemed to achieve the desired result in Facebook's Object image debugger (i.e., no image on the left, just showing article text), but this success was short-lived. When I posted this same test to my actual Facebook news feed, the width/height attributes were ignored, and the image was again a square (200x200px) white box to the left of the article presentation.
So we landed on using a default image (company logo), giving up hope that Facebook would allow us to force the omission of an og:image.
I'm trying to optimize our News pages for iPhone. One problem I've noticed is that I'm able to tap and move the page horizontally (i.e. wiggle).
My question is, how I can prevent this horizontal movement from happening?
All of our News pages have this problem. Here are a couple examples:
With picture
Without picture
Something is definitely set greater than your device width. Add the following to your css to find the culprit.
* {
border-style:solid;
}
You can then narrow down your search by setting border-color:red; to individual classes/tags/ids.
Add "overflow-x: hidden" on the body.
You can try setting user-scalable=0; and see if that has any effect.
This just happened to me too and it was the result of an extra closing div tag. Once I removed the extra </div>, the horizontal "wiggle" didn't happen any more.
I too, had the iPhone "wiggles" on a web page. It ended up being caused by an image that was wider than the column width it sat in (it was the last column in the row using Twitter Bootstrap). You might be thinking "obvious", but it's hard to spot when the image background matches the page background.
Just make the image responsive, or smaller than the column width - that solved it for me.
Taking the idea from other websites, most of big sites have a mobile site. look at those (the only one i know is facebook m.facebook.com) you can maybe see how the css is done. possible way of doing this is %. I would suggest to take out the sidebar for the mobile version. big pictures should be taken out or be resized so the browser doesn't have scroll bar side to side.
Currently I'm trying to edit a login screen for a web based application. As of now, I have the login prompt (user & password) at a particular place on page so that it corresponds with the background image. Right now this image is set to 1024x768.
What I was wondering, is there a way to have the background automatically scale depending on users own resolution while have the login appear at the correct location? I'm not sure if this is possible but thought someone might have some advice.
I've made a jsFiddle solution that can come in handy:
Click here to see background-resizing at work
It works with jQuery, and I've commented most code so you can understand how it works. You compare the aspect ratio of the image and the browserwindow, look at the difference and then resize the width or height, based on how the aspect ratio's are comparing. The css is also worth a look.
I tested it in Firefox and IE(7/8), but jsFiddle resizing is a bit buggy in IE.
Good luck!
Update:
I've made an updated jsFiddle here.
In this scenario, the message box (in your case the loginbox) is positioned absolute with percentual offset to the top and right. I also gave it percentual width/height, although that might not be neccesary/wanted. But you can tweak this to see how the box behaves with different window sizes.