7 ms·
Show HN: Add a “1” to your Hacker News URL to get fancy social previews
For example, paste this into Slack or Discord or whatever: https://news.ycombinator1.com/item?id=30179549 https://news.ycombinator1.com/item?id=30179549
It works with comments, too: https://news.ycombinator1.com/item?id=30180253 https://news.ycombinator1.com/item?id=30180253
Hastily-developed source: https://github.com/statico/ycombinator1.com https://github.com/statico/ycombinator1.com
- statico 5y agoFYI, this uses the Hacker News API which I didn't know existed until researching this: https://github.com/HackerNews/API https://github.com/HackerNews/API
- throwaway889900 5y agoShame that there's no oEmbed endpoint.
- loceng 5y agoI also wish it provided upvote and downvote totals, and not solely the final score - it'd allow more a lot more experiments of differing ways to display threads and comments.
- throwaway889900 5y agoI disagree, there's good reason for hiding those totals from users, in any way.
- loceng 5y agoWhat are the reasons, and are they all trying to prevent gamification or?
- pjc50 5y agoAFAIK none of the APIs provide comment votes; you can only get the votes on your own comments, and only by scraping the web page :(
- raevilman 5y agoYep true,. I use the same approach to run weekly top 30 hn show newsletter.
- titaniumtown 5y agoI had no clue that existed! Interesting.
- jrockway 5y agoIs this just some random person that bought ycombinator1.com and added features, or an official thing?
- notRobot 5y agoThe former
- deleted 5y ago[deleted]
- tedmiston 5y agoI can't think of a reason an official thing would be rolled out on a separate domain.
- jrockway 5y agoAh, the other comments implied that it was their staging environment for testing new features or something, but that appears incorrect. Now that I'm matching HN names up with Github names, it all makes sense. I personally wouldn't register someone else's domain with a 1 on the end, just because of fear of trademark law, but I guess it worked out this time.
- bestnameever 5y agofor now. I'm pretty sure they will want to protect their trademark.
- statico 5y agoYes, that was me. I'm pretty random.
- ffhhj 5y agoOk, give me a number.
- 5y ago
- kroltan 5y agoI also get a preview using the usual URL, arguably more useful information like an absolute time stamp that won't get out of date. https://i.imgur.com/YAEEesv.png https://i.imgur.com/YAEEesv.png
- dijonman2 5y agoI can’t help but think this is a terrible idea from a security perspective.
- joombaga 5y agoWhy?
- jedberg 5y agoYou're technically right, if a lot of people use this, the owner of ycombinator1.com will have a lot of info about who shares which URLs and could actually change the redirects to whatever they want. That being said, it's probably not much of an attack surface given the transient nature of the links.
- statico 5y agoAs of right now, I have almost zero information about who is using it. It's currently running on Vercel as a hobby project, and I've already used my single free analytics add-on for another project. (Will I run out of free Vercel function execution credits or whatever? Probably. We'll see, I guess.) EDIT: Vercel gives me a realtime function log but it's pretty basic and has no statistics: https://cln.sh/WlXBSY https://cln.sh/WlXBSY
- jedberg 5y agoI believe you, I’m just saying in a zero trust world it’s a risk but a small one.
- deleted 5y ago[deleted]
- pininja 5y agoPretty clever. Thanks for posting the source too - I learned something new about how these social previews are implemented!
- statico 5y agoSure thing! Also check out https://socialsharepreview.com/ https://socialsharepreview.com/ which is great for larger social previews. I chose to go the more compact route for these previews because a giant orange "Y" logo for every link isn't very helpful.
- caffed 5y agodoesn't work anymore as it just redirects. assuming author was told to take site down.
- TacoSteemers 5y agoThe redirect is for the humans. The page that does the redirect is for the applications, like Slack and Twitter. They will use the meta tags on that page to show a "social media preview".
- ryandrake 5y agoWould have been helpful for OP to mention that in the summary. I also couldn't figure out what it did. I just clicked the links and they redirected. No clue what a "fancy social preview" is.
- axegon_ 5y agoIt appears to be redirecting me back to the original one: https://i.imgur.com/gbonKb9.png https://i.imgur.com/gbonKb9.png
- riedel 5y agoIt is on purpose. You only see a difference when posting the link in a messenger or social media post with link preview.
- lilyball 5y agoTo those confused: It looks like this only adds social graph info but is otherwise a redirect. The resulting page looks like <!doctype html> <html> <head> <title>…</title> <!-- lots of <meta> tags --> </head> <body> <script> document.location.href = "https://news.ycombinator.com/item?id=30180253"; </script> </body> </html>
- spiffytech 5y agoA better option would be using the HTML meta tag to perform the redirect, since HN has a bunch of JS-avoidant users: <meta http-equiv="refresh" content="0;url=https://news.ycombinator.com/item?id=30180253" />
- statico 5y agoHappy to add this. Do you happen to know if this affects systems doing the scraping for social previews, which are already parsing meta tags?
- nhoughto 5y agoYou could probably just do both? Once a redirect has fired, off you go..?
- Klonoar 5y agoCurious if there's reasoning against just checking the user agent and sending back the HTML with OG tags for them, but then straight up HTTP redirecting in all other cases? I feel like any reputable agent calling for open graph stuff is going to be labeled correctly, though I'm open to being wrong.
- spiffytech 5y agoIt'll depend on the system doing the scraping. If it's just fetching the HTML with curl or similar, using the meta tag shouldn't be any different. I'm not familiar with HTML parsers that follow meta redirects. But if the scraper is using Puppeteer, either approach will result in the redirect being followed and the Open Graph data being ignored. For example, Microlink follows the JS redirect and seems to ignore your Open Graph data: https://microlink.io/meta?url=https%3A%2F%2Fnews.ycombinator1.com%2Fitem%3Fid%3D30181167 https://microlink.io/meta?url=https%3A%2F%2Fnews.ycombinator... Scraped data at this time: https://i.imgur.com/pRLIt0S.png https://i.imgur.com/pRLIt0S.png This is normally the behavior you want from a scraper: if someone pastes a bit.ly / t.co link you want the link preview to show data on the other side of the redirect. You could try to figure out how to distinguish between a scraper and a human operator, but that'll be tough, since people work very hard to make Puppeteer look 100% legit.
- judge2020 5y agoNote that the redirect is intentional. This is specifically for opengraph tags appearing in Slack, Discord, Facebook, etc. This is what it looks like in Discord: https://i.judge.sh/XWc64/D_jqGLfScD.png https://i.judge.sh/XWc64/D_jqGLfScD.png
- capableweb 5y agoAs someone who never uses Slack, Discord nor Facebook (mostly IRC), how does a HN link look if you're not using that service? I'm not sure I understand the difference, is it just the icon/image on the right/below that is different?
- reustle 5y agoThe second link in the screenshot is an example without the service
- capableweb 5y agoAha, so the added information is number of votes (at indexing time? Reading the chat message time?), comments, relative timestamp and the logo is at the right instead of below with absolute timestamp. Got it, thanks!
- jedberg 5y ago> number of votes (at indexing time? Reading the chat message time?) At the time it was read from the server, which in most cases is when the sender hit send.
- Gigachad 5y agoIt’s more important on other services. Telegram won’t get a title at all, it just leaves the link without any preview because these tags are missing.
- statico 5y agoI added some example screenshots to the README: https://github.com/statico/ycombinator1.com#readme https://github.com/statico/ycombinator1.com#readme
- rcarmo 5y agoI wouldn’t mind having this as an official feature, TBH. It’s just a few meta tags and makes it a lot easier to figure out if the link is worth following in Slack/Teams/etc.
- statico 5y agoThe source code for this is in the public domain. If anyone wants to copy the behavior, there is no reason to consult me first.
- deleted 5y ago[deleted]
- nhoughto 5y agoHandy, I’ll probably forget the 1 suffix tho. Ycombinator-meta.com or smth might be more memorable, that’s my problem tho I guess =)
- statico 5y agoThis was my second choice. I tried to register hackernewssuperlinkpreview.pizza but it was taken.
- dstroot 5y agoHN Team - could ya'all just add the OG tags? Geez that would be swell...
- fouc 5y agoSuper handy! You solved a pain point I had. I sometimes want to drop HN links in Slack, but the lack of preview makes me hesitate or forces me to go an extra step and set a name on the link.
- tumidpandora 5y agoI built a version with open graph meta tags - https://presbot.com/feed/ https://presbot.com/feed/
- 123jc 5y agoconda install -c conda-forge scrapy
- mongua 5y agoI don't get it, can somebody explain it?