Wednesday, 12 September 2012

Embedded twitter timelines in Blackboard

This week, I've been preparing for the start of our Learning Technologies module - offered to academic staff as part of our Higher Diploma in Academic Practice at NUI Galway. I have blogged, in the past, about the wonderful work carried out by participants on the module, and we have done some initial investigations into the longer term impact of the module.

Using the old twitter embed code
Twitter is just one of the many tools we use as part of the module, both to support communication between participants, and for them to reflect on how they might make use of it in their own teaching practice. Since we also use Blackboard as our VLE, it's useful to bring the course twitter feed into the Blackboard course, to help link various strands together.

In the past, embedding a twitter feed was not straightforward, but was certainly possible. A quick google search would bring up instructions, and allowed us to produce some nice results (see image).

So, I was really delighted to see that just last Friday, Twitter have announced a new way to embed timelines, making it easier to embed a public twitter stream into a webpage. The old embed codes will no longer work from March 2013.

Since I was already working on my Blackboard course for the current year, I thought I'd give it a try.

Step 1: When logged into, go to your settings page and select Widgets from the left menu bar.

Step 2: Click Create New, to create and configure a new timeline widget.

Step 3: Choose a timeline source. In my case, I want to search for course related tweets, using the #cel263 tag. I leave everything else at the defaults. The preview is looking good so far!

Step 4: List the domains where this widget will be embedded. I use the domain for this blog, and also the domain for blackboard (which is on a secure server).

Step 5: Click on Create widget. Success, my widget has been created and I just have to copy the embed code!

Step 6: Now, in my Blackboard course, I create a new item and paste the embed code into it. I'm done!

Except that this wasn't really what I was expecting...a rather disappointing "Tweets about..." link.

Clicking on the link will open a new page, but produces a Blackboard error message.

It's not particularly elegant!

When I first encountered the problem, I tweeted about it. I've had a couple of replies from other people experiencing the same issue.

I also posted on the Official Timeline Questions blog, but to date have seen no reply.

Has anybody figured this out? Please let me know. For the moment, I'm sticking with the old embed code.

21 September 2012: Update

Hooray! The embedded twitter widget is now working for me. The problem, it appears, was with secure sites (https) but a fix has been implemented. Now, what I see when I insert the code is much, much nicer.

31 January 2013: Update

In response to a couple of queries, I didn't implement the fix, I presume Twitter did. The one change I did make in the narrative above is in the list of domains at step 4. This now looks like:
I don't know how important the last * is, but it might make all the difference!


Rptrpn said...

Thanks for writing this post! I wish I could get it to work with our Blackboard, though - for some reason the Blackboard text editor keeps mucking up the javascript (changes it to // <![CDATA[...) - have you heard of that happening to anyone else using Blackboard?

Unknown said...

Thanks for your comment.

I haven't heard of this happening. What version of Blackboard are you on, and are you making sure to switch to HTML source mode in the text box?

schuesslerphd said...

I am having an issue that appears to be related regarding the https issue. We are on BB9 (BB Learn). I create the widget and I am not getting most of the tweets that are being tweeted. Everything I have looked at suggested that it was probably a sites issue in the Widget configuration and my research also suggested that it was an SSL (https) issues so when I say your post, I got excited. But, you don't say what the fix actually was; just that there was one that worked. Can you enlighten us?

Unknown said...

Hi Joseph, thanks for reading and for leaving your comment.

We are also on BB Learn 9.1 SP8.

I don't think that my issue was the same, since (from my reading) you are actually seeing the tweets, just not all of them?

The fix I refer to is one that was implemented by twitter, presumably in response to a number of queries from people like myself. So, what I was doing originally was correct.

One change that I made, which might make all the difference, is at step 4 in my narrative, where I list the domains for the widget. As well as listing the blog domain and our blackboard domain, I also included *

Anyway, I wish you best of luck with this. It is incredibly frustrating when you know that something should work, but it's just not happening.


// bga said...

Hi Sharon,

Thanks for this great post! I am having a similar issue, except that when I paste in my embed code I get nothing but the code itself. It is as if I pasted it in the text editor instead of in HTML mode (which I did not do). In fact, my Twitter widget setup screen doesn't even show a "domains" field. ?? Any clues? I am using BB 9.1.

Thanks, anyone, in advance!


Unknown said...

Hi Bonnie,

thanks for your comment. Indeed, the widgets set up appears to have changed - again! The domains field is no longer available. Even when I go to edit my previously created widget, the domains field has gone. I can confirm that it is still working in Blackboard though.

I just tried to create a new widget and successfully added it to Blackboard. The embed code is fine.

We're also on Blackboard 9.1, service pack 8.


Susan Folan said...

Sharon, pardon my possible ignorance but does this embed all tweets of just the ones with the #s you want to appear. (Not all of my tweets are as relevant to students!)

Unknown said...

Not at all Susan, please ask whatever questions you like - and thanks for reading!

In my example, I chose to just embed tweets with the course hashtag #cel263. This displays all tweets (from anybody) who uses that hashtag.