Creighton Students
Manual Home  >  Typo3 assistance  >  Common Tasks  >  Adding a Facebook, Calendar or Twitter Widget
Adding a Facebook or Twitter Widget

Note:

Adding a Facebook, Twitter or any other widget can slow the loading of you page.  This is due to it's loading content from another site. Most of these widgets have a "loading" image, something that indicates it's loading content.  Sometimes it will delay the loading of the whole page, sometimes only the widget.  There is little we can do about this, it's just a fact of internet life.  

Please let the webteam know when you are adding a widget to your page.  Why?  The Javascript that is used in your widget may interfere with Javascript already used on your site or page.  It's rare but it could happen, so let us know.

Another reason to contact the webteam is that almost all of these will come at a set width.  You can specify this width when you get the code to plug into your site.  If you don't know the correct width of where you are gong to place it, you could actually break your site's looks especially in Internet Explorer 6.  So contact us, tell us where you want it and we'll let you know the width it should be.  And if for some reason it doesn't work or it's still to wide, not to worry we can change their code to fix this.

We can also add a Creighton Calendar to your site.  This is not something that you can do, we have to add code to Typo3.  Also you will need to contact the Calendar team to create a calendar specific to your group.  You can do this through the service desk (servicedesk@creighton.edu, (402) 280-1111).  So contact the webteam if you want to add a calendar to your site.

First get the code

The first thing you'll need to do is get the code for the widget.  

You can find some Facebook widgets (they call them plugins) here (http://developers.facebook.com/plugins). 

You can find Twitter widgets here (https://twitter.com/goodies/widgets).

You can also search for widgets.  If you find one that you want to use that was not created by the respective developers at Twitter or Facebook (or a least vetted by them) the webteam should take a look at them before you add them.  Sadly these days you cannot be too safe.  

New HTML Element - Main Typo3 Server

To top

General Tab

  1. Type - this would change the Text element to another of the different content elements available.  You can choose Text, Insert records, Site Map, Header only, HTML, Mail form, and Plugin.
  2. Columns - what column you want the content in, Normal, Left, Right or Border.  At Creighton we almost always use Normal for the center/main content.  Left and Right columns are obvious and Border usually is below the Normal content with styling separating it from the main content.
  3. Index - if you are using a Section Index Menu (creating bookmarks to the content on the page), that menu would show only the content elements with Index checked.
  4. Hide this content element
  5. Name, this is for your convenience so you can identify what that element is.  It shows up in List or Page.  
  6. To Top - this will create a "To Top" link below this content element.

To top

HTML Tab


Not much to it, just a large text area.  In here you would put your HTML.  

Note:  Text entered here will show up on the page as it would from the Regular text element.  However it will not get the tags usually assigned to it and may not get any styles.  Text that you want to show up on your page should be put into a Regular text Element.

Please do not use this to add content from another site.  Many other sites especially those created with a wysiwig editor like Front Page or Dreamweaver have tags that are no longer considered valid and may, indeed, cause problems with your site.  The webteam cannot support content pulled from other sites.  

Add the code and test

Copy the code from the site where you created it and paste it into the HTML textarea of the HTML content element you just created.

Click image for full size:


Save your work and preview the page.  PLEASE NOTE - many of these will NOT work in the "view" module.  You will need to actually view the page in the browser.

This is an example from my own twitter feed (I do not post often, I'm quite boring)

Creighton University