MaxPreps Wall 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="500" data-height="600" 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 500
Code Example: <a class="maxpreps-widget" data-width="500" data-height="600" 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 600
Code Example: <a class="maxpreps-widget" data-width="500" data-height="600" 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="500" data-height="600" 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="500" data-height="600" 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="500" data-height="600" 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="500" data-height="600" 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="500" data-height="600" 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>

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="500" data-height="600" 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="500" data-height="600" 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 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.

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

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="500" data-height="600" 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."

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

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