This series is about any tech related tips or tricks that I found useful or interesting.
▶️ Background ↑top
Stumble across stackoverflow developer story and like the looks of it. Thus decided to quickly update it with my latest details and make it public.
When I was adding my dev.to profile, that part of the story looks bland.
I immediately did a web search using the keywords forem dev logo banner to 'find some idea' 😉 on what picture to add onto it. This is then I found out that dev.to has a built in way of generating social preview cards!
❓ How To ↑top
https://dev.to/social_previews/user/{id}
The URL to get your social preview is as above. Where you can get your ID by using visiting this GET request - https://dev.to/api/users/me. The URL will return your DEV social preview in HTML.
The social preview API is not in the API documentation, so my guess is this is used by DEV to show preview images on search results or a DEV user URL is shared on other websites.
https://dev.to/social_previews/user/{user_id}.png
To get an image, you can also append '.png' to the URL. The end result in the stackoverflow developer story is as below.
➕ Bonus↑top
Aside from social preview card of user, for those with sharp eyes will see that in the search result above there are social preview cards for articles and comments too!
Format is as below:
https://dev.to/social_previews/article/{article_id}
http://dev.to/social_previews/comment/{comment_id}
The same trick of including .png also applies! I just notice that this is made possible by using a service called https://hcti.io to convert HTML&CSS into image.
Just for fun, the cover image is the social preview card of this article. So yeah, that's more or less equivalent to a spoiler 🕊.
Top comments (0)