MaxPreps Widget

Last updated on 4/5/2012

Overview

This widget allows any school or team's content to be streamed directly on any website. Implementation requires a single "copy & paste" of a few lines of code and never requires updating. Users interested in more control over the look and feel of a widget will find additional options below. Please visit the Create a Widget page to generate the default widget code prior to implementing any customizations outlined below.

Configuring your Widget

There are several attributes that you can modify or add to customize the way your widget looks. To customize your widget use the anchor tags data-attributes.

	Attribute Name
Item Count	data-item-count
Widget Width	data-width
Widget Height	data-height
Allow Scrollbar	data-allow-scrollbar
Include Widget Header	data-include-header
Content Header Size	data-header-size
Content Size	data-content-size
Content Color	data-content-color
Link Color	data-link-color
Font	data-font

Widget Wall Item Count

The number of items displayed inside the widget.

Items Include:

Pregame Matchup
Boxscore Alert
New Photo Gallery Posted
News Updates
Stat Entered
Player of the Week and/or Year
Coach Updates
Rankings Updates
Video Posted

Required	Yes
Validation	Integer (1 - 25)
Default Value	10

Code Example:


		<a 
		class="maxpreps-widget" 
		data-width="300" 
		data-height="400" 
		data-item-count="10" 
		data-allow-scrollbar="true" 
		href="http://www.maxpreps.com/local/school/home.aspx?schoolid=d9622df1-9a90-49e7-b219-d6c380c566fe" 
		>Ponderosa High School School Info</a>

Widget Width

The total width, in pixels, of the rendered widget (including the vertical scrollbar, if applicable).

Required	Yes
Validation	Integer
Default Value	300

Code Example:


		<a 
		class="maxpreps-widget" 
		data-width="300"
		data-height="400" 
		data-item-count="10"
		href="http://www.maxpreps.com/local/school/home.aspx?schoolid=d9622df1-9a90-49e7-b219-d6c380c566fe" 
		>Ponderosa High School School Info</a>

Widget Height

The total height, in pixels, of the rendered widget.

Required	Yes
Validation	Integer
Default Value	400

Code Example:


		<a 
		class="maxpreps-widget" 
		data-width="300" 
		data-height="400"
		data-item-count="10"
		href="http://www.maxpreps.com/local/school/home.aspx?schoolid=d9622df1-9a90-49e7-b219-d6c380c566fe" 
		>Ponderosa High School School Info</a>

Allow Scrollbar

If true, a scrollbar will be displayed inside the widget if the content exceeds the data-height attribute value. If false, a scrollbar will never be present; any content beyond the data-height value will not visible.

Required	No
Validation	true or false
Default Value	true

Code Example:


		<a 
		class="maxpreps-widget" 
		data-width="300" 
		data-height="400" 
		data-item-count="10"
		data-allow-scrollbar="true"
		href="http://www.maxpreps.com/local/school/home.aspx?schoolid=d9622df1-9a90-49e7-b219-d6c380c566fe" 
		>Ponderosa High School School Info</a>

Include Widget Header

This param is used to include a header at the top of the widget.

Required	No
Validation	true or false
Default Value	0

Code Example:


		<a 
		class="maxpreps-widget" 
		data-include-header="true"
		data-width="300" 
		data-height="400" 
		data-item-count="10"
		data-header-size="2em"
		href="http://www.maxpreps.com/local/school/home.aspx?schoolid=d9622df1-9a90-49e7-b219-d6c380c566fe" 
		>Ponderosa High School School Info</a>

Content Header Size

The font size for each item's header; any valid CSS unit can be used: px, em, etc.

Required	No
Validation	None
Default Value	1rem (12px)

Code Example:


		<a 
		class="maxpreps-widget" 
		data-width="300" 
		data-height="400" 
		data-item-count="10"
		data-header-size="2em"
		href="http://www.maxpreps.com/local/school/home.aspx?schoolid=d9622df1-9a90-49e7-b219-d6c380c566fe" 
		>Ponderosa High School School Info</a>

Content Size

The font size of the item's content text; any valid CSS unit can be used: px, em, etc.

Required	No
Validation	None
Default Value	1rem (12px)

Code Example:


		<a 
		class="maxpreps-widget" 
		data-width="300" 
		data-height="400" 
		data-item-count="10"
		data-content-size="2em"
		href="http://www.maxpreps.com/local/school/home.aspx?schoolid=d9622df1-9a90-49e7-b219-d6c380c566fe" 
		>Ponderosa High School School Info</a>

Content Color

The font color of each item's text; any valid color name or hex value can be used.

Required	No
Validation	A color name or hex value. Ex. Red or ff0000
Default Value	333333

Code Example:


		<a 
		class="maxpreps-widget" 
		data-width="300" 
		data-height="400" 
		data-item-count="10"
		data-content-color="Green"
		href="http://www.maxpreps.com/local/school/home.aspx?schoolid=d9622df1-9a90-49e7-b219-d6c380c566fe" 
		>Ponderosa High School School Info</a>

Widget Header, Content Headers and Link Color

The font color of the header (if data-include-header is set to true), each item's header and link; these are not separately controllable; any valid color name or hex value can be used.

Required	No
Validation	A color name or hex value. Ex. Red or ff0000
Default Value	3778B4

