Embed Your Instagram Images

I can’t deny how convenient and fun Instagram is, even though I’m not totally sure how I feel about it — how it’s drastically changed the way I take photos, and how I interact in the midst of an experience. Some of you have voiced your displeasure with phoneography and mobile blogging in the comments of recent posts: A phone is a phone, not a camera. Or a phone screen is not an ideal place on which to write and edit your thoughts. It’s interesting to hear your varied perspectives on blogging and sharing on the go — we all use these new technologies differently.

Whether or not you like Instagram, it’s a popular photo app, and some of you may want to display these images, in all their filtered glory, on your own blogs. You can embed them in your posts, pages, and even in your sidebar to create visual effects.

If you’d like to skip ahead, click through to these individual sections:

• Embed an Instagram photo into a post or page
• Embed an Instagram photo in your sidebar
• Embed an Instagram photo in your mobile app

Embed an Instagram photo

Copy the image’s URL from your web browser’s address bar while viewing the image:

While you’re editing a post or page, paste the URL on its own line:

http://instagram.com/p/WaQPXBgdon/

So for example, this text and URL . . .

. . . will display this on your blog:

The URL automatically embeds the largest size of the image that fits into the content area. You can control the size of an image using the Instagram shortcode — remember when we talked about shortcodes? For example, this . . .

[instagram url=http://instagram.com/p/WaQPXBgdon/ width=275]

. . . embeds this wee image instead:

Your sidebar, instagrammed

Now that you know how to control the width of an image with shortcode, consider sprucing up your sidebar with Instagram images using a Text Widget. You can see a sample Text Widget in a blog’s sidebar on the right, with two embedded Instagram images.

To achieve this, I added width=200 to the shortcodes for these two photographs, which shrunk them considerably. As you previously learned in Widgets 101, Text Widgets are simple but powerful — with text and HTML, you can create a nifty section in your sidebar. Here, I added one-line descriptions under these images.

Remember that each theme is different; you can find the measurements of your current theme’s areas (in pixels) on your theme’s page in the Theme Showcase. Scroll down your theme’s page to find a gray box of “quick specs,” which lists various measurements, including the sidebar. Use these measurements as a guide when you set your Instagram image’s width so you know it will fit!

Embedding Instagram on your phone

If you’d like to grab an image URL from your Instagram stream and paste it into a post you’re editing in your mobile app, click the button on the bottom right of the Instagram photo you want to embed:

In some apps, like WordPress for iOS, you can then follow a prompt to copy the URL. Click on “Copy Share URL,” as shown here . . .

. . . and paste the URL into your post editor, where you’d like your image to appear in the post. (For example, on the iPhone, tap the screen where you want to embed the image, and you’ll see an option to paste the link.) There you go! You can embed from Instagram into your WordPress.com post, right from your mobile app.