No Instagram Web Embeds On WordPress.com

UPDATE 14 July

Read through to the end of this post to see how it IS now working on WordPress.com blogs – with no need for an iframe embed code (just the URL).

Introduction

I get a Rabbitgram email each morning from The Rabbit Agency with the latest in the digital world.

This morning they linked to a post that appeared yesterday on the Instagram blog that says:

Today, we’re excited to introduce web embedding for Instagram content and bring you an easy way to add Instagram photos and videos to the stories you want to tell.

Now, when you visit an Instagram photo or video page on your desktop web browser, you’ll see a new share button on the right side of your photo (just under the comments button). Click the button to see the embed code. Copy the block of text it gives you and paste it into your blog, website or article. When you hit publish, the photo or video will appear.

It doesn’t work on WordPress.com blogs.

The reason it doesn’t work is that iframes are not allowed. WordPress just strips them out.

This is a screen-grab of one of my Instagram images. You can see the embed button below the comments button. Clicking that brings up the embed code that I have shown in the second screen grab. As you can see, the code is an iframe.

instagram-david-bennett

embed-code

Coda

Here is the link to an article I put on the Quillcards Blog where I was able to easily embed some Instagram photos.

I thought the images themselves would be clickable, but in fact it is the little word ‘Instagram’ above the image that has to be clicked.

When you hover over the word (as you will see) it changes to ‘View On Instagram’.

But it is not super-obvious, which I think it really ought to be.

Update 14 July

A big thank you to JenT from GammaGirl who has been following up the Instagram issue with the support staff at WordPress, and now by simply pasting in the URL of the image it renders as the new Instagram version – like here:

About David Bennett

photographer, blogger, greeting card publisher - love travelling, nature, books, culture, good conversation. Greeting card publisher at Flying Twigs
This entry was posted in Photographs. Bookmark the permalink.

19 Responses to No Instagram Web Embeds On WordPress.com

  1. rebekah says:

    I’ve more or less given up on Instagram. Before I got the iPhone, I wanted it badly … just because I couldn’t.

    Your picture of the flowers is so beautiful!

  2. Maria says:

    I agree. Subtlety is great – most of the time, and going against standard conventions is wonderful – often. But there are times when a little more “light” could be shed.

  3. JenT says:

    Confused. Does the oembed method not work for instagram photos any longer (see http://en.support.wordpress.com/images/instagram/ ) or is there a real or perceived advantage to doing it the way instagram wants you to?

    • Mutually confused :-)

      The new embed produces big photos 620px wide. Take a look at the Instagram embed images I put in an article on the Quillcards Blog.

      • JenT says:

        Apparently on WPcom 612 pixels is the Instagram gold standard. I do like the subtle addition of the number of instagram likes and comments, but would rather click on the image to be taken to the correlating instagram page. /shrugs

        • I absolutely agree with you. Not only would I prefer to be able to click on the image itself, I think it is not obvious for those who are not familiar with the system and so discourages them from clicking.

      • JenT says:

        We got “upgraded” to the official instagram embed just now after a few hours of wackiness. http://en.forums.wordpress.com/topic/problem-with-instagram-image-embedding?replies=7

        • I looked at your post with an embed featured. How did you do it? I put an embed in this post just now and it got stripped out. What am I missing?

        • JenT says:

          We didn’t do anything! Suddenly we found other people’s Instagram images embedded in our sites where our embeds should have been and after WPcom fixed it, we had our pictures back but with the new Instagram-style embed. :) I imagine we can carry on as before with the oembed method and we should now see it in the Instagram official format. win-win

        • I get how it is possible to put an embed in the sidebar with the widget, but how did you put your embed in the body of your post? How would you put one there if you wanted to do it now?

          Sorry for being slow.

        • JenT says:

          :) No worries!

          Going back to what I posted above with the link to the support doc, you still embed the same way as before on WordPress.com (oembed), but now the “official” instagram frame shows up in the post with the photo. No extra effort required.

  4. RJ Silva says:

    Talk about timing. I just posted this on Instagram web embeds. http://dadspixels.com/2013/07/14/instagram-web-embeds/

    Now I get a little confused when you talk about the official Instagram embed route vs the WP URL way. For me only the latter works. And another thing. I don’t know why but if you see my post you’ll notice all that space between the bottom of the embedded image and the next paragraph. There was nothing I could do to remove that empty space. Don’t know if it has something to do with embedding using a URL instead of the iframe code. Anyways. Like I said on my post, this is not something I’ll be using often so…

    • I looked at the source code on your site. The empty space is the size of the iframe and I see you have it set to width=”730″ height=”828″. If you change that to the original values of 612px and 710px, I think you will get rid of the extra space.

      I think embedding on WordPress.com versus self-hosted WordPress sites can be summed up this way. On WordPress.com blogs there is only one way to do it, and that is to put the URL in the post and make sure it is on its own separate line. It will then show up with the word ‘Instagram’ above the image and the word will be clickable.

      With self-hosted WordPress sites you have the option of either using the iframe embed code or using the same method as for WordPress.com sites. If you use the iframe embed, it will show up with the word ‘Instagram’ and the word will be clickable. If you use the same method as for WordPress.com sites, only the image will show (no word ‘Instagram’) but the image will be clickable.

      • RJ Silva says:

        Thanks a lot. I hope you’ll forgive my ignorance but now my question is how do I change those widths and heights?

        • When I think about it, I am mystified as to how the iframe embed is there at all. WordPress.com is supposed to strip out iframe code.

          Leaving that mystery aside, I would say that you need to be in the HTML ‘text’ editor – not the ‘visual’ editor – to edit the post.

          You will see the iframe as iframe src=”//instagram.com/p/bsUXnzF467/embed/” width=”730″ height=”828″ frameborder=”0″ scrolling=”no”etc. – just change the values for width and height.

        • RJ Silva says:

          Thanks a lot, David. You rock!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s