Code Example:


		<a 
		class="maxpreps-widget" 
		data-width="300" 
		data-height="400" 
		data-item-count="10"
		data-link-color="Blue"
		href="http://www.maxpreps.com/local/school/home.aspx?schoolid=d9622df1-9a90-49e7-b219-d6c380c566fe" 
		>Ponderosa High School School Info</a>

Font

The font family used for all fonts within the widget; please note that custom fonts may not be available on all computers.

Required	No
Validation	None
Default Value	Verdana,Helvetica,Arial,Sans-Serif

Code Example


		<a 
		class="maxpreps-widget" 
		data-width="300" 
		data-height="400" 
		data-item-count="10"
		data-font="Georgia,Arial"
		href="http://www.maxpreps.com/local/school/home.aspx?schoolid=d9622df1-9a90-49e7-b219-d6c380c566fe" 
		>Ponderosa High School School Info</a>

MaxPreps Widget FAQ

Which browsers/platforms does the Maxpreps Widget support?
How can I render the Maxpreps Widget asynchronously?
Is there a limit to the number of MaxPreps Widgets I can have on a page?
In the unlikely event that MaxPreps is down, will my page still load?
Does the MaxPreps widget work over HTTPS?
How can I frame the MaxPreps Widget?
I changed the generated anchor tag and now my MaxPreps Widget isn't working. Why?

Which browsers does the Maxpreps Widget support?

All major current browsers are compatible with the MaxPreps Widget. Browsers that do not support (or have disabled) the required javascript features will display a hyperlink back to the relevant MaxPreps.com page.

The following browsers have successfully passed testing:

Internet Explorer 7, 8, 9
Firefox 3,4
Chrome
Safari 4,5
Mobile Safari for iPhone/iPad
Android
Opera 10
Opera Mini

How can I render the Maxpreps Widget asynchronously to minimize slowing down my site?

The MaxPreps widget was designed to run asynchronously; additionally, hardware and software are vigilantly maintained to provide maximum peformance for all our users.

While there is no specific limit to the number of widgets that can be embedded on a single page, each widget adds adds load time. Using more than three widgets on a page should be carefully considered and tested to avoid reduced performance.

If you have 2 or more MaxPreps Widgets on your page you should not copy the generated script tag from the Create a Widget page.

Generated Code looks like this:


			<script type="text/javascript" >(function(d){var mp = d.createElement('script'),h=d.getElementsByTagName('head')[0];mp.type='text/javascript';mp.async=true;mp.src='http://www.maxpreps.com/includes/js/widget/widget.js';h.appendChild(mp);})(document);</script>
			

			<a class="maxpreps-widget-link" data-width="300" data-height="400" data-item-count="10" href="http://www.maxpreps.com/local/school/home.aspx?schoolid=d9622df1-9a90-49e7-b219-d6c380c566fe" >Ponderosa High School School Info</a>

2nd and subsequent copy and paste should remove this line:


			<script type="text/javascript" >(function(d){var mp = d.createElement('script'),h=d.getElementsByTagName('head')[0];mp.type='text/javascript';mp.async=true;mp.src='http://www.maxpreps.com/includes/js/widget/widget.js';h.appendChild(mp);})(document);</script>

In the unlikely event that MaxPreps is down, will my page still load?

Yes, because the widget is render in an asyncronous iframe, it will not prevent any other content from loading on your page.

Does the MaxPreps widget work over HTTPS?

As of now there aren't any plans to support HTTPS. If this is something you need please email Tech Support with this request.

How can I frame the MaxPreps Widget?

The two most common methods are: 1) add a CSS declaration for the ".maxpreps-widget" class and then adding appropriate CSS code for border and/or padding, or 2) wrap the widget inside a DIV (or similar) element and add appropriate styling.

I changed the generated anchor tag and now my MaxPreps Widget isn't working. Why?

The MaxPreps widget framework requires several components to function properly; The href attribute cannot be changed as this is where the iframe gets the querystring for the iframe. The rel attibute cannot equal "nofollow." The data-member-id attribute that is generated needs to contain a valid member id. The class attribute must contain "maxpreps-widget-link."

ensure that all required attributes are appropriately set (data-width, data-height, data-item-count).
the "data-member-id" attribute must contain a valid member id.
the "class" attribute must contain "maxpreps-widget-link".
the "href" attribute cannot be changed (as this is where the iframe gets the querystring).
the "rel" attribute cannot be set to "nofollow".

After confirming the items above, please contact Tech Support should you need additional support.

MaxPreps Widget

Overview

Configuring your Widget

Widget Wall Item Count

Widget Width

Widget Height

Allow Scrollbar

Include Widget Header

Content Header Size

Content Size

Content Color

Widget Header, Content Headers and Link Color

Font

MaxPreps Widget FAQ

Which browsers does the Maxpreps Widget support?

How can I render the Maxpreps Widget asynchronously to minimize slowing down my site?

Is there a limit to the number of MaxPreps Widgets I can have on a page?

In the unlikely event that MaxPreps is down, will my page still load?

Does the MaxPreps widget work over HTTPS?

How can I frame the MaxPreps Widget?

I changed the generated anchor tag and now my MaxPreps Widget isn't working. Why?

Search MaxPreps