6 ms·

Async, embeddable HN share button

63 points by igrigorik 14y ago

overshard 14y ago
This has been done a few times before but still, well done. Works very well.
stbullard 14y ago
cf. last year's discussion of http://hnlike.com http://hnlike.com: http://news.ycombinator.com/item?id=2934178 http://news.ycombinator.com/item?id=2934178
igrigorik 14y ago
Working on auto-instrumenting the button with Google Analytics trackSocial stuff - stay tuned.
- igrigorik 14y ago
  GA instrumentation should be in place now. Go into GA > Traffic Sources > Social Plugins, and you should see it there. (don't forget to change the date range)
nodesocket 14y ago
Great work, but are you serving `hn.js` from a CDN like CloudFront, so in the event that your website goes down, it doesn't effect others. Also, the url the iframe calls: http://hnbutton.appspot.com/button?title=some-title&url=some-url http://hnbutton.appspot.com/button?title=some-title&url=..., how can we be sure that is always going to be available?
- fraserharris 14y ago
  *.appspot.com is Google App Engine. It has built-in redundancy.
DanielRibeiro 14y ago
Great! It would be awesome if it can be made to work with Wordpress (the vanilla hosted site). Or maybe I should just start blogging like a hacker[1, 2]... [1] http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html http://tom.preston-werner.com/2008/11/17/blogging-like-a-hac... [2] http://www.allthingsdistributed.com/2011/08/Jekyll-amazon-s3.html http://www.allthingsdistributed.com/2011/08/Jekyll-amazon-s3...
zobzu 14y ago
It's a nice button, but, nothing like have 2 HN, FB, Twitter, G+ buttons. I don't think the "social sharing" idea behind all those buttons is smart at all. It allows for an eventual single winner only, and crap in between (and crap after the winner is "elected" since it wont be cool anymore, everyone will have to have a new button side by side)
alpb 14y ago
I have just installed it to my blog (example: http://ahmetalpbalkan.com/blog/getting-things-done-for-devel... http://ahmetalpbalkan.com/blog/getting-things-done-for-devel...) however submit button never disappears. I would expect it to show 1 points. Can you show me a page that vote count actually works?
- sauerbraten 14y ago
  For me, it shows '4' on your site.
- igrigorik 14y ago
  The data is coming from thrifdb API (like all other buttons), so there is a small delay in the "true count" and what gets displayed in the button. From what I can tell, its ~within minute(s) accuracy.
  - alpb 14y ago
    Great to hear, thanks!
  - fraserharris 14y ago
    Can you expand on thrifdb API? Can't find any relevant search results.
    - riffraff 14y ago
      I believe he means http://www.hnsearch.com http://www.hnsearch.com, I used it to fetch story data too in the past, and I believe hnlike used to work like that too.
eps 14y ago
> http://hnbutton.appspot.com/static/hn.js http://hnbutton.appspot.com/static/hn.js Why is this .js not on Github?
- guynamedloren 14y ago
  Wondering the same thing...
- igrigorik 14y ago
  As in, served through Github's CDN (akamai)? Google's App Engine has a few GFE's around the world as well.. :)
- abraham 14y ago
  Appspot supports SSL while GitHub Pages do not.
huhtenberg 14y ago
There's nothing more sad and somewhat pathetic than a "share on... " button with a single digit counter. Perhaps hide the counter if it's under configurable threshold?
- igrigorik 14y ago
  That's a good idea. Ideally a combination of time and points actually: if it's a new article then show the counter, but if its older and low points, then hide the button.
nilved 14y ago
For something unrelated, what's the point of code like this? <script> (function() { var hn = document.createElement('script'); hn.type = 'text/javascript'; hn.async = true; hn.src = 'http://hnbutton.appspot.com/static/hn.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(hn, s); })(); </script> Why not just put in the generated script tag? Moreover, why does it matter where the tag is placed if it's loaded with async as opposed to defer?
- igrigorik 14y ago
  For the HN audience you probably could, since we're all on modern browsers. The pattern above is what GA uses to guarantee most consistent behavior across all browsers. It comes down to browser support for the async keyword: http://stackoverflow.com/questions/1834077/which-browsers-support-script-async-async/6766189#6766189 http://stackoverflow.com/questions/1834077/which-browsers-su... As far as async vs. defer, here's a good summary: http://www.sitepoint.com/non-blocking-async-defer/ http://www.sitepoint.com/non-blocking-async-defer/

63 points by igrigorik 14y ago

This has been done a few times before but still, well done. Works very well.

cf. last year's discussion of http://hnlike.com http://hnlike.com: http://news.ycombinator.com/item?id=2934178 http://news.ycombinator.com/item?id=2934178

igrigorik 14y ago

Working on auto-instrumenting the button with Google Analytics trackSocial stuff - stay tuned.

igrigorik 14y ago
GA instrumentation should be in place now. Go into GA > Traffic Sources > Social Plugins, and you should see it there. (don't forget to change the date range)

nodesocket 14y ago

Great work, but are you serving `hn.js` from a CDN like CloudFront, so in the event that your website goes down, it doesn't effect others. Also, the url the iframe calls: http://hnbutton.appspot.com/button?title=some-title&url=some-url http://hnbutton.appspot.com/button?title=some-title&url=..., how can we be sure that is always going to be available?

fraserharris 14y ago
*.appspot.com is Google App Engine. It has built-in redundancy.

DanielRibeiro 14y ago

Great! It would be awesome if it can be made to work with Wordpress (the vanilla hosted site). Or maybe I should just start blogging like a hacker[1, 2]... [1] http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html http://tom.preston-werner.com/2008/11/17/blogging-like-a-hac... [2] http://www.allthingsdistributed.com/2011/08/Jekyll-amazon-s3.html http://www.allthingsdistributed.com/2011/08/Jekyll-amazon-s3...

zobzu 14y ago

It's a nice button, but, nothing like have 2 HN, FB, Twitter, G+ buttons. I don't think the "social sharing" idea behind all those buttons is smart at all. It allows for an eventual single winner only, and crap in between (and crap after the winner is "elected" since it wont be cool anymore, everyone will have to have a new button side by side)

alpb 14y ago

I have just installed it to my blog (example: http://ahmetalpbalkan.com/blog/getting-things-done-for-devel... http://ahmetalpbalkan.com/blog/getting-things-done-for-devel...) however submit button never disappears. I would expect it to show 1 points. Can you show me a page that vote count actually works?

sauerbraten 14y ago
For me, it shows '4' on your site.
igrigorik 14y ago
The data is coming from thrifdb API (like all other buttons), so there is a small delay in the "true count" and what gets displayed in the button. From what I can tell, its ~within minute(s) accuracy.
- alpb 14y ago
  Great to hear, thanks!
- fraserharris 14y ago
  Can you expand on thrifdb API? Can't find any relevant search results.
  - riffraff 14y ago
    I believe he means http://www.hnsearch.com http://www.hnsearch.com, I used it to fetch story data too in the past, and I believe hnlike used to work like that too.

eps 14y ago

> http://hnbutton.appspot.com/static/hn.js http://hnbutton.appspot.com/static/hn.js Why is this .js not on Github?

guynamedloren 14y ago
Wondering the same thing...
igrigorik 14y ago
As in, served through Github's CDN (akamai)? Google's App Engine has a few GFE's around the world as well.. :)
abraham 14y ago
Appspot supports SSL while GitHub Pages do not.

huhtenberg 14y ago

There's nothing more sad and somewhat pathetic than a "share on... " button with a single digit counter. Perhaps hide the counter if it's under configurable threshold?

igrigorik 14y ago
That's a good idea. Ideally a combination of time and points actually: if it's a new article then show the counter, but if its older and low points, then hide the button.

nilved 14y ago

For something unrelated, what's the point of code like this? <script> (function() { var hn = document.createElement('script'); hn.type = 'text/javascript'; hn.async = true; hn.src = 'http://hnbutton.appspot.com/static/hn.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(hn, s); })(); </script> Why not just put in the generated script tag? Moreover, why does it matter where the tag is placed if it's loaded with async as opposed to defer?

igrigorik 14y ago
For the HN audience you probably could, since we're all on modern browsers. The pattern above is what GA uses to guarantee most consistent behavior across all browsers. It comes down to browser support for the async keyword: http://stackoverflow.com/questions/1834077/which-browsers-support-script-async-async/6766189#6766189 http://stackoverflow.com/questions/1834077/which-browsers-su... As far as async vs. defer, here's a good summary: http://www.sitepoint.com/non-blocking-async-defer/ http://www.sitepoint.com/non-blocking-async-defer/