DevTip #2: dev.to Social Preview API 사용(문서화되지 않음?)

This series is about any tech related tips or tricks that I found useful or interesting.

• ▶️ Background
• ❓ How To
• ➕ Bonus

▶️ 배경 ↑top

stackoverflow 개발자 스토리를 우연히 발견하고 그 모습을 좋아하세요. 따라서 최신 세부 정보로 신속하게 업데이트하고 만들기로 결정했습니다public.

내 dev.to 프로필을 추가할 때 스토리의 해당 부분이 단조롭게 보입니다.



나는 즉시 키워드forem dev logo banner를 사용하여 웹 검색을 수행하여 어떤 그림을 추가할지 '아이디어 찾기' 😉를 수행했습니다. 그러다가 dev.to에 소셜 미리보기 카드 생성 방법이 내장되어 있다는 사실을 알게 되었습니다!

❓ 방법 ↑위로

https://dev.to/social_previews/user/{id}

소셜 미리보기를 받을 수 있는 URL은 위와 같습니다. 이 GET 요청을 방문하여 ID를 얻을 수 있는 곳 - . URL은 HTML에서 DEV 소셜 미리보기를 반환합니다.

소셜 미리보기 API는 API 설명서에 없으므로 DEV에서 검색 결과에 미리보기 이미지를 표시하는 데 사용하거나 다른 웹사이트에서 DEV 사용자 URL을 공유하는 것으로 추측됩니다.

https://dev.to/social_previews/user/{user_id}.png

이미지를 얻으려면 URL에 '.png'를 추가할 수도 있습니다. stackoverflow 개발자 스토리의 최종 결과는 다음과 같습니다.

➕ 보너스 ↑상단

사용자의 소셜 미리보기 카드 외에도 예리한 눈을 가진 사람들은 위의 검색 결과에 기사 및 댓글에 대한 소셜 미리보기 카드가 있음을 알 수 있습니다!

형식은 아래와 같습니다.

https://dev.to/social_previews/article/{article_id}

http://dev.to/social_previews/comment/{comment_id}

.png를 포함하는 동일한 트릭도 적용됩니다! HTML&CSS를 이미지로 변환하기 위해 https://hcti.io이라는 서비스를 사용하여 이것이 가능하다는 것을 알았습니다.

재미를 위해 표지 이미지는 이 기사의 소셜 미리보기 카드입니다. 예, 스포일러 🕊와 거의 동일합니다.