igrigorik / hackernews-button

Embeddable Hacker News button + vote counter for your site

Embeddable Hacker News vote / counter button

Async, embeddable submit + vote counter button for Hacker News.

• If the story has not been posted to HN, "Submit" button is shown, otherwise latest point count is displayed.
• Auto-detects Google Analytics and registers clicks events (see reports under Traffic Sources > Social > Social Plugins).

Embedding the button

Step 1, place the HN link where you want the button appear on the page:

<!-- Auto-detect URL of current page and title if necessary -->
<a href="http://news.ycombinator.com/submit" class="hn-share-button">Vote on HN</a>

<!-- Override the URL and Title for the button -->
<a href="http://news.ycombinator.com/submit" class="hn-share-button" data-title="Some Title" data-url="http://www.igvita.com/">Vote on HN</a>

Step 2, include the (async) javascript file:

<script src="//hnbutton.appspot.com/static/hn.min.js" async defer></script>

Note: you can safely embed multiple buttons on the same page.

Misc

• Kudos to @sbashyal and @stbullard for the button styling (hnlike.com)
• Kudos to Algolia for an awesome HN API
• (MIT License) - Copyright (c) 2012 Ilya Grigorik

hackernews-button's Issues

HIDPI or Retina support

Looks blurry on retina mac.

Avoid `getElementsByClassName` as it doesn’t work in IE < 8

See http://caniuse.com/getelementsbyclassname.

Big version with balloon on top?

It would be nice to have a visual compatibility with twitter widget etc.

Make the button "standard" height to match Twitter and G+ buttons

I've currently got a Twitter button and a Google Plus button and decided to add the HN button as well. However, the HN button doesn't line up vertically with the other buttons. I've attributed this to the HN icon only being 19px high, while the others are 20px.

This really is just a cosmetic issue and isn't critical, but I would prefer have a homogeneous sharing zone on my website. Having the HN button just 1 pixel off is noticeable.

Here's a screenshot from my site:

Please use protocol relative URLs

So on this line:

https://github.com/igrigorik/hackernews-button/blob/master/static/hn.js#L26

Please use the following URL: //hnbutton.appspot.com instead of http://hnbutton.appspot.com

This will avoid mixed content warnings in browsers on sites that serve the button via HTTPS, such as https://starthq.com

Many thanks!

/cc @alexlamsl

class on iframe

The resulting iframe doesn't have a class to target it through css.

The hnsearch api appears to be down

  wget http://api.thriftdb.com/api.hnsearch.com/items/_search?
  --2014-08-26 23:13:51--  http://api.thriftdb.com/api.hnsearch.com/items/_search?
  Resolving api.thriftdb.com... 54.236.170.141, 107.23.43.191
  Connecting to api.thriftdb.com|54.236.170.141|:80... connected.
  HTTP request sent, awaiting response... No data received.
  Retrying.

Encode the URL sent to HNSearch

Howdy—

I just noticed this one.

I submitted an article to HN, that stayed buried: http://news.ycombinator.com/item?id=4882860

Then, another user posted an article, and that gained Front Page Fame: http://news.ycombinator.com/item?id=4886560

The difference? His/Her URL added a "#" to the end of the link, making it appear "new" to HN. Which is fine. The problem is, though, the button on my site looks like it only has a "1" point, while the article should actually have a higher number.

It'd be nice to add data-hn-id or something to the original link to remedy situations like this. I took a look at it myself and it seems a bulk of the work occurs in the Go code, which I'm not too familiar with.

Thanks for listening.

Button does not work well if used multiple times on page.

I used your button at http://www.batterywidgetreborn.com/known-bugs.html and it renders well just only at fraction of places where it is put.

Works well if used just a few times.