CoverItLive in a WordPress.com Blog

Posted on December 23, 2011

9


BCWineChat CoverItLive as displayed on BCWineChat.com

BCWineChat CoverItLive as displayed on BCWineChat.com

I’m of two minds about CoverItLive: on the one hand, there’s nothing better at pulling in multiple realtime feeds and combining them into actual content and a coherent conversation all at once. It can even pull in emails and display media like videos and photos in the CiL box. Slick! On the other, it’s an iframe.

Iframes and WordPress.com, you may recall, don’t get along. So when a client came to me wanting something that would gather all the tweets in a weekly hashtag Twitter convo in realtime and embed them in the blog without jumping through thousands of hoops or dealing with pop-ups or clickthroughs, I had to do some fast thinking to find a solution.

Sandra Oldfield is winemaker at Tinhorn Creek Winery, and owner of probably of one of the Okanagan’s best views as well.  See for yourself:

Tinhorn Creek view

Tinhorn Creek view

Every Wednesday on Twitter she hosts the #bcwinechat for other growers, winemakers, sellers, and consumers. She wanted a way to archive each week’s conversation without the annoying task of sourcing the tweets one by one and posting them to the blog in reverse order, so people could follow the conversation. Naturally; who wouldn’t want to save something like ten hours’ of work a week? She had me out and over an amazing lunch at Miradoro I suggested CoverItLive, which does exactly what she wants.

Of course, nothing is ever easy, and it seems that while most sites that offer an iframe code nowadays also offer a Flash or other embed code, CoverItLive has nothing but an iframe full of javascript, both of which are big no-no’s at WordPress.com. Here is the code from Nancy Zimmerman‘s YourMoneyByDesign launch event:

</pre>
<iframe src="http://www.coveritlive.com/index2.php/option=com_altcaster/task=viewaltcast/altcast_code=360c0cdf93/height=550/width=470" frameborder="0" scrolling="no" width="470px" height="550px"></iframe>
<pre>

As you can see, there’s really no way to convert that to a simple Flash code so I can stick it in Vodpod and use the Vodpod code, which is the procedure I normally use. Back in the day, you could use Vodpod to embed anything up to and including a live cow in a WP.com blog, but those were the good old days and that’s no longer the case. I tried anyway, and got “embeds from that site are not supported at Vodpod” alas.

They DO provide what they call “WordPress code” but all it does is open a little pop-up, which my client didn’t want.

On to Plan B. Or Plan C, I forget which it is. Anyway, after trying the workaround Netty suggested using Tagul and a couple of other things and about four hours of my life I’ll never get back, I gave up and emailed the master, Panos. He replied that he’d tried it too, and so far hadn’t come up with a way to do it. More and more sites are switching to default iframe code, because Flash of course doesn’t work on iPhones and iPads, so it looks like the pressure is on to find this solution.

I did.

But I cheated.

The two words you need are “Custom Menus“. Using a custom menu, Sandra took the “WordPress code” they gave her, of the format

 <a href="URL">Click Here</a>

Grabbed the URL itself, put that in a custom menu, and poof! The chat appears to be embedded right in the blog, clickable from the front page. Each Tuesday, she’ll take that down and put the “WordPress code” in the relevant blog post, and stick up the link to the next chat in the Custom Menu (CiL allows you to make the event in advance and launch at a scheduled time). Eh Walla! CoverItLive kindasorta in a WordPress.com blog without pop-ups or a lengthy click trail or heavy lifting in the workaround department!

Sandra Oldfield says Cheers to that!

Sandra Oldfield says Cheers to that!