DEV Community

Cover image for DevTip #2: Using dev.to Social Preview API (undocumented?)
Wiz Lee
Wiz Lee

Posted on • Updated on

DevTip #2: Using dev.to Social Preview API (undocumented?)


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.

alt text

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!

alt text


❓ How To ↑top

https://dev.to/social_previews/user/{id}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

To get an image, you can also append '.png' to the URL. The end result in the stackoverflow developer story is as below.

alt text


➕ 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}
Enter fullscreen mode Exit fullscreen mode

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 🕊.

Discussion (0)