Include live Minnesota returns on your own site

Minnesota Public Radio is providing live, customizable election-night results that you can easily include in your own Web site or blog. You can customize which races to track and the style of the display. Sample:

Note: We will be testing the Widget between now and Election Day. There may be some variations in the display during that time.

FAQ

Is there a fee for this service?

No, it's free. We are offering this service to promote our extensive online campaign coverage, and detailed election night results. We do require, however, that you leave the credit lines in place.

How do I get started?

Just copy the sample HTML code below and paste it into your page.

Which races can I show?

You can include the Presidential race and its electoral votes, the Minnesota races for U.S. Senate and House all legislative races, and the constitutional amendment regarding outdoors & arts tax. Just change the "races" value in the JavaScript to indicate which races you want to show, and in which order. In addition, you can optionally show the latest election headlines from Minnesota Public Radio.

Which candidates are included?

By default, only candidates from the state's three major parties are included: Democrat-Farmer-Laborer, Republican, and Independence. If you want, you can display candidates from all parties by changing the JavaScript code below.

How will the candidates be ordered?

Candidates will be sorted by the number of votes each has received. Before polls close and in the case of a tie, they will be sorted alphabetically by their first name.

What is your data source?

Our data comes from the Minnesota Secretary of State's office, which keeps the official count of tallies from counties around the state.

How often is the data updated?

Your module will update as often as we receive new data from the Secretary of State - approximately every 10 minutes.

Will my browser update automatically?

Your page will show current results at the time it is loaded in a site visitor's browser. To see subsequent updates, visitors will have to refresh the page in their browser.

Where do the links go?

The links within the modules will go to more detailed results on Minnesota Public Radio's site. They will open in a new browser window, so your site will remain open in the original window. (Note: Prior to Election Day, these links will go to MPR's Campaign 2008 homepage.)

Can I customize the appearance of the results?

Absolutely! By default, the module will appear just like the results on this page. All formatting is done through cascading style sheets (CSS), so you can make the size, colors, fonts, and other display elements match your own site. See the advanced customization instructions below.

What if I need help, or want to offer feedback?

Because of the variety of site technologies available, we regret that we can't provide as much direct help as we would like. If you see an error or problem with the widget, want to offer your feedback, or have a question that we should answer on this page, please fill out our feedback form.

We also want to know if you're using the widget, so we can see a variety of examples on election night and let you know if we add additional features.

Instructions

To get started, copy the following HTML code to your Web page. This is the JavaScript that displays live election results.

<!-- MPR.org Election Results Module Configuration --> <script type="text/javascript"> var display_races="E,P,S,C1,N"; var major_parties_only=true; var include_default_stylesheet=true; </script> <script type="text/javascript" src="http://minnesota.publicradio.org/collections/special/2008/campaign/results/widget/results.js"></script>

Advanced Customization

The Election Results Widget is flexible and allows you to customize which races and parties to show. It also allows you to change the graphical formatting of the results.

Customize races displayed

Edit the display_races list to change the information you want to show, using codes from the list below:

Code	Race
E	U.S. President - National Electoral Votes
P	U.S. President - Minnesota
S	U.S. Senate - Minnesota
C#	U.S. House - Minnesota District # (example: C6)
L#	Minnesota Senate or House District # (examples: L52 or L43B)
T	Constitutional Amendment: Outdoors & Arts Tax
N	Latest Election Headlines from Minnesota Public Radio

Customize parties

Edit major_parties_only to determine whether you want to show all parties (false), or just the three major parties (true).

Customize formatting

By default, CSS (cascading style sheet) formatting is sent with the widget. By using your own CSS formatting, you can change the module's size, fonts, colors, and other formatting to make it better match your own site.

If you want to use your own CSS formatting, change include_default_stylesheet to false and include your own CSS classes anywhere before the widget in your page's HTML.

To get started, feel free to copy and adapt the default styles below:

<style type="text/css"> div#mprElectionWidget2008 { width: 250px; border: 1px solid #000; font-family: verdana,arial,sans-serif; font-size: 11px; color: #000; } div#mprElectionWidget2008 a { text-decoration: none; color: #000; } div#mprElectionWidget2008 div.elxHeader { background-color: #c80809; color: #FFF; font-weight: bold; text-align: left; padding: 5px; } div#mprElectionWidget2008 div.elxHeader img { border: none; } div#mprElectionWidget2008 div.elxHeader a#elxAttribTitle { color: #FFF; text-transform: uppercase;} div#mprElectionWidget2008 div.elxHeader div.elxTitle { font-family: trebuchet,"trebuchet ms",arial,sans-serif; font-size: 14px; font-weight: bold; } div#mprElectionWidget2008 div.elxHeader div.elxAttrib { font-family: trebuchet,"trebuchet ms",arial,sans-serif; font-size: 14px; font-weight: bold; } div#mprElectionWidget2008 div.elxRaceHeader { background-color: #065087; font-family: trebuchet,"trebuchet ms",arial,sans-serif; font-size: 12px; font-weight: bold; text-transform: uppercase; margin: 0px; padding: 5px; color: #FFF; } div#mprElectionWidget2008 div.elxRaceHeader a { color: #FFF; } div#mprElectionWidget2008 table.elxVote { border-spacing: 0px; margin: 0px; padding: 0px; border-collapse: collapse; } div#mprElectionWidget2008 table.elxVote tr td { vertical-align: top; } div#mprElectionWidget2008 table.elxVote tr td.elxCandidateName { font-size: 11px; padding: 5px; width: 200px; } div#mprElectionWidget2008 table.elxVote tr td.elxCandidateName SPAN.elxParty { font-size: 11px; padding: 5px; color: #999999; } div#mprElectionWidget2008 table.elxVote tr td.elxCandidateVotePercent { font-size: 11px; padding: 5px; text-align: right; } div#mprElectionWidget2008 div.elxRaceContainer div.elxRaceReporting { color: #999999; font-size: 10px; padding: 5px; } div#mprElectionWidget2008 div.elxRaceContainer div.elxElectoralLegend { color: #999999; font-size: 10px; padding: 5px; } div#mprElectionWidget2008 div.elxNewsHeadline { padding: 5px; } div#mprElectionWidget2008 div.elxSource { background-color: #C9DAE7; border-top: 1px dotted #000; color: #000; padding: 5px; font-size: 10px; } div#mprElectionWidget2008 div.elxSource a { color: #000; } </style>