How to embed Instagram photos in a website

How to embed Instagram photos in a website

In Instagram’s ongoing battle with Twitter and Vine, Instagram have now taken the new step of allowing you to easily embed a photo or video into your website, so here is my first embed of an Instagram photo:

This is Rob Edlin of Niddocks giving the opening talk at the recently Digital Marketing Developments 2013 meeting in Falmouth Cornwall.

How to Embed Instagram Photos

You can embed any photo you like, even those of other users, as long as the photo is se to Public permission.

  1. Visit the Instagram website: http://instagram.com/
  2. Navigate to the user and photo you would like to embed.
  3. Click the photo and a popup window will appear with the photo enlarged.
  4. On the right side of the popup window you will see three icons positioned vertically.
  5. Click the ‘Share’ icon (third down the list).
  6. A further smaller window will open presenting you with the iframe embed code, select and copy this code.
  7. Now go to the website that you want to embed the code, this could be a hand written site or perhaps a WordPress site.
  8. In your website code, paste the iframe code, or within WordPress go to your post edit page and click the HTML tab, then paste in your iframe code wherever in the post you would like the photo displayed.
  9. Save and upload (if not WordPress!)
  10. Yeah, Instagram photo now live!!!

You can also follow the same process to embed Instagram Videos on your website!

One tiny problem… if your website is mobile responsive, you will need to add the following code to your CSS stylesheet:
iframe {
max-width: 100%;
}

  • hunt4hardy

    Using this widget, you can embed a slideshow of your recent Instagram photos, and it works great on mobiles too: http://embedmyphotos.com

    • Robyn

      unless your instagram user name is longer than the box allows, then you are out of luck…