Subscribe
Sign in
Snaplink
Generate dynamic social preview images
Start new thread
Théo Champion

Snaplink - Generate dynamic social preview images

by
Snaplink lets you generate custom link preview images for your webpages from code ✨ 1 - Design your preview with HTML / CSS and {{vars}} 2 - Copy your generated Snaplink URL 3 - Paste it as your site

Add a comment

Replies

Best
Théo Champion
Maker
Hey PH, Snaplink.dev co-founder here 👋

 Social preview images are designed to show users a snippet of your webpages when shared: it's the first thing users see, like a storefront, a social preview image should be informative and awesome. Strangely, we often see websites using the same static preview image on all their pages, or sometimes no preview image at all. Even big sites like Reddit and Twitter show boring and unhelpful previews on most of their pages… Why? Because creating social previews that changes according to dynamic page content is a real headache for developers. We built Snaplink to provide an easy way for developers to generate beautiful dynamic preview images programmatically. It does that by generating images on-the-fly from a template you design in HTML / CSS and variables injected in the URL itself. Here are a few example templates: Zink.tips profile pages (preview of the user with some metrics): https://snaplink.dev/11ec144ef0?... Feather blog articles (showing article title, author, etc...): https://snaplink.dev/0fc7eca4e9?... 

Features: - Plug-and-play online editor - Design your social preview with HTML / CSS and {{vars}} - One-line integration in your code - Free and no account required
Vasanth Srivatsa
The implementation is really dope 🔥 No more, SDKs, including JavaScript snippets, just render a URL with data and you get an custom designed, top-quality social image 👏 I started using it on my blog, here's my design 👇 https://snaplink.dev/290879aeb9?...
Théo Champion
Maker
@vsnthdev thanks Vasanth, means a lot! Just checked out your design, looks great!
Théo Champion
Maker
@vsnthdev Is it okay if I share the link to your template on twitter ?
Vasanth Srivatsa
@theo_champion Yes that would be awesome 🤩 do mention me. My username is @vsnthdev on Twitter.
Noémie
Are images generated at a set time interval? Else how does it show changes in real time?
Théo Champion
Maker
@noemie_roches Images are generated on-the-fly, so it always show the latest data ⚡️
Jha
Super exciting product. link previews are so important!
Théo Champion
Maker
@shivam_jha3 Agreed! So important, yet so often neglected!
Basharath
This is amazing. How are you generating images on the server, through canvas, or by headless browser? Congrats on the launch.
Théo Champion
Maker
@basharath Glad you like it! Images are generated on the server by a headless browser (chromium engine)
Karim Saif
AWESOME🎉
Théo Champion
Maker
@karimsaif Thanks Karim!
Dima Zubchenko
Very handy. Any plans for future development of this or you want to keep it small?
Théo Champion
Maker
@professordz we'll see the response from developers, but we have tons of ideas for the future!
Aleks Dahlberg
Nice, solves a problem literally a decade old...
Ale Cher
cool product! upvote for your work 🎇
Théo Champion
Maker
@chervon_al Cheers! Let me know if you have any feedbacks ;)
deepu
congrats
Oleg Bolotnov
Looks cool! You guys need to collaborate with Hyperise
Théo Champion
Maker
@oleg_bolotnov I dont know about them, I will look into it thanks !
Tom P.
I really like it! Have a look at Bannerbear, Placid.app Robolly and others. Hope you will develop this further. Maybe launch a marketplace for more designs? What would be really great is to be able to define the name of the image generated. And then this could bcome a cool bulk image generator for no coders if you offer a google sheets template.
Théo Champion
Maker
@torsten_p Glad you like it! We looked at other image generation products but couldn't find enough customization there, so we made it! And I agree, the next step should probably be heading towards no-code solutions
Dmitry Shpak
Looks nice for email marketing, doesn't it?