Stuff that occurs to me

All of my 'how to' posts are tagged here. The most popular posts are about blocking and private accounts on Twitter, also the science communication jobs list. None of the science or medical information I might post to this blog should be taken as medical advice (I'm not medically trained).

Think of this blog as a sort of nursery for my half-baked ideas hence 'stuff that occurs to me'.

Contact: @JoBrodie Email: jo DOT brodie AT gmail DOT com

Science in London: The 2018/19 scientific society talks in London blog post

Showing posts with label embedding files. Show all posts
Showing posts with label embedding files. Show all posts

Sunday, 1 September 2013

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.




Wednesday, 27 July 2011

How to embed audio in PowerPoint presentations and convert m4a to mp3

Shortened link for this post is: http://is.gd/Fm5zuS

I've just discovered how to do this so I'm writing it down in my blogojournal as an aide memoire for when I find that I have to do it again.

As part of a workshop that my colleagues on the CHI+MED project are running we've been asked to put together a single slide to tell delegates who we are and what we do. For those not attending the workshop to deliver the slide in person we can add the audio and set it to run for us.

I've definitely done this before as we've previously used digital stories (we're a large project stretching over four universities and two hospitals and it's helpful to know who everyone is when we all get together as there are always new people) but could I remember how? No.

On Twitter @cvelhas was kind enough to give me the answer: "Hey Jodie, go to Insert, then Audio, then Record Audio :)" and she's right.

On my version of PowerPoint, clicking the Insert tab brings up a range of icons the last of which is the Audio one - clicking that brings up the option to:

Insert audio from file...
Clipart audio... (yikes!)
Record audio...

At first I tried to record but it turns out that my microphone and recording system aren't working very well on this computer.

So I recorded it on my iPhone (using the Voice Memos app that comes with it) and emailed the resulting .m4a file to myself (click on the icon with three lines, select the relevant memo, click the blue Share button and choose email - you can also do this via USB / iTunes).

It did sort of work when I embedded it into the slide but it was a struggle, and rather than appearing as an attractive 'play audio' icon it looked like a black box. When it was eventually persuaded to play the audio file it wiggled a little green line across the box, in time with my voice. Odd.

Then I googled "convert m4a to mp3" and found this free software which I've downloaded and used and it was all quick and painless. Once I'd remembered where I'd saved the output .mp3 I was able to embed it in the PowerPoint and send it to my colleague.

Peasy.

I also got a message from @liamgh who suggested "have a look at handbrake, vlc and ffmpeg too. All great for converting files - and open source."

I've not tried the others but VLC is amazing.