embedding in Bb

12th November 2019

Embedded Panopto Video as a Content Item

Dean Wall Bb Content, Blackboard, embedding in Bb, Panopto

Go to your Blackboard course and navigate to the content area you wish to embed the video. Then under ‘Build Content’ select ‘Panopto Video Embed’.

It will open a new page that will show you previews of the videos in the courses Panopto folder.

Find the video you wish to embed and click on it so it becomes highlighted.

Once happy with the video select click on ‘Insert Video’.

It will then take you back to your Blackboard page and show the video embedded into your course and ready to playback.

From the same interface it is also possible to embed videos from other Panopto folders. Please make sure that you check the sharing permissions of the videos so that your students on your course are able to play them back.

To do this click on the drop down menu under ‘Select Panopto Videos’.

From here you can either type in the search box for the name of the folder that has the recording stored in, or click through folder structure to locate the folder.

Once you have located the correct folder you can add the desired recording as shown in the first set of steps.

3rd April 2019

How to Embed Material from Facebook into Blackboard

Matthew Deeprose Bb Content, Blackboard, embedding in Bb blackboard, embed, facebook

It is possible to embed materials from Facebook into a content item or announcement that you add to your Blackboard course. Note that this method may stop working if Facebook change the way their service works. Facebook is a third party web site and iSolutions cannot be held responsible for the content held on it. iSolutions does not support Facebook. Users should read the Facebook terms and conditions.

Access Facebook

1. Go to https://developers.facebook.com/docs/plugins

2. Choose the type of plugin you wish to use, for this example we will use the page plugin.

3. Click on the Web button

4. Enter the URL of the Facebook page you wish to embed and set the other options according to your preference.

5. There is an explanation of the settings and what the default, minimum and maximum values are on the same page, a screenshot of which is below.

6. When you are happy with the settings, click on Get Code.

7. Two code snippets are shown you will need both.

7. Open a new tab and go to Blackboard https://blackboard.soton.ac.uk

8. Identify where in your Blackboard course you would like to place the feed, add the item, announcement etc. Add the item desired.

9. Set a Name, and any relevant text in the text box.

Add Item

10. Click on the HTML button within the text box to open HTML mode. This will allow you to enter the HTML code required to embed the Facebook feed.

HTML Button

11. Paste both code snippets from Facebook into the HTML text box. One way to do this is to right click within the text box and choose paste or press CTRL + V. Click on Update to finish.

12. Scroll to the bottom of the page and click on the Submit button.

Submit

13. The Facebook widget you have chosen will now be embedded. Here are two examples:

This example uses most of the default settings.

This example has the timeline, events, and messages for tabs, a width of 450, a height of 600, uses the Small Header, hides the Cover Photo, and does not show friend’s faces.

3rd June 2016

Adding Small Video/Audio files to Blackboard with HTML5 playback

Matthew Deeprose Bb Content, Blackboard, embedding in Bb

If you have video or audio clips which you wish to add to Blackboard that are below 100MB in size you may follow the steps below to upload those clips so that they play within an HTML5 compatible framework. This will provide the highest level of compatibility with modern web browsers and devices.

If your content is larger than 100MB we strongly recommend using the media streaming service detailed at http://elearn.southampton.ac.uk/panopto/uploading/

1. From within your Blackboard course, with Edit Mode enabled, hover over build content and choose item.

2. In the text box, click on the Insert/Edit Embedded Media icon.

3. Select HTML5 Video or HTML5 Audio as appropriate. The best video format to use is mp4, and the best audio format to use is mp3. If you find the video format you are using is not compatible convert it to one of the aforementioned formats. (ServiceLine can help you with this.)

*** Ensure your file has an extension in lower case characters e.g. file.mp4, not file.MP4 ***

4. Click on Browse My Computer to upload a file from your computer, or Browse Content Collection to select a file that is already within your Blackboard course.

5. Blackboard will always assume you wish the video to be displayed in a window 320 pixels by 240. You may wish to change this to the dimensions of your video.

6. Click on Insert. Complete the rest of the text box if you wish.

7. If you wish to allow students to download the video you should also add it as an attachment. This will help students whose browsers do not support HTML5, for example in institutions or environments where they are forced to use out of date web browsers.

8. Here is an example of how an HTML 5 video looks, along with having the file available as an attachment.

And here is how an HTML 5 audio looks.

22nd March 2016

Embedding Instagram into your Blackboard course

Matthew Deeprose Bb Content, Blackboard, embedding in Bb

