Making it Legit.: Embedding HTML widgets (like Twitter) in your Moodle “blocks”


You can embed cool little widgets into your Moodle site like the one you see to the left. Anything from local gas prices, count down clocks, and even Twitter can be placed in these html widgets via html code. It’s not as hard as you might think.

Use this graduation countdown clock as your guinnea pig and then try to embed Twitter (code can be found here).

If you look above and to the right in the image, you can see both the graduation clock as well as the Twitter feed.

Here are the steps (or watch the video at the bottom of the page for Twitter specific information).

1. Within moodle, go to “blocks’
2. add HTML block
3. Click on configuration
4. Click on “toggle HTML code” … looks like this <>
5. Cut and paste the following code into the block (for Twitter skip to #9).

<div style=”width: 195px; height: 107px; font: 0px sans-serif; text-align: center;”>
<br /><a href=”http://www.onlinecountdowns.com” style=”font: bold 8px arial; padding-left: 9px;”>ONLINE COUNTDOWN CLOCKS</a></div>

6. Title it something
7. Save
8. Move up or down on your page as you see fit.

——————————————————————

9. Open Twitter in a new window and keep your NetSchool window open as well.  For Twitter you’ll do largely the same thing.  Log into your twitter account first.

10. Click on the settings tab or find the settings icon (looks like a gear).  Click on it.

11.  Click on the “Widgets” menu

12. Click on “create new”

13. Click on the “search” tab.

14. Type in the hashtag (#) you want to post in your feed (ie. I created a unique hashtag that only my students would be aware of.  If you use something common…like #history…you will be overwhelmed with outsiders posting to this #… I would add my name and discipline to a hashtag and maybe even the school year to make it unique.  Example: #SmithART1314).

15. Uncheck “show only top tweets”, CHECK “safe search mode” and UNcheck “auto-expand photos”

16. Click “save changes”

17. To the bottom right you’ll see a field with html gobbelty gook.  Copy or cut ALL of it.

18.  Go back to your netSchool page and paste the twitter html code into the html field in your netSchool open block.

19.  Save and gloat to others!

There you go…Legit!

Advertisements

About Thrasymachus

2013 Northwest ISD teacher of the year, Humanities Texas 2012 Outstanding Teacher of the Year Award, and 2011 Outstanding Educator of North Texas Award (North Central Texas College). I'm currently a Regional Digital Learning Consultant with the Education Service Center Region 11 in Ft. Worth, Texas and a college government educator who incorporates philosophy, technology & humor. A student through and through, I walk with my students in their learning. Most importantly, I'm blessed with the 3 most perfect kids eva! I love on them ery day!!!
Gallery | This entry was posted in Technology and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s