Global Voices JSS Generator

Add Global Voices headlines to your personal or commercial media website. Our authors love to see their work linked from other websites.

What is JSS

JSS is a system we use to let you display our headlines on your site (e.g. in your blog's sidebar) easily and quickly using Javascript. See the JSS page for details (or click the 'JSS' link next to the category you want to use).

The nifty name and clever JavaScript code are inspired by the work done by Newsvine.

Wordpress.com (the host) users: JSS will not work for you!
To show our headlines use an 'RSS Widget' in your sidebar instead.

We offer JSS for all categories and for all authors in Global Voices. To get the JSS for a category, go to our RSS Feeds page and click the "JSS" link next to the category you want. To get the JSS for an author, go to their author page and click the "Add headlines by X to your site" link. (Full author list)

JSS for: Posts from the category Ethnicity

Below is a preview of the posts this JSS will display and the format (see below for information about styling the JSS with CSS styles).

Preview

Get the Code

Copy the HTML code below and paste it into your site wherever you want the headlines to appear.

If you ever have an empty JSS or other problems please use the Contact Form to let us know.


More Design Examples and Information

The XHTML

The XHTML provided was designed to take advantage of existing CSS styles present in most weblog platform's Sidebar stylings, so dropping it into your templates should be enough.

An example of the XHTML output by the JSS script looks like this:

<div class="jss" id="gvo-c-227">
	<h4><a class="site" href="{sitelink}" title="{sitetitle}">{sitetitle}</a>
		<span class="ctx"> on <a href="{contextlink}" title="{contexttitle}">{contexttitle}</a></span></h4>
	<ul>
		<li>
			<a href="{postlink}" title="{title/datestamp}">{posttitle}</a>
		</li>
		<li>
			<a href="{postlink}" title="{title/datestamp}">{posttitle}</a>
		</li>
		<li>
			<a href="{postlink}" title="{title/datestamp}">{posttitle}</a>
		</li>
		<li>
			<a href="{postlink}" title="{title/datestamp}">{posttitle}</a>
		</li>
		<li>
			<a href="{postlink}" title="{title/datestamp}">{posttitle}</a>
		</li>
	</ul>
</div>

Notice the enclosing DIV's class and ID. Based on an excellent suggestion by Ruben Miranda, we are proposing that all JSS services provide a class-name of "jss". This provides a pseudo name-space and something CSS can actually use as a selector.
The unique ID is context sensitive to the feed being provided. It can be anything but we are using a pattern which includes an abbreviation of the site name, the context type ("c" for "category" in our example) and that context's ID.

Styles

The possibilites are endless. Here are a few examples.

Example 1

[JSS div class or ID selector] {
	margin: 0;
	padding: 52px 4px 4px 4px;
	font-size: 8pt;
	width: 150px;
	border: 1px solid #ccc;
	background: #fff url('http://www.globalvoicesonline.org/_materials/Logos/GV-Logo-Horizontal/GV-Logo-H-150x50-notag.png') top center no-repeat;
	}
[JSS div class or ID selector] h4 {
	margin: 0 0 4px 0; padding: 0;
	text-align:center;
	}
[JSS div class or ID selector] h4 .ctx {
	display:block;
	margin: 0; padding: 0;
	font-weight:normal;
	font-style: italic;
	}
[JSS div class or ID selector] ul {
	list-style-type: none;
	margin: 0; padding: 0;
	text-indent: -10px;
	font-size: 7pt;
	}
html>body [JSS div class or ID selector] ul li {
	margin: 2px 0 1px 10px;
	}
[JSS div class or ID selector] ul li:before {
	content: "\00BB \0020";
	}

Example 2

[JSS div class or ID selector] {
	margin: 0;
	padding: 4px;
	font-size: 9pt;
	width: 180px;
	border: 2px solid #F30;
	background: #fff;
	}
[JSS div class or ID selector] a:link { color:#060; }
[JSS div class or ID selector] a:visited { color:#060; }
[JSS div class or ID selector] a:hover { color:#0c0; }
[JSS div class or ID selector] a:active { color:#F30; }
[JSS div class or ID selector] h4 {
	margin: 0 0 4px 0; padding: 0;
	text-align:center;
	}
[JSS div class or ID selector] h4 .ctx {
	display:block;
	margin: 0; padding: 0;
	font-weight:normal;
	}
[JSS div class or ID selector] ul {
	list-style-type: none;
	margin: 0; padding: 0;
	text-indent: -10px;
	font-size: 8pt;
	}
html>body [JSS div class or ID selector] ul li {
	margin: 2px 0 1px 10px;
	}
[JSS div class or ID selector] ul li:before {
	content: "\00BB \0020";
	}