5 resources to embed in Frog using HTML

I’m a huge fan of using external resources that I know about and love to add another element to a site. The addition of the HTML widget to FrogLearn opens up a whole new world and makes a lot of things much easier to do. With that in mind I thought I would do a rare wordy post about resources you can embed using the HTML widget. The title of each idea will link to the resource for you to try for yourself.

1. ThingLink

ThingLink allows you to enhance an image by creating hotspots on the image to share more information. Users can tag the image with web content and share it with others. There are thousands of images already on there so it is worth searching for the thing you need before spending the time creating. When you have created or found your ThingLink image you will need to grab the embed code. Use the ‘Share’ button to bring up the pop up shown below.

Screen Shot 2014-05-29 at 20.57.19

When you have the pop up window you will need to tick the box to use the ‘iframe embed’ to use it on a site. You will then need to select the height and width of the image on the site or it will take over the rest of the page. 500px width seems quite good but it’s worth having a play with depending on your layout. Now copy the HTML in the box to your clipboard.

Load up your FrogLearn site and drag on the HTML widget. Paste your embed code into the box and save and exit the edit mode. You will now find your ThingLink image with hotspots on your site.

Screen Shot 2014-05-29 at 21.07.24

2. Twitter widget

Add a twitter widget to your dashboard to share school news. Twitter provide their own widget which you can add to your platform. Visit the url above and create a new widget. It can be your personal feed, a search term or even a hashtag you would like to display the tweets for. There are some things you can change to make the widget look and feel how you want it to and make it fit with your theme.

Now select ‘Create Widget’ and you will be provided with a box beneath your twitter widget giving you the html code you need to add it to a site.

Screen Shot 2014-05-29 at 21.13.51

Now open your dashboard and drag out the HTML widget and paste the copied code into the box in the content panel. Save and exit and your twitter feed will display on the page.

Screen Shot 2014-05-29 at 21.17.09

3. App Store widget

If you use Apple devices in your classroom you may want to share some of the useful apps that you use with your students or share apps with staff. Apple offer their own widget builder that allows you to search the iTunes store and build a widget with apps, books, music, TV shows, Movies or anything else the App Store contains. Simply select which kind of widget you would like to create and then add the content to your widget.

In the example below I have created a widget to show a list of apps that I have selected from the app store.

Screen Shot 2014-05-29 at 21.24.04

Now open your FrogLearn site and add the HTML widget. Paste the code that is provided at the bottom of the page where you created your App store widget. Save and exit the edit mode and your App Store widget will display on the page.

Screen Shot 2014-05-29 at 21.28.28

4. Amazon Widget

Amazon also has a widget builder. This one can be made in some different ways but I will be using the carousel widget to show some books that are part of a topic or course. The link above will take to you to the widget builder. Just start searching for the books that you want and adding them to the ‘Show in Widget’ box that will be displayed as soon as you start searching and adding books. Add all of your books and click next to see your widget and make changes to layout and size. You will need to add at least 6 books to the in order to create your widget. Once you are finished altering your widget select the ‘Add to my Web Site’ button and copy the HTML code provided.

Screen Shot 2014-05-29 at 21.41.31

Now open your site, add the HTML widget and paste the code into the box to show your widget on the page.

5. Office Web Apps

With a free OneDrive account you can embed Powerpoint files, Word documents, Excel spreadsheets and PDFs into your sites. Upload your file to the ‘Public’ folder (this is very important. If it’s not in the public folder it won’t display to all users). When you have uploaded the file select the file by filling in the tick box on the file icon. You will then be given the option to embed the file on the toolbar.

Screen Shot 2014-05-29 at 21.47.21

You will then be provided with a preview of the web app that you can embed along with an box containing the HTML code you need for your FrogLearn site.

Screen Shot 2014-05-29 at 21.49.52

Copy the HTML and paste it into the HTML widget on your FrogLearn site. Save and close and your file will be displayed on the page. PowerPoints will keep animations and timings, Files will be scrollable and users can select to view in full screen in needed.

Screen Shot 2014-05-29 at 21.52.50

This is the tip of the iceberg. I’d love to hear of the resources you are using on sites using the new HTML widget. Look out for part 2 of this post with more ideas for resources to add to your platform.


You may also like...

6 Responses

  1. Andrew Caffrey says:

    The HTML Widget is great and opens up lots of possibilities – here are five sites from me: http://mrcaffrey.wordpress.com/2014/05/31/embedding-in-frog-learn/

  2. shelley french says:

    Is the html widget available to all now? I’m not sure we have it in our FrogLearn…

  1. June 2, 2014

    […] Timmins has also come up with a list of resources:¬†http://bytemeict.co.uk/5-things-you-can-embed-with-html/ and some media […]

  2. January 3, 2015

Leave a Reply

Your email address will not be published. Required fields are marked *