7 ms·

Show HN: urlbox.io - Add beautiful website screenshots to your site

50 points by agurha 14y ago

flippyhead 14y ago
This seems pretty handy
joshcrowder 14y ago
This is a good idea, I actaully created something similar using PhantomJS the issue is web fonts there isn't a solution to rendering typekit webfonts using a headless webkit implementation see http://code.google.com/p/phantomjs/issues/detail?id=247 http://code.google.com/p/phantomjs/issues/detail?id=247 for more details. As soon as webkit is updated to have better support for OTF fonts urlbox will become so much better
- dubcanada 14y ago
  I'm confused as to why OTF will make everything better?
jchung 14y ago
Why?
matthewrudy 14y ago
You may need to install some unicode fonts. Try a url like http://renren.com http://renren.com and it only has certain characters.
nayefc 14y ago
Anyone else doesn't get it?
jrnkntl 14y ago
So, this is a web based API wrapped around webkit2png starting from 9.99 a month?
- blowski 14y ago
  Seems like it, though that could come in handy.
  - dubcanada 14y ago
    By the looks of the terrible font rendering it's most likely khtml2png.
- route3 14y ago
  A year of urlbox would be $120. Suppose Sue Webdev bills at $60/hr. and needs something like this for a clients website. She's never heard of webkit2png before, not sure if she has PyObjC 1.1 installed and can't seem to find installation instructions for Windows. Will Sue be able to create her own urlbox clone in two hours?
bluetidepro 14y ago
Is this product trying to compete with free plugin-in's like Screen Capture (by Google), or is it trying to be more of a "live site" preview generator that you see on like inspiration-esq sites or theme seller sites? I don't think that is fully clear in the marketing site.
TobbenTM 14y ago
Seems to not be working in Opera 12.14. Cant see any screenshots. Anyone else with same problem?
rplnt 14y ago
The webpage does not work in Opera. The top image with search is missing and the bottom ones are just empty image tags.
- stevekemp 14y ago
  It just sits and spins for me in firefox too - maybe it is too overloaded at the moment. (I did wonder if it was because the sites I tested it with were IPv6 only, but even IPv4 sites are doing nothing.)
grakic 14y ago
No flash plugin. That was a hard to solve problem for me I would love to pay for. What they are offering does not look competitive.
- bpatrianakos 14y ago
  I know how to get Flash working in case you're interested. I'm assuming here that you (and they) are both using Webkit2png. In that case what you do is install Flash ([package-manager] install flash-plugin) then... Well, the gist of it is that once you have Flash installed you need to enable plugins (-F plugins -F javascript) as well as set the wait ('-w 10' for 10 second wait before shot's taken) option so that the Flash has time to load. This article helped me quite a bit. Apparently there's a problem with the wait time so you may need to dig into webkit2png's source to fix it. http://gfdsa.gfdsa.org/2012/08/making-web-pages-screenshots-with-webkit2png-flash-included/ http://gfdsa.gfdsa.org/2012/08/making-web-pages-screenshots-...
  - grakic 14y ago
    Wait was making me a trouble. I solved it by doing a few shots by hand. But thanks for the future reference.
- agurha 14y ago
  owner here, flash support is coming very soon...
deleted 14y ago
[deleted]
bpatrianakos 14y ago
This is a great idea. I was actually working on something similar yesterday! The beauty of this is that it has so many uses! I think all the haters need to chill and think about this for a minute. Yeah, it's probably a wrapper around webkit2png but outside of HN people... 1. Don't know how to use the terminal 2. Can't install webkit2png themselves (there are a lot of things that can go wrong - just ask me because they all went wrong for me yesterday. Everything from QT4 libs missing to $DISPLAY not being set, to the PIP package not installing correctly, to X-server connection problems) 3. Even if they had webkit2png they wouldn't know how to write a wrapper that took a damn screen shot, then resized it as a thumbnail, and changes the screen size so you can see a preview for multiple devices. 4. Don't have a Linux (or even POSIX compliant) machine locally or hosted somewhere. This may seem simple here (well, to me it's more intermediate) but outside HN people will probably go nuts over this. Shameless sorta plug: I just started a project yesterday that does a very similar thing except it's meant for designers to take and store screenshots for inspiration and then plop them into a pretty UI/gallery. I'm going to open source it and host it though.
- blowski 14y ago
  By the time you've paid for the server, the time to write the wrapper, and the cost of maintaining it, $10 per month is actually pretty good if screengrabs are an inconsequential part of your UI.
  - bpatrianakos 14y ago
    Exactly! That's why this is totally worth it. Not only do most people not have the skills but it's also not so important to their core product that they need to spend all that time and effort on rolling their own. You have (or maybe you do have) no idea how many things can go wrong with these sorts of things. Both wkhtmltopdf and webkit2png are two pieces of software that have given me more trouble overall than all the time I've ever spent maintaining production and dev environments for any other purpose. This site is totally worth the $10 bucks like you say.
