CONTENTS

WHAT IS?

iHigh

HOW DO I?

BROADCAST ISSUES

BROADCAST TIPS

General » iHigh.com Widget Tutorial


How to use the iHigh Widget to Increase Your Traffic



The iHigh widget is a small application that can be added to a non-iHigh.com site. It can include thumbnails of your school's videos and photos and a live news feed from the iHigh article submissions. The widget is easy to add to your school's main home page or to a local newspaper site or a school sponsor site.

Each iHigh site now has a link to the HTML code for the widget. You can just cut and paste this code and send it to the webmaster of the site you would like the widget to appear on. If they add it to their site, every hit to their site becomes a hit to your iHigh site and every unique visitor to their site becomes a unique visitor to your iHigh site even if they do not actually go to YOUR site!

To access this widget just logon as an administrator, go to your Website Tools section, click on "iHigh.com Widget Code". You will then copy and paste the code into the HTML page for your school or sponsor's site.

There are currently nine different widget options to choose from:

Customizable Widgets



These all-new widgets were created in response to many schools asking if they could customize a widget to fit a particular size, incorporate their school colors, or adjust the fonts and thumbnail images. So we designed three different widgets to do exactly that!

Global Customizable Widget



Here is the complete widget code:

<iframe
  src="http://www.ihigh.com/yourschool/widget.html?journalonly=1&imagesize=50&fontsize=8&background=white&textcolor=black&linkcolor=black"
  framespacing="0"
  frameborder="no"
  scrolling="auto"
  allowTransparency="true"
  width="300"
  height="600"
  style="position:relative;z-index:0;"
  border="0">
</iframe>



The code contains several variables that you can customize to suit your needs. First, we'll look at the "imagesize" variable.

  src="http://www.ihigh.com/yourschool/widget.html?journalonly=1&imagesize=50&fontsize=8&background=white&textcolor=black&linkcolor=black"

The "imagesize" variable lets you adjust the size of the thumbnail images in your widget. Here's an example of the imagesize set to 50:



Now let's change that imagesize variable to 20:

  src="http://www.ihigh.com/yourschool/widget.html?journalonly=1&imagesize=20&fontsize=8&background=white&textcolor=black&linkcolor=black"



Now we'll adjust the "fontsize" variable. Here's an example of the fontsize set to 8:



Now let's change that fontsize variable to 12:

  src="http://www.ihigh.com/yourschool/widget.html?journalonly=1&imagesize=20&fontsize=12&background=white&textcolor=black&linkcolor=black"



Now we'll look at the "background" variable. You can use standard named web colors or use hexadecimal color codes to match your iHigh website. Here's an example of the background set to white:



Now let's say your school colors are gold and black. You can change the background variable to "gold":

  src="http://www.ihigh.com/yourschool/widget.html?journalonly=1&imagesize=20&fontsize=8&background=gold&textcolor=black&linkcolor=black"



Or, you can use your school's specific hexadecimal color code (for example, #D0AC24) for an exact match:

  src="http://www.ihigh.com/yourschool/widget.html?journalonly=1&imagesize=20&fontsize=8&background=D0AC24&textcolor=black&linkcolor=black"



Now we'll look at the "textcolor" variable. Like with the background, you can use standard named web colors or use hexadecimal color codes as your textcolor. Here's an example of the textcolor set to black:



Let's say your school colors are navy blue and gray. We'll set our background as "gray" and our textcolor as "navy":

  src="http://www.ihigh.com/yourschool/widget.html?journalonly=1&imagesize=20&fontsize=8&background=gray&textcolor=navy&linkcolor=black"



You'll notice the actual links to your iHigh content are still black. This is where the "linkcolor" variable comes in:

  src="http://www.ihigh.com/yourschool/widget.html?journalonly=1&imagesize=20&fontsize=8&background=gray&textcolor=navy&linkcolor=black"



Now, to better distinguish the links from the regular text, let's change that linkcolor variable to a lighter shade of blue:

  src="http://www.ihigh.com/yourschool/widget.html?journalonly=1&imagesize=20&fontsize=8&background=gray&textcolor=navy&linkcolor=0071FF"



You can also adjust the dimensions of the widget to fit any space you need. These settings are easily adjustable by pixel height and width. Let's start with a 400x400 widget:

  width="400"
  height="400"



Let's change the widget's width to 250:

  width="250"
  height="400"



