Custom share images
by Mubashar IqbalI now automatically generate custom share images for each of the podcast episodes when they are submitted to Pod Hunt.
I think it's a hidden detail that really helps to get attention to the links when they are shared on social media sites.
I usually get questions about how I do this, so I wrote about how I implemented it, as well as a no-code option I've used in the past.
https://practicalmvp.com/blog/generating-custom-share-images
If you have any questions just let me know!
-
2
Wow, so timely! I literally just built a little service to do this as well, it’s called Link Cards. It’s only a week old, but I’m already using it to generate the images on another site I am building, Pkg Stats.
Link Cards is similar to your setup, you create a project that generates a subdomain to use within the meta tags of your site, (ex.
https://pkgstats.linkcards.io). And the full url to generate the image is just that subdomain, plus a url encoded string of the page to screenshot on your site,https://pkgstats.linkcards.io/https%3A%2F%2Fwww.pkgstats.com%2Fshare%2Fpkg%3Areact.jpg?url=https%3A%2F%2Fwww.pkgstats.com%2Fpkg%3Areact(the addedurlquery parameter is not necessary for the screenshot generation, but lets you associate the page you are screenshot’ing to the page that is being shared by the image so you can easily link back to it via the Link Cards admin).It’s still pretty early and I am cleaning up the admin a bit and getting subscriptions setup, but if anyone is interested in trying it out let me know and I can send you an invite code (DM me @ryanhefner.
-
2
This is great! I’m wondering if you could share the code you use to generate the images? I’ve found a few examples out there but they’re all undocumented or really confusing.
-
1
All of my code will be very Laravel specific, assuming that's what you're looking for I can update my post with some code snippets tonight.
-
2
Gotcha! Is it something that can run standalone, or is it deeply tied into your app?
I've been struggling to find good examples of something like this that I can pass in text and resources (like your first example) but are more customizable in appearance (like your second example).
-
1
Sounds like you're looking for something more like:
https://htmlcsstoimage.comThat does does basically what I do in my app, but more general and as a hosted service.
-
2
OOOO this is nice. I still need to build a little something that grabs URL params and hits their API but even my mediocre code skills can pull that off I think 😄
-
-
-
-
-
2
I really agree with you, contextual images can really help with share links and even in newsletters.
I'm working on a no-code tool that solves this exact problem. No overlays or headless browsers needed. It works all on the query-params in the URL of the image
Would love to get your thoughts - www.dynamicimg.io
-
2
Oh this looks interesting any maybe something for @alexhillman to look at too!
-
2
I signed up for the beta!
-
1
@alexhillman Just sent you an email 🚀
Thanks, @Mubs
-
-
-