It is possible to use SnapWidget, a free third party service, to create an embed code to add your instagram photos into your Blackboard course. SnapWidget and Instagram are a third party services that are not provided via the University. Users should read SnapWidget’s and Instagram’s terms and conditions.

Note Instagram have changed their rules and regulations. You may now only make widgets of your own content, not that created by other users of Instagram.

1. Go to https://snapwidget.com/#getstarted
2. Enter the your username.
3. Choose the widget type you wish to use, here are some examples of how the different widgets look in Blackboard.

4. Set the other options according to your preference and click on Get Widget.

5. Select the text displayed in the box as shown and copy it to the clipboard either by right clicking and choosing Copy, or by pressing CTRL+C. Take note of the advice about changing http to https as we will need to make this change when we paste the snippet into Blackboard.

6. Now we will go to Blackboard https://blackboard.soton.ac.uk

7. Identify where in your Blackboard course you would like to place the feed, and add the item, announcement etc.

8. Set a Name, and any relevant text in the text box.

9. Click on the HTML button within the text box to open HTML mode. This will allow you to enter the HTML code required to embed the instagram feed.

10. Paste the text you copied into the clipboard from SnapWidget into the Blackboard text box. One way to do this is to right click within the text box and choose paste or press CTRL + V.

11. Change the http text to https.

12. Click on Update to close the HTML box, and then on Submit to finish.

13. Your instagram feed is now embedded within your Blackboard course

Thanks to the Instructional Support & Training team (also known as the iTeam) at the University of San Diego for the tip of using this method.

25th September 2015

Adding a YouTube Mashup to your Blackboard Course

Matthew Deeprose Bb Content, Blackboard, embedding in Bb 0 Comments

Follow this guide to add a YouTube video easily to your Blackboard course. YouTube is a third party web site and iSolutions cannot be held responsible for the content held on it. Users should read the YouTube terms and conditions.

Control Panel

1. Check that Edit Mode is turned ON. This can be switched by clicking ON or OFF.

Choose a Content Area

2. Choose the Content Area to which you wish to add your YouTube link. All the content areas work in the same way, if you have renamed or added content areas to your Blackboard course the screenshot above may vary from what you see.

Add YouTube Mashup

3. Hover your mouse over Build Content and then click on YouTube Video.

Enter Search Criteria

4. Enter your search term(s) and click on Go.

Search Results

5. You should see a list of search results. Pick the video which you want to add to your course, and click on Select.

Add Video

6. You may choose to change the display name for the video as it will appear in your course. You can also choose the colour of the name, and add a description of the video if you wish.

Further Options

7. Choose your preferred view for the YouTube link when it appears in your course. There are three options, each of which is previewed in the following slides. If you wish to preview each view yourself, you can click on Preview at the top or bottom of the page.

8. Choose whether or not you wish to show the YouTube URL for the video, and if you want to show the YouTube Information for the video.

9. If you want to you can attach a file to this content as well (for instance if you have a word document which accompanies the YouTube video). You can add a file from your PC by clicking on Browse My Computer. This is optional.

10. Set the following options according to your preferences:

Permit Users to View this Content
Do you want students to be able to access this content? Selecting No would prevent your students from viewing it, but you would still be able to view it while Edit Mode is ON. The date restrictions option below is a more powerful way of doing a similar action. The default for this option is Yes.

Track number of views
Select Yes to indicate that the system is to track the number of times a user accesses this item.. Select No to indicate that the number of times this page is accessed will not be tracked. Only use this option when you particularly require tracking information. A general report on Course Statistics provides tracking information for the whole course and is available from the Control Panel. For more information about this feature check the link on the right under “What’s Related”.

Select Date and Time Restrictions
If you wish you may restrict when this content will appear. Tick the boxes and determine times and dates as appropriate. Ticking Display After will mean that the content will appear from the time and date that you select. Ticking Display Until will mean that the content will no longer appear (disappear) after the date and time selected has passed. This only affects the way the material appears to students. As a course instructor you can change this setting at any time and the content will always be available to you.

Thumbnail Preview

9. This screenshot shows a preview of the Thumbnail view for a YouTube Mashup.

Text Link with Player Preview

10. This screenshot shows a preview of the Text Link with Player view for a YouTube Mashup.

Embed Preview

11. This screenshot shows a preview of the Embed view for a YouTube Mashup.

Submit

12. Click on Submit. You can preview how your YouTube mashup will look by clicking on Preview.

25th September 2015

Adding links in Blackboard to LinkedIn Learning Tutorials

Matthew Deeprose Bb Content, Blackboard, embedding in Bb 0 Comments