Now we'll change the height to 250 as well:

  width="250"
  height="250"



You can change the dimensions to fit any size you need:

  width="750"
  height="150"




Whether you want to customize your widget with your school colors, or you have to make it fit into a specific space on a website, the new Global Customizable Widget gives you all the flexibility you need.

Upcoming Broadcast Customizable Widget



Like the Global Customizable Widget, this widget can also be tailored to suit your particular needs - but it will only display your iHigh website's upcoming live broadcasts. Here is the complete widget code:

<iframe
  src="http://www.ihigh.com/campbell/widget.html?journalonly=1&spacing=20&fontsize=8&fontfamily=Arial&fontweight=normal&background=white&textcolor=black &linkcolor=black&broadcastjournal=1&broadcastjournaltype=upcoming"
  framespacing="0"
  frameborder="no"
  scrolling="auto"
  allowTransparency="true"
  width="300"
  height="600"
  style="position:relative;z-index:0;"
  border="0">
</iframe>
iFrame Variables:
  width - Width of the Widget.
  height - Height of the Widget.
  border - Widget border width.

iFrame src URL Variables:
  spacing - Height (in pixels) of each row.
  fontsize - Size (in points) of font.
  fontfamily - Font family. Examples: Arial, Verdana, Courier, Serif. Feel free to comma separate values for fallback font.
  fontweight - Font weight. Examples: normal, bold, bolder, lighter. Also can use values 100 through 900 (normal being 400).
  background - Background color. Examples: red, white, black. Also can use hex values (without the preceding #).
  textcolor - Text color. Examples: red, white, black. Also can use hex values (without the preceding #).
  linkcolor - Link color. Examples: red, white, black. Also can use hex values (without the preceding #).

Notes:
  - Use contrasting background and text/link colors. White on black, black on white, etc.
  - Do not go much over 75 on imagesize width. The original thumbnail image size is 75 pixels wide.
  - If the widget is under or above a DHTML element on the web site you are implementing on, change the z-index value.



Here is a working example of the Upcoming Broadcast Customizable Widget:



Archived Broadcast Customizable Widget



Like the previous widgets, this one can also be tailored to suit your particular needs - but it will only display your iHigh website's archived broadcasts. Here is the complete widget code:

<iframe
  src="http://www.ihigh.com/campbell/widget.html?journalonly=1&imagesize=50&fontsize=8&fontfamily=Arial&fontweight=normal&background=white&textcolor=black &linkcolor=black&broadcastjournal=1&broadcastjournaltype=archived"
  framespacing="0"
  frameborder="no"
  scrolling="auto"
  allowTransparency="true"
  width="300"
  height="600"
  style="position:relative;z-index:0;"
  border="0">
</iframe>
iFrame Variables:
  width - Width of the Widget.
  height - Height of the Widget.
  border - Widget border width.

iFrame src URL Variables:
  imagesize - Width (in pixels) of each thumbnail. Max should be around 75 (full size thumbnail).
  fontsize - Size (in points) of font.
  fontfamily - Font family. Examples: Arial, Verdana, Courier, Serif. Feel free to comma separate values for fallback font.
  fontweight - Font weight. Examples: normal, bold, bolder, lighter. Also can use values 100 through 900 (normal being 400).
  background - Background color. Examples: red, white, black. Also can use hex values (without the preceding #).
  textcolor - Text color. Examples: red, white, black. Also can use hex values (without the preceding #).
  linkcolor - Link color. Examples: red, white, black. Also can use hex values (without the preceding #).

Notes:
  - Use contrasting background and text/link colors. White on black, black on white, etc.
  - Do not go much over 75 on imagesize width. The original thumbnail image size is 75 pixels wide.
  - If the widget is under or above a DHTML element on the web site you are implementing on, change the z-index value.



Here is a working example of the Archived Broadcast Customizable Widget:



Standard Widget Configurations



Now we'll look at some fully functioning examples of the other widgets iHigh offers. You can find the code for these widgets by clicking on "iHigh.com Widget Code" under your Website Tools section:

Standard 300x600 Widget





Wide Format 800x265 Widget





Wide Format 575x265 (No Journal) Widget





Upcoming and Completed Broadcast Guide 530x700 Widget





Upcoming Broadcast Guide 530x350 Widget





Completed Broadcast Guide 530x375 Widget