Social Icons

Since the beginning of time (well, 2013 when I started here) I wished we had a social icon. You know, like how everybody has little color coordinated Twitter, Facebook, LinkedIn, and Pinterest icons on their personal sites? Unfortunately, ChallengePost's old red, yellow, and blue "compass rose" looked awful in monochrome—more like a crash test dummy sign—and so were kind of sunk.

But then, when we were rebranding, I made a huge big deal about designing an logo that looked good as a full word mark or a square logo. And so, after badgering Holly for nearly 2 years, we got this great infinitely scalable SVG.

However, most social icons are distributed in raster formats like PNG and the actual image is inset, so there's transparent padding all around it. So I bothered Holly on Slack again and she made me a new set of images:

16px 32px 64px 128px … 512px

Want the full set? They're in the repo, or you can download them here: 16, 32, 64, 128, 256, 512, SVG

Of course, what I'd really like, is to get the Devpost icon into Font-Awesome. So please upvote the icon request on GitHub.

Follow Buttons

At some point last year, we enabled hackers to follow hackers. (Oh wow Neal, what an innovative feature.) Yeah ok, whatever, but it created some social currency, and I want hackers to be proud of their following on Devpost.

I decided to base my follow buttons off the Unofficial GitHub button project by Mark Otto. Why? Because it was entirely URL param based + all the HTML & CSS was good to go. All I needed to do was edit the JavaScript that populates the button.

Now, until recently, there were two problems standing in the way of creating my follow button:

  1. A Devpost SVG icon
  2. An API so that I could get a user's follower count

As mentioned earlier, Holly solved the SVG issue—however I did end up base64 encoding it so I could shove it into the CSS file.

For the API part, I turned to Matt, who recently created an Unofficial Devpost API using Amazon Lambda. He was kind enough to add CORS headers to the UserPortfolioEndpoint endpoint, so I could call it in my JavaScript file. Once I had that, I made an XMLHttpRequest to the API with my username (passed in via URL parameter), which pulled my portfolio info, including my follower count.

Actually, here's the successHandler function I used to do that from the XMLHttpRequest:

getJSON(devpostAPI + user, function(data) {
  // get follower count
  followers = data.followers_count;
  console.log('Followers: ' + followers);
  // and update the counter element and add commas if we have over 999 followers.
  counter.innerHTML = addCommas(followers);
}, function(status) {
      console.log('something went wrong');
      return null;

With that in hand, all I had to do was pull the rest of the URL params, concatenate some variables to set the button & follower count links, and I was done:

As you can see below, the follower count is optional and there's also a large size option:

<iframe src="" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>

<iframe src="" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>

To use it, all you have to do is replace nealrs with your own username and you're good to go!!

Built With

Share this project:


Neal Shyam posted an update

Thanks to @mgerrior, I just added like buttons for your projects:

All it takes is 2 changes to the param string:

  • project=project_url_slug
  • type=like

And BAM:

FYI: I'm going to change the button URL at some point, but I'll keep you updated.

Log in or sign up for Devpost to join the conversation.