Friday, September 5, 2014

Embedding Twitter into a D2L Widget

A professor asked me about embedding a Twitter feed into a D2L widget on the course home and after googling it for help we both ran into the same problem - it was just showing a link to open Twitter rather than actually embedding it.

The solution was that the Twitter code was not including a "data widget ID" when you first create a new widget, but this ID is in the Url, so you can copy and paste it out of there.

The code should look like what I have below, but with the parts in red replaced with the twitter handle or search you want and the appropriate data widget ID. 

<a class="twitter-timeline" href="" data-widget-id="507604658731220994">Tweets by @edutopia</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+"://";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Now here's the really weird thing.  When I went into Twitter today to write this post, the data widget ID was there! What the heck!

I made a video showing this:

And if you want info on changing the course home page and creating the widget, we have documentation on this webpage.

NOTE: You can actually tweet right from the widget in D2L.  There is a box at the bottom of the feed that says "Tweet to @lirpapierson" above that would then send me a tweet. If you instead have a hashtag feeding into it, it would say "Tweet #aphasia." The professor I assisted clicked here and it brought up his Twitter account, making him worried that students would also have access to tweet from his account. However, when I clicked there, it brought up my Twitter account. So if the students are logged in, it will be very easy to tweet, and if they are not it should prompt them to login or create an account. It just seems kind of odd at first.