cancel
Showing results for 
Search instead for 
Did you mean: 
bradhorn
Community Member

How do I embed *one* tweet?

Jump to solution

Hi, everyone. Apologies for dragging Donald Trump into Canvas, but here's what I'm dealing with....

If I go to a news website, embedded tweets usually look like this (which I like):

251715_Screen Shot 2017-09-12 at 2.00.48 PM.jpg

But when I try to embed just that one tweet into a Canvas page I get this (which I do not like):

251716_Screen Shot 2017-09-12 at 2.02.30 PM.jpg

How do I get the embed to look like the news site rather than what I have above?

The method I'm using to embed the tweet is: alt+F9 > Insert > Media > embed, and then I insert the embed code provided by Twitter. I get the same results when pasting the embed code into Canvas's HTML editor. The embed code is this: 

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Wow, CNN had to retract big story on &quot;Russia,&quot; with 3 employees forced to resign. What about all the other phony stories they do? FAKE NEWS!</p>&mdash; Donald J. Trump (@realDonaldTrump) <a href="https://twitter.com/realDonaldTrump/status/879648931172556802">June 27, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

For what it's worth, here is the url directly to Donald's tweet: https://twitter.com/realDonaldTrump/status/879648931172556802 

Thanks for any help, Canvas Friends.

20 Replies

Poor Brad, he's probably all like:

meme saying

Ha ha ha, it's true.

I could talk about the teaching uses of Twitter all day, though.

I used your McCoy meme in the profile pages discussion btw. THANK YOU!!! 🙂

laurakgibbs
Surveyor

Presto:

Embedded Tweet: CanvasLIVE Playground 

Plays media, you can like, retweet etc. Dynamic, not static, like screenshot below.

screenshot of embedded tweet

View solution in original post

Thanks, everyone. laurakgibbs —unfortunately I don't know how to take your link and turn it into an embedded object. Am I supposed to look at the script here? Thanks especially to awilliams just for being awilliams.

Hi bradhorn‌ I was just following the instructions that I mentioned in the earlier comment:

An #InstCon Twitter Widget in Under 5 Minutes 

The only difference is that instead of these steps:

3. Click Widgets.
4. Create New: Search

You could go to the tweet you want to embed and click the down arrow to get the code to embed tweet:

embed tweet screenshot

You then paste in that code into a text file that you upload as a File in Canvas, and then you iframe that File in a Page (or in a Discussion or wherever) per the instructions.

Here's what the code for that tweet looks like: as you can see, it contains a <script> HTML tag, which the Canvas Page editor will strip, but it will be safe as a file:

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Those three words you&#39;ve been waiting to hear:<br><br>EDWARD GOREY CHRISTMAS! <a href="https://t.co/oCsnHqbe29">pic.twitter.com/oCsnHqbe29</a></p>&mdash; Undine (@HorribleSanity) <a href="https://twitter.com/HorribleSanity/status/943192147351633920?ref_src=twsrc%5Etfw">December 19, 2017</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Thanks SO much, laurakgibbs‌! I just used your amazing trick to embed the "Egg Roll Squirrel" Twitter video into one of my discussions! 

egg roll squirrel twitter video embedded in discussion post

Oh my gosh, ha ha, now I too have witnessed eggroll-squirrel! 🙂

tiffany_maglasa
Community Member

This is highly similar to my feature ideahttps://community.canvaslms.com/ideas/9600 (Please upvote), where I wanted to embed a twitter timeline for APA style:

<a class="twitter-timeline" data-width="500" data-height="1000" data-theme="light" href="https://twitter.com/APA_Style">Tweets by APA_Style</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

But, the "custom" HTML code wouldn't work on Canvas... 😞

By the way, I generated this code using publish.twitter.com, which is a very user-friendly way to get the code to embed a single tweet. 🙂

Hi Tiffany! The javascript will work in a File, but not in a Page.

If you publish the script to a File, and THEN iframe that File in a Page, it should work.

That is the technique I use anyway.

Details here:

https://community.canvaslms.com/people/laurakgibbs/blog/2017/07/25/an-instcon-twitter-widget-in-unde... 

Thank you, Laura! I tried this and it did work... But that is a whole LOT of extra (unnecessary) steps... if they would just integrate Twitter javascript like they do for Youtube...