Are your Viddler videos cropped when viewed in Internet Explorer but OK in Firefox?

I chose the fantastically flexible and good-looking Mandigo WP theme to build a site and tested a Viddler video on a post and a page. In a page, the Viddler video displayed at the right size on Mac & PC and in I.E. and Firefox.

However, in I.E on the PC the video in a post was shrunk to 200 wide and 450 high. (It displayed correctly in Firefox on both PC and Mac).

I did a quick test: dropped a YouTube video into both post and page. This displayed correctly in I.E. and Firefox…. so….

I then used the YouTube script and changed out the Viddler source file!

Presto! The viddler video playing correctly on Mandigo theme in Internet Explorer.

I’m not a programmer, and I can’t tell you what it is in Viddler’s embed code that caused that problem, but YouTube’s embed code looks slimmer, for starters. Anyone out there come across the same problem and can shed any light on it?

How do I put an image map in a WordPress.org page, post or widget?

Being able to define bits of an image as ‘buttons’ for links is handy – it gives you greater graphic control over your pages, for a start.

For a blogging newcomer it’s not easy or obvious though and a Google search reveals the usual lack of simple ‘how to’ information.  Forget the WP Codex (unless you’re a complete geek or you enjoy being made to feel stupid because you don’t eat, breathe and sleep Php).

For regular, non-technical folks like you and me, here’s how you do it:

1) Make sure the image you want to use as your ‘image map’ is already hosted somewhere online (i.e. your blog uploads folder or some kind of free image hosting service like PhotoBucket)

2) Go to Chris Seidel’s handy little image-mapping tool and, using the URL of your image, follow the instructions to generate lists of the co-ordinates for the areas in your image that you want to make into ‘buttons’.

For square / rectangular areas (these will be referred to as “rect” in your HTML code) you’ll need 4 co-ordinates (each corner). For complex shapes (these will be referred to as “polygon” in HTML) you’ll need as many co-ordinates as it takes to define the shape.

When you’ve defined the shape, copy and paste the list of co-ordinates for the area into a text file, label them so you know which area they define and save for use in step 4) below.

3) Now copy and paste the following HTML code from this page:

<map id=”counties” name=”counties”>

<area title=”London” shape=”polygon” coords=”357, 523, 361, 534, 369, 530, 382, 528, 388, 524, 386, 517, 398, 517, 398, 510, 386, 501, 382, 494, 372, 499, 357, 503, 356, 522″ href=”http://www.Google.com” alt=”London”></area>

</map>

<p><img usemap=”#counties” src=”http://i768.photobucket.com/albums/xx325/Reviewmylocation/region-map.jpg” border=”0″ alt=”Reviewmylocationmap” width=”550″ height=”651″/></p>

…and paste it into a document so you can edit it.

The above code is what makes the image map at the bottom of this page work.  You can see that I’ve defined a single area – London – to act as a button (in this case, linking to www.google.com).  This button is defined by the red block of code.

To turn it into your image with your selected area, you’re going to need to replace the image URL with your image’s URL, the co-ordinates with your co-ordinates (refer to your lists), the names you want to give your button and the link URL you want the user to go to when the button’s clicked.

When you’ve done that, save it and test it by pasting it into a post on your blog – making sure that you paste it into the HTML window of the post editor, NOT the Visual editor window (as it won’t work).

4) To make more areas of your image into buttons, go back to your HTML and copy/paste that red block as many times as you need buttons between the green tags.

5) Then go through each area of red code and replace the existing co-ords with new ones from your saved area lists.  Then do the same for the area names and the target URLs.

Hope that was useful – leave a comment to let me know how you got on.

‘mu:kaumedia presents an idiot’s guide how to start blogging

Start Blogging: Step 1

Decide why you want to do it.

Here are some good reasons (make sure you know which applies to you before you start)

• Raise your business profile in Google • Have a website that you’re in control of • Save money • Make money • Communicate with your employees and customers • Create a niche site for your Fawlty Towers obsession • Sell things • Share your memoirs • Create a site for your group or club • Promote a time-limited product or event

[Read more...]

‘Customise your permalinks’: a self-destruct button for the unwary?

Oops, I did it again.

In your settings, WordPress gives you simple click-box options to change your default numeric post URLs to more search-engine friendly ‘wordy’ URLs.

Naturally, you’ll be tempted to go ahead and do that.  DON’T! Stop! Look! Listen – and call the person whose servers your domain sits on first.

It may be that you need something set on your servers before clicking those options in WordPress. Why?  Because if it isn’t set, your attempt to redefine your permalink structure could – at the check of a little radio box – instantly render your site gone.   As in invisible; non-existent.

If you’re a serious techie and you run your own server, no problem.  Otherwise this is equivalent to a throbbing red ‘self destruct’ button on the WordPress dashboard. I should know.  I’ve already pressed it twice.

If you’ve pressed the button and your site has disappeared, don’t panic.

Just stop, go to bed (DON’T mess about with your FTP and DON’T consult the Codex as it will only confuse and depress you more) and get ready to make friends with your web host first thing in the morning.

Luckily, I’m already friends with the now-almost-saintly Gordon Henderson of Drogon Systems and he fixed the problem before I even got out of bed this morning.

It’s easy. This is how Viddler embeds in WordPress.

If you’ve got a webcam, you can sign up to Viddler and record your video podcasts directly to their system. That’s one way it differs from YouTube.

Like YouTube, you can then easily embed them in your website / blog pages – but unlike YouTube, Viddler allows you to tag and comment on various parts of your video. (Oh no!)

The result is comments embedded in your video which (and I haven’t played with this yet) presumably make your content more ‘findable’ by search engines.

Let’s click publish and see.

That’s pretty simple – you just need to remember to paste the player code into the HTML editor window when you’re making a post (not the VISUAL editor window).

There are basically two kinds of video streaming: ‘http streaming’ (what’s happening here) and ‘proper, real, serious streaming’ (what costs).

The upside of http streaming is that in 5 minutes, anyone can be doing it. The video and sound quality can be as high or low as you like (depending on your equipment). The downside is that for people with less-than average broadband (like us) the buffering lag (the time you wait for the thing to start playing) is pretty long.

Simple choice, though. Get it free or pay for it.

A quick comparison (more later) shows that YouTube has a faster streaming time than Viddler.