ASSET MANAGEMENT & SYNDICATION
Home | Help | Login
Documentation

API Reference

Dev Resources

Short URLs

Resources

Universal Header & Footer

JS & CSS Includes

The News21Skin js & css include files will inject a header and footer into a page. The width of each will be 940px
<link rel="stylesheet" href="http://assets.news21.com/2011/news21skin.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://assets.news21.com/2011/news21skin.js"></script>

Header

The most basic News21 header div code:
<div id="news21-header"></div>

Headers come in 3 different styles ...
  • Black Background: (Default) includes logo & branding along with search box w/ outline image on black background color
  • Transparent Background: includes logo & branding along with search box w/ outline image but with no background color
  • Pure Background: includes logo & branding along with search box w/out outline image and no background color
Style code used and example below:
<div id="news21-header" class="header-black"></div>
<div id="news21-header" class="header-transparent"></div>
<div id="news21-header" class="header-pure"></div>

Incubator Specific Header

The search box uses google search engine ... but in order for the search to be specific to your domain ... you will need to give the header a proper class.
<div id="news21-header" class="arizonastate"></div>
<div id="news21-header" class="berkeley"></div>
<div id="news21-header" class="columbia"></div>
<div id="news21-header" class="maryland"></div>
<div id="news21-header" class="northcarolina"></div>
<div id="news21-header" class="southerncalifornia"></div>
<div id="news21-header" class="syracuse"></div>
<div id="news21-header" class="northwestern"></div>

Note: you can easily use multiple classes as seen in this example
<div id="news21-header" class="columbia header-pure"></div>

Footer

News21Skin Footers come in 2 styles ...
  • Gray Text: (Default) text and images are a gray color
  • White Text: text and images are white
<div id="news21-footer";</div>
<div id="news21-footer" class="footer-white"></div>


See demo of header and footer includes http://assets.news21.com/2011/demo.html

Story Republish

An example of the beta implementation of the republish include can be found at
http://assets.news21.com/2011/republish.html
PLEASE NOTE YOU WILL NEED TO REQUEST AN API KEY TO USE

Implementation CSS & JS

<link rel="stylesheet" href="http://assets.news21.com/2011/news21skin.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript" src="http://assets.news21.com/2011/jquery.news21ams.js"></script>


Implementation HTML & jQuery

<a href="#" rel="#news21republish_overlay" class="news21republishlink">republish</a>
<div id="news21republish_overlay"></div>


ON DOCUMENT READY
Note: 193 in the initialization refers to the story id within the ams
jQuery().news21ams({'api_key':'14e8378b7b806e820ec8f8a4ecc9a156282','ams_url':'http://ams.news21.com/api'});
jQuery('a.news21republishlink').click(function() {jQuery.news21ams.getStoryRepublish(193);});

Story Placements

Code currently being written ... this will take advantage of the News21 jQuery AMS plugin being written to make an api call and return an array of placements for a story in JSON. This array should be formatted/styled and placed on each story allowing the incubator site story to stay current with placements made after the incubator period has ended. More to come :)

News21 Logos

News21 standard logos are below ... for a hi-res pdf click here

http://assets.news21.com/logos/news21-100x100.png


http://assets.news21.com/logos/news21-200x40.png


http://assets.news21.com/logos/news21-225x225.png