To add LinkedIn Learning

Copy the link to the relevant learning materials in LinkedIn Learning to your browser clipboard
then follow this guide to add the link to your course.
- when you add the link from LinkedIn Learning add the following to the end of the link.

&auth=true

For example a link you copy that looks like this

https://www.linkedin.com/learning/excel-2016-essential-training?u=35146660

should end up looking like

https://www.linkedin.com/learning/excel-2016-essential-training?u=35146660&auth=true

For more information about the LinkedIn Learning service at the University, visit this page.

25th September 2015

Adding a Flickr photo to your Blackboard course.

Matthew Deeprose Bb Content, Blackboard, embedding in Bb 0 Comments

It is now possible to add a Flickr ‘mashup’ to your Blackboard course. Flickr is a third party web site and iSolutions cannot be held responsible for the content held on it. Users should read the Flickr terms and conditions.

Edit Mode

1. Check that Edit Mode is turned ON. This can be switched by clicking ON or OFF.

Content Area

2. Choose the Content Area to which you wish to add your Flickr photo. All the content areas work in the same way, if you have renamed or added content areas to your Blackboard course the screenshot above may vary from what you see.

Add Flickr Mashup

3. Hover your mouse over Build Content and then click on Flickr Photo.

Enter Search Criteria

4. Enter your search keywords and click on Go. Note you can also choose to do an advanced search by clicking on More Options.

Search Results

5. You should see a list of search results. Underneath the thumbnail of each photo there is a Preview and Select button. If you wish to see a larger preview of the photo you wish to use, click on Preview. Otherwise click on Select.

Add Description

6. You may choose to change the display name for the photo as it will appear in your course. You can also choose the colour of the name, and add a description of the photo if you wish.

Further Options

7. Choose your preferred view for the Flickr photo when it appears in your course. You can either choose to display a Thumbnail of the photo (which can be clicked on) or you can choose to Embed the photo. Note that Thumbnails will show as full sized when View Link is clicked. Embed Photo will show the photo directly on the page without the user having to click on a link.

8. Choose the size of the photo to display. Note that not all photo sizes will be available for all photos on Flickr, as this is dictated by the owner of the photo.

9. Choose whether you want to show the Flickr URL of the photo you are sharing, and also whether you wish to show the Flickr Information for the photo (as entered by the Flickr photo owner)

10. If you want to you can attach a file to this content as well (for instance if you have a word document which accompanies the photo). You can add a file from your computer by clicking on Browse My Computer. This is optional.

11. Set the following options according to your preferences:

Track number of views
Select Yes to indicate that the system is to track the number of times a user accesses this item. Select No to indicate that the number of times this page is accessed will not be tracked. Only use this option when you particularly require tracking information. A general report on Course Statistics provides tracking information for the whole course and is available from the Control Panel. For more information about this feature check the link on the right under “What’s Related”.

Submit

12. Click on Submit. You can preview how your Flickr photo will look by clicking on Preview.

25th September 2015

How to Embed a Twitter Feed into Blackboard

Matthew Deeprose Bb Communication, Bb Content, Blackboard, embedding in Bb 0 Comments

It is possible to embed a Twitter feed, into a content item or announcement that you add to your Blackboard course. Note that this method may stop working if Twitter change the way their service works. Twitter is a third party web site and iSolutions cannot be held responsible for the content held on it. iSolutions does not support Twitter. Users should read the Twitter terms and conditions.

Access Twitter

1. Go to https://publish.twitter.com

2. Enter into the text box what you would like to embed.

Note that it is no longer possible to generate twitter embeds for a search term or hash tag.

3. Depending on what you have chosen you may be asked if you prefer an embedded timeline or a twitter button. Embedded timeline is most commonly used.

4. You may be asked to set customization options. The twitter website will explain what these are.

5. Click on the Copy Code button.

6. A prompt will confirm that the embed code has been copied.

7. Now we will go to Blackboard https://blackboard.soton.ac.uk

8. Identify where in your Blackboard course you would like to place the feed, add the item, announcement etc. Add the item desired.

9. Set a Name, and any relevant text in the text box.

10. Click on the <> button within the text box to open HTML mode. This will allow you to enter the HTML code required to embed the twitter feed.

11. Paste the text you copied into the clipboard from Twitter into the Blackboard text box. One way to do this is to right click within the text box and choose paste or press CTRL + V. Click on Update to finish.

Paste code into Blackboard

12. Scroll to the bottom of the page and click on the Submit button.

Submit

13. The twitter widget you have chosen will now be embedded.