Best Practices for UCL LibGuides

How to add specific types of social media content.

• Where to add a box within a page (right column)
• Twitter feeds
• Facebook posts
• Instagram posts
• RSS feeds (right column)

To add an embedded Twitter feed to your website:

1. Go to Twitter Publish page.
2. Enter the URL of the timeline you’d like to embed.
3. Customize the design by specifying the height. If you do not specify a height the Twitter feed will extend far down the page.  A height of c.400 - 500 px works well. If you do not specify the width it will fill the column.
4. Copy code you would like to embed.
5. Go to your guide and click on the  Add / Reorder button at the bottom of the box where you want to add this.
6. Select Media/Widget from the dropdown menu.
7. Give your asset a name in the Name field. 
8. In the Embed Code field, paste the copied code you want to embed. 
9. Use the Position option to choose where the new asset should be inserted in the box. 
10. Click the Save button.

To embed a Facebook post:

1. Go to the Facebook post you want to embed.
2. Click in the top right of the post and select </>Embed.
3. Copy the embed code.
4. Go to your guide and click on the  Add / Reorder button at the bottom of the box where you want to add this.
5. Select Media/Widget from the dropdown menu.
6. Give your asset a name in the Name field. 
7. In the Embed Code field, paste the copied code you want to embed. 
8. Use the Position option to choose where the new asset should be inserted in the box. 
9. Click the Save button.

To embed Instagram content you need to first visit the post on the web and get the embed code. The post contains the media caption by default. 

1. Go to the post URL if you have it, or you can search for the username on Instagram visit their profile, and then click the post to expand it.
2. Click the more [...] button and select Embed. This will open a dialog where you can get the HTML embed code.
3. Copy Embed Code.
4. Go to your guide and click on the  Add / Reorder button at the bottom of the box where you want to add this.
5. Select Media/Widget from the dropdown menu.
6. Give your asset a name in the Name field. 
7. In the Embed Code field, paste the copied code you want to embed. 
8. Use the Position option to choose where the new asset should be inserted in the box. 
9. Click the Save button.

Library skills and subject guides each have 3 columns.

Left column:

For the navigation menu only.. Please do not add any boxes to the left column. They show at the top of the page when viewed on a mobile device, above the title. The only exception is in Library Skills guides where the image for the relevant skills theme may be inserted without a title below the menu, by re-using the box from the page for the appropriate theme in the re-usable asset guide.

Central column: 

Main and text-heavy content should go in the central column, so that it is easier for users to read and doesn't take up as much vertical space in the guide. 

Right column:

Generally used for calendar feeds from LibCal, useful links, embedded videos and tips.