Monday, February 1, 2016

Step 10. Create a Twitter hashtag or list widget.


Step 9 Step 10. Create hashtag or list widget — You're done!


STEP TEN. To finish up this workshop, you'll make one more widget: either a Search widget (for hashtags) or a List widget. Maybe you will even want to try one of each!

For the demonstration, I'll be creating a widget for #FolkloreThursday since it is a widget that is very useful for my classes, and a fun community event that happens at Twitter every Thursday!

So, here are all the steps to create your Twitter widget, starting with Twitter, then creating an HTML file for the widget in your webspace, and finally displaying the widget file in Canvas:

~ ~ ~

TWITTER WIDGET. For detailed screenshots, see Step 5. Create a Twitter widget for your account.

1. Find Settings. Go to Twitter, log in, and click on the profile icon in the upper right corner to access your settings.

2. Find Widgets. From the left-hand navigation, choose Widgets (it's near the bottom).

3. Create Widget. Click Create New and choose EITHER the search (hashtag) OR the list option. I'll be doing the search option (hashtag search).


4. Configure Search. You'll see that the configuration here works a bit differently than the Profile widget (the List widget works just like the Profile). To create the widget, I just enter the #FolkloreThursday hashtag in the search box, and I also changed the height to 800 (pixels), while opting out of Twitter tailoring. To generate the code, just click Create Widget. 



The code will then display; if you do a Search widget, the code is much longer and more complicated than for a Profile or List widget, but that's fine: you are just copying and pasting, so for practical purposes it's all the same.

~ ~ ~

HTML FILE. For detailed screenshots, see Step 6. Put Twitter widget in Canvas File.

1. Create an HTML file. Paste in the code you got from Twitter, and remember to give the file an .html suffix.

2. Upload HTML file to Canvas. To do that, go to your Canvas space, click on the Files in the navigation menu, and then click Upload.

3. Preview File. You should see the Twitter widget working in the preview view. You will then be using the information from the address of this preview to get the information you need for the next step:
https://___/courses/______/files?preview=____

For my #FolkloreThursday example, it looks like this:
https://canvas.ou.edu/courses/56095/files?preview=3857787

~ ~ ~

CANVAS PAGE. For detailed screenshots, see Step 7. Add Twitter widget to Canvas Page.

1. Create a new page. Go to your practice course space, click on Pages, then click View All Pages, and add a new page.

2. Add content. Give your page a title, and then type something in the body of the text to let students know what they are seeing. Then, type INSERT or something that will let you know where to insert your widget. Alternatively, you can work with the two-column table layout option.

3. Create iframe. Paste in the information from your File preview, inserting your Canvas domain, the course number, and file number:

<iframe style="display: block; margin-left: auto; margin-right: auto;" src="https://______/courses/______/files/______/download" width="450" height="850"></iframe>
4. Paste iframe into Page. Now go to your Canvas Page, and switch to the HTML editing view. You can then paste in your iframe.

5. Check results. Click on the Rich Content Editor to return to the WYSIWYG view. You should now see a grey box that marks out the area where the Twitter widget will display.

6. Publish page. Click Save-and-Publish. You should now be able to see the widget at work. Here's the widget I see in my Folklore Thursday page.


And that's all. To become more confident with the basic process — from Twitter to Canvas File and then to Canvas Page — go ahead and more another widget or two. Then, give yourself a pat on the back: you are now a widget magician!





No comments:

Post a Comment