Stuff that occurs to me: Will it embed? How to embed all sorts of things on free Wordpress dot com blog posts

Although my main blog is here on Blogger I have umpteen subsites littered across the web, mostly at Wordpress (the free .com one, not the confusing .org one where you have to faff with a server, download stuff and host it yourself then wrestle with it periodically - that's not for me). They're all there because they used to be at Posterous, it closed down earlier in the year and it was that or a blog site I'd never heard of, so there they are - an example is jobs in science communication.

It's long been known that Wordpress.com is cautious about what people can embed on their free blogs but there seems to be a way around this for most things. Here's what I've found - these may not be the best or most elegant solutions but they work, and once they work I pretty much stop looking :)

Below I refer to the following:
• URL which means a web address, eg http://something.com
• Visual and Text edit windows which refer to the view you're looking at in WordPress.com when drafting a post.

Sometimes to make code work you have to insert it into the post while in Text (ie html) view (cos it won't work if added while in Visual mode). Of course, other times it's the other way around ;)

Note: this is about how to embed stuff on Wordpress.com, not on Blogger

Also note: it's entirely possible that the theme you've chosen for your blog may interfere with any of these and require some other strategy!

As far as I can tell there are three code options:

(a) use the URL / web address
(b) find out what the shortcode is
(c) use the standard 'embed' code (usually longer than shortcode, unsurprisingly)

Half the fun is guessing which of the three to use. If in doubt, stick them all in (first in Visual mode) and click Preview. If that doesn't work, take them out, switch to Text edit view, paste them in, return to Visual - so you can see if it looks like any of them might work, but you'll still have to check in preview.

Workarounds / embed codes found so far include
I've found methods for Audioboo, Flickr, Google Maps, Mixcloud, Storify (though it's quite laborious), Twitter, Vimeo, Vine and YouTube.

Audioboo: use (b) or (c) the embed code IS the shortcode if you select Wordpress option
This also uses the gigya shortcode as Mixcloud does below, but the advantage here is that it provides the right code for you, so no editing needed.

Call up the page with the boo on it that you're after, then click on Embed. Click on More options at the bottom and choose the Wordpress.com option - it will present you with a bit of code that you can insert into the Text edit window and, once published, you'll have a little Audioboo player.

Flickr images: use (c) Embed code
Pretty straightforward - just grab the embed code from the image itself, paste into the Text edit window and you're done. I'd not be that surprised if it turns out you can just do it with the photo's URL but I've always done it with the embed code.

Google Maps: use (c) Embed code
To be honest I was expecting that it was going to be the short code format, as it is for so many other embeddable media. However, surprise surprise I could only get the 'iframe' format to work, yet this is the format that usually doesn't work on Wordpress.com. You can see why people write blog posts about this sort of thing ;)

Find the Google map area you like and then click on the symbol for link (it's next to the symbol for 'printer' in the panel on the left hand side next to the map bit). Some options will appear - they include a basic URL and a 'Paste HTML to embed in website' option - that's the one that seems to work. You need to insert it while in the Text html editor.

You might also notice an unticked box next to 'Short code' - if you tick that it will reload a short URL, which I assumed would be perfect for Wordpress, but no - it's the 'Paste HTML to embed in website' option.

Mixcloud: use (b) 'gigya' Shortcode (basically tweak the embed code given)
I had a bit of difficulty with this one initially, wrestling with the embed code, trying the URL. Then trying both in the html Text window and in the visual edit window. Then I thought 'someone else will have solved this' and so they have - here's one of several forum posts about the topic.

It seems you need to convert the embed code so that it's in a shortcode form that's acceptable to Wordpress.com (this is a 'gigya' shortcode). Then put it in the html Text edit window and it will resolve into a player window wrapper thingy when you publish it (or look at it in the visual editor).

To be honest I just copied the code below and replaced the 'feed' URL with the one I wanted to embed. I added in a space between the [ and the code, and then another one at the end so that I could display it here. You'd need to remove them to make the code work.

[ gigya 
src="http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf" 
flashvars="feed=http%3A%2F%2Fwww.mixcloud.com%2Felectronicundergroundradio%2Feu-e-03%2F&embed_uuid=0ee01a03-e393-4fe3-898f-4481e7e93c60&stylecolor=&embed_type=widget_standard"
 type="application/x-shockwave-flash" wmode="opaque" 
allowscriptaccess="always" allowfullscreen="true" width="480" 
height="480" ]

I took the bit in red out and added in the Mixcloud URL I wanted, which happens to be this http://www.mixcloud.com/robinrimbaud/scalaramaone

[ gigya src="http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf" flashvars="feed=http://www.mixcloud.com/robinrimbaud/scalaramaone/&embed_uuid=0ee01a03-e393-4fe3-898f-4481e7e93c60&stylecolor=&embed_type=widget_standard" type="application/x-shockwave-flash" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" width="480" height="480" ]

Works perfectly.

Storify - nope
Don't think it can be done - I've never managed it anyway. Do you know how? Please tell me.

Edit 6 Nov 2013 - still can't be done, but can be faked - here's how I did it "How to make it look like youv'e embedded a short Storify story into a free Wordpress dot com blogpost".

Twitter tweets: use (a) URL
Very simple. Just take the URL of whatever tweet you want to embed and paste it into the 'Visual' editor (don't need to hyperlink it, don't need to paste it in while in 'Text' mode either). If you want to add in a few just press enter at the end to create a paragraph break and add the next one. Once published they resolve beautifully into fully realised tweets.

This is an example of the URL of one of my old tweets:
https://twitter.com/JoBrodie/status/195085895685259264

You can find the tweet's address from the timestamp in the top right (on Twitter.com) or from the bit at the bottom left which says 'Expand' or 'View conversation' depending on the tweet.

Vimeo videos: use (a) URL
Counterintuitively you don't use the embed code, just the URL of the video. Add it straight into the Visual editor window, don't hyperlink it and it will come out fine.

Vine: use (a) URL
Use URL not embed code, hat tip @JosephFreeman. He used it in the HTML edit window but we're both agreed it would probably work in the Visual one too :)

YouTube videos: use (c) Embed code
Find the embed code on the YouTube video. Click the 'Text' tab on the editing window and paste it in, once you return to 'visual' you should see a small window appear with nothing much in it. Once published it should contain your video.

Stuff that occurs to me