Instagram Profile Badges

19 Responses

1. Maykel Loomans

   Update: Added 1x version, as the retina version doesn't scale down well on normal displays.

   Update #2: As an addition to our launch of Profile Badges, we also made our camera glyph icon publicly available!

   We’ve launched Instagram badges to help you link to and promote your Instagram web profile. We've tried to keep up with sizing standards and therefore made them 64, 48, 24 and 16 pixel squares, or you can use the descriptive badge.

   If you are logged in, you can just copy and paste the code from http://instagram.com/accounts/badges/ and paste it on your own website, blog, or wherever!

   7likes

   over 1 year ago

2. Daniel Eden

   Great work! Shame the preview is a little blurry on @1x.

   4likes

   over 1 year ago

3. Adrien Olczak

   This is going to spread.
   next step: IGConnect

   over 1 year ago

4. Maykel Loomans

   @Dan Eden: I was thinking about making the 2x version less retina specific so it would scale down, but then that would defy the point. To me it's an oversight that we can't upload two files right now, but I'll go with it. :)

   5likes

   over 1 year ago

5. Daniel Eden

   Also, just noticed that the buttons don't use any scripts.

   I don't know who's responsible for that, but I'm going to fly over there just to buy them a thank you beer.

   2likes

   over 1 year ago

6. Ari

   Wow, awesome! It would be great if you could release a .psd or .ai for us designers ;)

   over 1 year ago

7. Rogie King

   @Maykel Loomans would be amazing if you:

   1. auto selected all text on focus or click on the code
   2. detected copy and automatically checked the #2 step when the user copied

   1likes

   over 1 year ago

8. Maykel Loomans

   @Dan Eden I'll have that beer. We launched a simple first iteration because of that reason. :)

   1likes

   over 1 year ago

9. Michiel de Graaf

   Good busy!

   1likes

   over 1 year ago

10. Pedro Ivo Hudson

    Some CSS transitions would be nice, too! (:

    over 1 year ago

11. Maykel Loomans

    @Pedro Ivo Hudson All of those would be part of the code that people would have to copy paste, more code looks scarier, so we're keeping it to a bare minimum. :)

    1likes

    over 1 year ago

12. Manolo Sañudo

    @Maykel Loomans About those CSS transitions: Maybe you could link to a .css on your server instead of inside the code itself and make the code to copy shorter?

    over 1 year ago

13. Maykel Loomans

    @Manolo Sañudo We did that before, but it's an extra request, an extra possibility for a cross-domain failure etc. :)

    over 1 year ago

14. Meng To

    I saw that this morning. It's pretty cool, although it's a big chunk of codes. It's a shame that so much more code is needed to support Retina. Great work though! :)

    over 1 year ago

15. Claudio Gomboli

    Nice work!

    over 1 year ago

16. Daniel Bruce

    Looks nice but I would have liked to see badges with no images or maybe just one—the mark—as a svg.

    over 1 year ago

17. Maykel Loomans

    @Daniel Bruce The mark is available as vector PDF. You're welcome to convert it to SVG and use it. :)

    1likes

    over 1 year ago

18. Daniel Bruce

    Cheers @Maykel Loomans

    over 1 year ago

19. Shota Mickaia

    Cool!

    about 1 year ago