loading...

DEV Social Badge - Going Open-source!

benjaminjprice profile image Benjamin Price Originally published at benprice.dev ・3 min read

I just open-sourced the codebase for the DEV Social Badge that I've been working on. Check it out on GitHub!

DEV Social Badge is an unofficial social badge that queries the DEV.to API to see if your blog post has been posted on DEV.

This first release, v0.1.0, should still be considered unstable and used at your own risk.


An important requirement for this to work: You must be using Canonical URLs on DEV.

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

Add the following script tag somewhere in your <head> to load the minified script.

<!-- Place script tag before the end of the head tag -->
<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

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.


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. This will help to reduce unnecessary API calls to DEV.to.



<!-- Place devbadge tag wherever you'd like the badge to appear -->
<devbadge />
<!-- Place script tag before the end of the body tag -->
<script>window.onload = function(){typeof findOnDev !== "undefined" && findOnDev()}</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 documentation states that responses are cached for 24 hours. Don't expect your badge to show the positive reaction count in real-time.

You can help

You don't need to write any code to help the project. Just giving the repository a β˜…Star on GitHub will help towards getting the project hosted on other CDNs, such as cdnjs.

I will be adding Issues 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 Contribution Guidelines (so far, they're quite sparse).

Let me hear from you

Please share your thoughts in the comments thread on DEV. I'd love to get your feedback and opinions.


This post originally appeared on benprice.dev.

Discussion

pic
Editor guide
Collapse
supunkavinda profile image
01010011 01110101 01110000

Hey, This is super cool! One suggestion: Is there a way to pull reactions as it is (heart, unicorn, and bookmarks seperately) and display them with the icons? It would be more cool. 😊

Collapse
benjaminjprice profile image
Benjamin Price Author

Sadly, no. The API only offers a sum of all positive reactions - not a breakdown of each.

Collapse
supunkavinda profile image
01010011 01110101 01110000

Ah, got it.

Btw, simply scrape the URL of the post and get the values from HTML.

Collapse
supunkavinda profile image
01010011 01110101 01110000

Ah wait, you have to render the HTML - because it's built on react.

Thread Thread
benjaminjprice profile image
Benjamin Price Author

Yes, as this is a client side script I don’t want to scrape anything and rather just rely on the APIs.

I could make a request for the functionality in the API but there’s no guarantee it will be added.

Collapse
ben profile image
Ben Halpern

This is really cool!

Collapse
benjaminjprice profile image
Benjamin Price Author

Thanks, Ben. Glad you like it.

Collapse
waylonwalker profile image
Waylon Walker

Is there any possibility to get comment count or comments? I looked at one graph and it didn't seem to have a way. I didn't dig any deeper.

Collapse
benjaminjprice profile image
Benjamin Price Author

In regards to comments, I can pull the comment count and the last comment datetime stamp but not the actual comments. How would you envision those being used? Reaction and Comment counts side by side? or a toggle between the two? Or perhaps something else...?

Collapse
rhymes profile image
rhymes

You can pull the comments from dev.to/api/comments

For example, all comments from this article are dev.to/api/comments?a_id=268819

This comment I just wrote it'll be: dev.to/api/comments/m10o

The documentation is a "bit" behind :D

Thread Thread
benjaminjprice profile image
Benjamin Price Author

Thank you. I wasn't aware. Perhaps I will create a separate library for pulling all of the comments.

Collapse
waylonwalker profile image
Waylon Walker

Not sure, I would really like to embed comments on my site.

As for omment count does it make sense to separate them with a pipe?

reaction | comments

Thread Thread
benjaminjprice profile image
Benjamin Price Author

I'll play with it and see what I can come up with.

Ultimately, I'd like to get a few different formatting options in place that can be selected based on how the user wants it shown on their website.

Collapse
saurabhdaware profile image
Saurabh Daware 🌻

This is soo cool!! 🌻

Collapse
rhymes profile image
rhymes

Nice, Benjamin!