- agurha 14y ago
  urlbox creator here. Thanks for the comment. You're absolutely right - There are companies / developers out there that just want to add this feature to their site without spending a lot of time and resources on it. urlbox takes care of capturing, storage, caching, thumbnailing and also optionally wrapping in mobile devices
wesbos 14y ago
Is this running on phantomJS? Looks like webfonts aren't supported.
- samwillis 14y ago
  I use PhantomJS for something and they aren't supported, I believe there are a few workarounds though bu injecting additional js into the page.
micheljansen 14y ago
For a single-purpose app like this, at least it could do a better job at rendering the screenshots, if you ask me. I tried it out on my site (no custom web-fonts, pretty standard stuff) and the font-rendering looks awful: http://cl.ly/image/3S2E3Z3i412n http://cl.ly/image/3S2E3Z3i412n
- mnutt 14y ago
  It's probably related to linux font rendering.
  - bpatrianakos 14y ago
    Not necessarily. I'm going out on a limb and guessing at what they're using under the hood and if I'm right then font rendering wouldn't be the issue. I assume it's some sort of app that uses webkit to render pages then x-server to create the png. So in my experience, what's usually the problem for me is my own markup. If you're not meticulous about cross-browser consistency then this sort of stuff happens. It's not that it looks terrible, but it's just disappointing as it's not what you're used to seeing or what you want people to see.
    - mnutt 14y ago
      I can't guess at exactly what they're doing, but when I built something very similar we noticed bad font rendering across the board until we tweaked the font rendering. It's often as simple as choosing a better font to use as the default when one is not specified.
ch0wn 14y ago
I wanted to sign up, but the form had autocomplete disabled and you lost me there. What's the incentive for doing that? I never understood it.
Argorak 14y ago
Interesting question, especially as the Sony/KDE-Icon-thing is such a topic today: Is this copyright infringement? They use apple.com as an example. The grabbing process clearly doesn't happen on the client side. Even if it did, what would be the implications of using Apples website, logos and trademarks embedded in your content without user interaction?
agurha 14y ago
Here is an example of multiple screenshots rendered on same page. https://urlbox.io/demo https://urlbox.io/demo
porter 14y ago
This looks great. I've been having one heck of a time trying to get good screenshots lately. It takes up a lot of my time. I'm really interested in your service, but for whatever reason when I punch in a url it won't render a screenshot. It just hangs on the ajax spinner.
- porter 14y ago
  Also, how do you access a site behind a login wall?
- agurha 14y ago
  Hi porter, Our servers were overwhelmed by the number of requests coming through. You should try again maybe?.
