skip to primary navigationskip to content
 

Adding Twitter embeds with javascript

You can add a Twitter timeline or Twitter buttons to your site's home page or any other page by adding javascript to a static text portlet.

Adjusting HTML filtering to allow the javascript

Before you create the portlet, you need to adjust your html filtering to allow the script to be retained.

To do this:

  • click on your user name and select Site Setup
  • then select HTML filtering
  • under 'Nasty tags', select 'script' and click 'Remove selected items'
  • under 'Stripped tags', select 'script' and then 'Remove selected items'
  • then save your changes at the bottom of the page.

Creating a 'widget' in Twitter

There are two starting points for doing this:

  • If you have one, sign into your Twitter account, and find the account that you want to feature in your timeline.
  • Then click on the three vertical dots to the right of the 'Follow' button, and select 'Embed this Profile'.


    This will take you to the widget creation page.

If you don't have a Twitter account:

Now you are on the widget creation page:

  • First select your display option - either a timeline or Twitter buttons (you get to choose which button). Once done you can adjust what you get by setting customization options – for example, the height of the timeline (the default is 600 pixels), and the colour scheme.
  • When you're happy with the appearance of timeline, click 'Copy Code'. The javascript you need will be copied for you.

Adding the timeline to a portlet

  • Add a static text portlet to your page. Give it a title, such as "Follow us on Twitter". 
  • In the HMTL view of the editor, add the embed code for the Twitter feed and click update. Then scroll to the bottom of the page a click 'Save'. You can return to your page to view result and, if you need to, return to the widget creator on Twitter to make any adjustments to the timeline – for example, adjusting the height.

Adding a button to a portlet

  • Add a static text portlet to your page. Give it a title so you can remember what the portlet is for. 
  • In the HMTL view of the editor, add the embed code for the Twitter feed and click update. Then check the box 'omit portlet border', scroll to the bottom of the page a click 'Save'.
  • You can return to your page to view result and, if you need to, return to the widget creator on Twitter to make any adjustments to the timeline – for example, adjusting the height - then paste in the code again and save.