Instagram Profile Badges

19 Responses

1. Pro 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!

   8likes

   6 months ago

2. Dan Eden

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

   4likes

   6 months ago

3. Pro Adrien Olczak

   This is going to spread.
   next step: IGConnect

   6 months ago

4. Pro 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

   6 months ago

5. Dan 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

   6 months ago

6. Ari

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

   6 months ago

7. Pro Rogie

   @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

   6 months ago

8. Pro Maykel Loomans

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

   1likes

   6 months ago

9. Michiel de Graaf

   Good busy!

   1likes

   6 months ago

10. Pro Pedro Ivo Hudson

    Some CSS transitions would be nice, too! (:

    6 months ago

11. Pro 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

    6 months 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?

    6 months ago

13. Pro Maykel Loomans

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

    6 months ago

14. Pro 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! :)

    6 months ago

15. Pro Claudio Gomboli

    Nice work!

    6 months ago

16. Pro Daniel Bruce

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

    6 months ago

17. Pro Maykel Loomans

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

    1likes

    6 months ago

18. Pro Daniel Bruce

    Cheers @Maykel Loomans

    6 months ago

19. Pro Shota Mickaia

    Cool!

    about 1 month ago