onassar 14y ago
While there appear to be a number of sites operating in this space (documented some here: http://web.onassar.com/blog/2012/11/19/web-based-screenshot-services-and-software/ http://web.onassar.com/blog/2012/11/19/web-based-screenshot-...), this looks simple and straight-forward. While the cost is prohibitive for me since there are free alternatives (http://immediatenet.com/ http://immediatenet.com/), it's great to see more competition in this space. For what it's worth, I'm using it on my site http://imnosy.com http://imnosy.com
deleted 14y ago
[deleted]
handelaar 14y ago
That thing where it says "web font support" apparently means the opposite, I'm afraid.
anty 14y ago
I played around with the sign-up form because I'm designing something similar at the moment. Once I get a "username not valid" error, I can't re-enable the submit-button anymore. You might want to fix that. Also I don't think that the username was already in use, because I entered a random email. Probably a validation error. To say something positive: I like that the headline changes the last word periodically. That caught my attention.
highace 14y ago
What makes these screenshots "gorgeous" or "beautiful"? They look like pretty standard screenshots to me.
- deleted 14y ago
  [deleted]
machbio 14y ago
Thanks to URLBox, Implemented on my URL Shortner http://xgd.in/ http://xgd.in/ Checkout - http://xgd.in/viewdnsinfo+ http://xgd.in/viewdnsinfo+ Note: I am removing it, since it does not work when a person is not logged into the system - its a shame and a sham

50 points by agurha 14y ago

This seems pretty handy

This is a good idea, I actaully created something similar using PhantomJS the issue is web fonts there isn't a solution to rendering typekit webfonts using a headless webkit implementation see http://code.google.com/p/phantomjs/issues/detail?id=247 http://code.google.com/p/phantomjs/issues/detail?id=247 for more details. As soon as webkit is updated to have better support for OTF fonts urlbox will become so much better

dubcanada 14y ago
I'm confused as to why OTF will make everything better?

jchung 14y ago

Why?

matthewrudy 14y ago

You may need to install some unicode fonts. Try a url like http://renren.com http://renren.com and it only has certain characters.

nayefc 14y ago

Anyone else doesn't get it?

jrnkntl 14y ago

So, this is a web based API wrapped around webkit2png starting from 9.99 a month?

blowski 14y ago
Seems like it, though that could come in handy.
- dubcanada 14y ago
  By the looks of the terrible font rendering it's most likely khtml2png.
route3 14y ago
A year of urlbox would be $120. Suppose Sue Webdev bills at $60/hr. and needs something like this for a clients website. She's never heard of webkit2png before, not sure if she has PyObjC 1.1 installed and can't seem to find installation instructions for Windows. Will Sue be able to create her own urlbox clone in two hours?

bluetidepro 14y ago

Is this product trying to compete with free plugin-in's like Screen Capture (by Google), or is it trying to be more of a "live site" preview generator that you see on like inspiration-esq sites or theme seller sites? I don't think that is fully clear in the marketing site.

TobbenTM 14y ago

Seems to not be working in Opera 12.14. Cant see any screenshots. Anyone else with same problem?

rplnt 14y ago

The webpage does not work in Opera. The top image with search is missing and the bottom ones are just empty image tags.

stevekemp 14y ago
It just sits and spins for me in firefox too - maybe it is too overloaded at the moment. (I did wonder if it was because the sites I tested it with were IPv6 only, but even IPv4 sites are doing nothing.)

grakic 14y ago

No flash plugin. That was a hard to solve problem for me I would love to pay for. What they are offering does not look competitive.

bpatrianakos 14y ago
I know how to get Flash working in case you're interested. I'm assuming here that you (and they) are both using Webkit2png. In that case what you do is install Flash ([package-manager] install flash-plugin) then... Well, the gist of it is that once you have Flash installed you need to enable plugins (-F plugins -F javascript) as well as set the wait ('-w 10' for 10 second wait before shot's taken) option so that the Flash has time to load. This article helped me quite a bit. Apparently there's a problem with the wait time so you may need to dig into webkit2png's source to fix it. http://gfdsa.gfdsa.org/2012/08/making-web-pages-screenshots-with-webkit2png-flash-included/ http://gfdsa.gfdsa.org/2012/08/making-web-pages-screenshots-...
- grakic 14y ago
  Wait was making me a trouble. I solved it by doing a few shots by hand. But thanks for the future reference.
agurha 14y ago
owner here, flash support is coming very soon...

deleted 14y ago

[deleted]

bpatrianakos 14y ago

This is a great idea. I was actually working on something similar yesterday! The beauty of this is that it has so many uses! I think all the haters need to chill and think about this for a minute. Yeah, it's probably a wrapper around webkit2png but outside of HN people... 1. Don't know how to use the terminal 2. Can't install webkit2png themselves (there are a lot of things that can go wrong - just ask me because they all went wrong for me yesterday. Everything from QT4 libs missing to $DISPLAY not being set, to the PIP package not installing correctly, to X-server connection problems) 3. Even if they had webkit2png they wouldn't know how to write a wrapper that took a damn screen shot, then resized it as a thumbnail, and changes the screen size so you can see a preview for multiple devices. 4. Don't have a Linux (or even POSIX compliant) machine locally or hosted somewhere. This may seem simple here (well, to me it's more intermediate) but outside HN people will probably go nuts over this. Shameless sorta plug: I just started a project yesterday that does a very similar thing except it's meant for designers to take and store screenshots for inspiration and then plop them into a pretty UI/gallery. I'm going to open source it and host it though.

blowski 14y ago
By the time you've paid for the server, the time to write the wrapper, and the cost of maintaining it, $10 per month is actually pretty good if screengrabs are an inconsequential part of your UI.
- bpatrianakos 14y ago
  Exactly! That's why this is totally worth it. Not only do most people not have the skills but it's also not so important to their core product that they need to spend all that time and effort on rolling their own. You have (or maybe you do have) no idea how many things can go wrong with these sorts of things. Both wkhtmltopdf and webkit2png are two pieces of software that have given me more trouble overall than all the time I've ever spent maintaining production and dev environments for any other purpose. This site is totally worth the $10 bucks like you say.
agurha 14y ago
urlbox creator here. Thanks for the comment. You're absolutely right - There are companies / developers out there that just want to add this feature to their site without spending a lot of time and resources on it. urlbox takes care of capturing, storage, caching, thumbnailing and also optionally wrapping in mobile devices

wesbos 14y ago

Is this running on phantomJS? Looks like webfonts aren't supported.

samwillis 14y ago
I use PhantomJS for something and they aren't supported, I believe there are a few workarounds though bu injecting additional js into the page.

micheljansen 14y ago

For a single-purpose app like this, at least it could do a better job at rendering the screenshots, if you ask me. I tried it out on my site (no custom web-fonts, pretty standard stuff) and the font-rendering looks awful: http://cl.ly/image/3S2E3Z3i412n http://cl.ly/image/3S2E3Z3i412n

mnutt 14y ago
It's probably related to linux font rendering.
- bpatrianakos 14y ago
  Not necessarily. I'm going out on a limb and guessing at what they're using under the hood and if I'm right then font rendering wouldn't be the issue. I assume it's some sort of app that uses webkit to render pages then x-server to create the png. So in my experience, what's usually the problem for me is my own markup. If you're not meticulous about cross-browser consistency then this sort of stuff happens. It's not that it looks terrible, but it's just disappointing as it's not what you're used to seeing or what you want people to see.
  - mnutt 14y ago
    I can't guess at exactly what they're doing, but when I built something very similar we noticed bad font rendering across the board until we tweaked the font rendering. It's often as simple as choosing a better font to use as the default when one is not specified.

ch0wn 14y ago

I wanted to sign up, but the form had autocomplete disabled and you lost me there. What's the incentive for doing that? I never understood it.

Argorak 14y ago

Interesting question, especially as the Sony/KDE-Icon-thing is such a topic today: Is this copyright infringement? They use apple.com as an example. The grabbing process clearly doesn't happen on the client side. Even if it did, what would be the implications of using Apples website, logos and trademarks embedded in your content without user interaction?

agurha 14y ago

Here is an example of multiple screenshots rendered on same page. https://urlbox.io/demo https://urlbox.io/demo

porter 14y ago

This looks great. I've been having one heck of a time trying to get good screenshots lately. It takes up a lot of my time. I'm really interested in your service, but for whatever reason when I punch in a url it won't render a screenshot. It just hangs on the ajax spinner.

porter 14y ago
Also, how do you access a site behind a login wall?
agurha 14y ago
Hi porter, Our servers were overwhelmed by the number of requests coming through. You should try again maybe?.

onassar 14y ago

While there appear to be a number of sites operating in this space (documented some here: http://web.onassar.com/blog/2012/11/19/web-based-screenshot-services-and-software/ http://web.onassar.com/blog/2012/11/19/web-based-screenshot-...), this looks simple and straight-forward. While the cost is prohibitive for me since there are free alternatives (http://immediatenet.com/ http://immediatenet.com/), it's great to see more competition in this space. For what it's worth, I'm using it on my site http://imnosy.com http://imnosy.com

deleted 14y ago

[deleted]

handelaar 14y ago

That thing where it says "web font support" apparently means the opposite, I'm afraid.

anty 14y ago

I played around with the sign-up form because I'm designing something similar at the moment. Once I get a "username not valid" error, I can't re-enable the submit-button anymore. You might want to fix that. Also I don't think that the username was already in use, because I entered a random email. Probably a validation error. To say something positive: I like that the headline changes the last word periodically. That caught my attention.

highace 14y ago

What makes these screenshots "gorgeous" or "beautiful"? They look like pretty standard screenshots to me.

deleted 14y ago
[deleted]

machbio 14y ago

Thanks to URLBox, Implemented on my URL Shortner http://xgd.in/ http://xgd.in/ Checkout - http://xgd.in/viewdnsinfo+ http://xgd.in/viewdnsinfo+ Note: I am removing it, since it does not work when a person is not logged into the system - its a shame and a sham