I just open-sourced the codebase for the that I've been working on. Check it out on ! DEV Social Badge GitHub DEV Social Badge is an social badge that queries the API to see if your blog post has been posted on DEV. unofficial DEV.to This first release, , should still be considered unstable and used at your own risk. v0.1.0 You must be using Canonical URLs on DEV. An important requirement for this to work: This allows the code to determine which of your DEV posts matches the post hosting the badge. Using the script Using the script is fairly straight forward. You have to add a couple of tags to your <head> and a couple in the <body>, where you want the badge to appear. Adding the script tag to the <head> Add the following script tag somewhere in your <head> to load the minified script.  < = > script src "https://unpkg.com/dev-social-badge@0.1.0/dist/dev-social-badge.min.js" </ > script Adding the devbadge and script tags to the <body> The <devbadge /> will be replaced by the script with the social badge, if the script is able to find a matching post on DEV. If it doesn't return any matching posts, nothing gets added to your page. This will help to reduce unnecessary API calls to . If you're using a template for your blog posts, I suggest adding this to the template file for your blog posts - not your main site layout. DEV.to  < /> devbadge  < > script .onload = { findOnDev !== && findOnDev()} window ( ) function typeof "undefined" </ > script API Limits Currently, there are no published limits on API calls. But, that doesn't mean that there isn't one. It's possible that this could stop functioning. Additionally, the DEV API states that responses are cached for 24 hours. Don't expect your badge to show the positive reaction count in real-time. documentation You can help You don't need to write any code to help the project. Just giving the repository a ★Star on will help towards getting the project hosted on other CDNs, such as . GitHub cdnjs I will be adding to the repository for areas where I'd like some help, as well as to get my improvement ideas out of my head, over the next day or two. If you'd like to contribute to the code, please check out the (so far, they're quite sparse). Issues Contribution Guidelines Let me hear from you Please share your thoughts in the . I'd love to get your feedback and opinions. comments thread on DEV

My DEV Social Counter

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

100 Stories To Learn About Blogging

24 Best JavaScript Blogs and Websites

2018: My Technology Retrospective

4 Simple Ways to Skyrocket Your Blog Readership

46 Stories To Learn About Blog

5 Steps to Start and Monetize Your Own Successful Sports Blog

100 Stories To Learn About Blogging

24 Best JavaScript Blogs and Websites

2018: My Technology Retrospective

4 Simple Ways to Skyrocket Your Blog Readership

46 Stories To Learn About Blog

5 Steps to Start and Monetize Your Own Successful Sports Blog

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps