Follow

FAQ: How do I embed a Twitter feed in my page?

If you use Twitter and would like to incorporate it into Ultranet, there is a useful little widget that they provide to make sharing and posting tweets even easier. This article will show you how to set it up in your Ultranet page.

Part 1. Getting the Twitter Timeline Widget code

The first step is obtaining the widget code from Twitter. Here's what to do:

  1. Visit the Twitter Widgets page (you'll need to sign in with your Twitter account and open the 'Settings' panel).

  2. Click the "Create New" button.

    twitter-create_widget.jpg

  3. On the subsequent widget configuration page, choose your Twitter timeline source. Your own feed is selected by default, but you can make a widget for someone else's feed or for a particular hashtag.

    twitter-select_source.jpg

  4. Once you have selected the source, you can customise a few visual components of the widget such as size and colour options. 

  5. When you are satisfied with the final presentation, click the "Create widget" button to get the HTML code. Copy this to your clipboard, then click "Save changes" to exit the Twitter widget configuration page.

Notice that the Twitter code contains JavaScripts, which cannot be saved directly in the Ultranet page editor. So we'll need to place the copied code into a blank HTML document before it can be embedded. 

  1. Open a new document in a plain-text editor app e.g. Notepad on Windows, or TextEdit on Mac. (If using TextEdit on Mac, make sure you select the 'plain-text' option under the Format menu before you paste the code on to the document).

  2. Paste the HTML code copied in step 5 above.

  3. Edit the code by adding the following header and footer tags on either side of the Twitter code. 

    <html>

    <head> </head>

    <body>

    <a … THIS LINE IS COPIED FROM TWITTER

    <script …. THIS LINE IS COPIED FROM TWITTER

    </body>

    </html>

  4. Save the document with the filename "twitter", making sure it has a ".html" extension (e.g. "twitter.html", not "twitter.txt").

The Twitter widget is now ready to be uploaded and inserted into an Ultranet page via the use of an iframe.

 

Part 2. Embedding the code into your Ultranet page

Now we'll need to take the Twitter Timeline widget code and insert it into an Ultranet page.

  1. Sign in to Ultranet and navigate to the page you wish to embed your Twitter Timeline feed into. Once there, open up the Page Editor.

  2. Open the Document Manager and upload the HTML document created above. Once it has uploaded, close the Document Manager without inserting anything.

  3. Next, switch to HTML view and paste in the following iframe embed code:

    <iframe src="/DataStore/Pages/CLASS_XX/Docs/Documents/twitter.html" height="620" width="540" frameborder="0"></iframe>

    There are two bits in it that you'll need to customise to suit (highlighted in yellow above):

    • The Page Source – This is the page ID number of where you uploaded the "twitter.html" file above (i.e. the page you are currently on). You can easily see this page ID number by looking at the current web address. It'll look something like "http://schoolname.ultranet.school.nz/ClassSpace/123/". It's the number at the end of that web address. Replace the "XX" in the code above with that number.

    • The Widget Width – This is how wide you want the widget to appear on your page (the minimum value is 230, the maximum value is 540). Adjust this to suit.

    NOTE: Although the "height" parameter is not highlighted above, you can adjust this too if you wish. This will be especially important if you have customised the default height of the Twitter Timeline widget (which is normally set as 600px).  If, having embedded the widget on your page, you want to make a significant adjustment to the height then go back to Twitter and change the height measurement there.  You will then need to take a fresh copy of the Twitter code and create a new HTML file which contains the updated code. This then needs to be uploaded to the page to overwrite the original file.
  4. Flip back to Design view and check to see that your Twitter Timeline loads up as expected. When you're ready, save the page and your Twitter feed is now embedded in your Ultranet!

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk