User:CFloyd (WMF)/Feed Markup Documentation

About this page

This page documents how to organize and markup content in a Wikipedia project so that it can be included in the Feed APIs. These APIs are provided by the Mobile Content Service and are used primarily by the Android and iOS Apps to display various types of content from Wikipedia. This content includes:

• Today's featured article
• Wikipedia Commons picture of the day
• "In the news" stories
• Most viewed articles

Two more types of content are currently in development:

• On this day Anniversaries
• Trending edited articles

What content requires markup?

Project specific curated content requires markup for the Mobile Content Service to ingest. This includes:

• Today's featured article
• "In the news" stories
• On this day Anniversaries

Why should I mark up content?

Currently, the Mobile Content Service works for a limited number of projects and for a limited number of content types. By marking up the content of a project wiki you can enable your curated content to be served to a greater number of users through the Feed APIs, specifically mobile users of the iOS and Android apps.

How do I mark up content?

It should be noted that you do not need to mark up content that you wish to include in the feed. All wikis are slightly different. You can choose to only mark up the Today's featured article for your Wiki and not mark up On this day. This is entirely up to the project maintainers.

Today's featured article

Today's featured article of the day is a common type of content displayed on the Main Page of many Wikis. You can see the English version on the Main Page here:

https://en.wikipedia.org/wiki/Main_Page

Location

Today's featured article content must be located on the Main Page of a project. The Main Page of the project must be included on the Main Page Wikidata Item here:  

https://www.wikidata.org/wiki/Q5296

Markup

To make Today's featured article visible to the Mobile Content Service, you must add several HTML classes to the HTML of your Main Page.

Article URL (Required)

Description	The URL of the article
HTML Class	tfa-article
Example	<a href="/wiki/Lieutenant_Kij%C3%A9_(Prokofiev)" class="tfa-article" title="Lieutenant Kijé (Prokofiev)">Lieutenant Kijé</a>

Image URL (Optional)

Description	The URL of the image displayed with the article
HTML Class	tfa-thumbnail
Example	<a href="/wiki/File:Kije.jpg" class="tfa-thumbnail" title="Poster advertising the film">

Article Summary

Description	The summary text of the feature article
HTML Class	tfa-summary
Example	<p class="tfa-summary"><i><b><a href="/wiki/Lieutenant_Kij%C3%A9_(Prokofiev)" class="tfa-article" title="Lieutenant Kijé (Prokofiev)">Lieutenant Kijé</a></b></i> is music by <a href="/wiki/Sergei_Prokofiev" title="Sergei Prokofiev">Sergei Prokofiev</a> originally written to accompany the <a href="/wiki/Lieutenant_Kij%C3%A9_(film)" title="Lieutenant Kijé (film)">film of the same name</a>, produced by the <a href="/wiki/Belarusfilm" title="Belarusfilm">Belgoskino film studios</a> in <a href="/wiki/St_Petersburg" class="mw-redirect" title="St Petersburg">Leningrad</a> and released in 1934 <i>(poster pictured)</i>. It was his first attempt at film music, and his first commission from within the <a href="/wiki/Soviet_Union" title="Soviet Union">Soviet Union</a>; he had lived abroad since the 1917 <a href="/wiki/October_Revolution" title="October Revolution">October Revolution</a>. In the early days of <a href="/wiki/Sound_film" title="Sound film">sound cinema</a>, among the distinguished composers ready to write film music, Prokofiev was not an obvious choice for the commission. Based in Paris for almost a decade, he had a reputation, at odds with the cultural norms of the Soviet Union, for experimentation and dissonance. Nevertheless, he was anxious to return to his homeland, and saw the film commission as an opportunity to write music in a more accessible style. After the film's successful release, he adapted the music into what became a popular orchestral <a href="/wiki/Suite_(music)" title="Suite (music)">suite</a>, his <a href="/wiki/Opus_number" title="Opus number">Op.</a> 60. First performed on 21 December 1934, it became part of the international concert repertoire, and one of the composer's best-known and most frequently recorded works. Elements of its score were used in several later films, and in two popular songs of the <a href="/wiki/Cold_War" title="Cold War">Cold War</a> era. (<a href="/wiki/Lieutenant_Kij%C3%A9_(Prokofiev)" title="Lieutenant Kijé (Prokofiev)"><b>Full&#160;article...</b></a>)</p>

In the news

In the news articles are created and curated on the Current events portal by many project maintainers. Additionally, they are frequently transcluded on the Main Page of many Wikis. You can see In the news on both the English version of the Main Page and on the Current events portal:

https://en.wikipedia.org/wiki/Main_Page

https://en.wikipedia.org/wiki/Portal:Current_events

Location

In the news content must be located on the Current events portal of a project. The Current events portal must be included on the Current events portal Wikidata Item here:

https://www.wikidata.org/wiki/Q4597488

Markup

To make 'In the news' content visible to the Mobile Content Service, you must add several HTML classes to the HTML of your Current events portal.

News Story

Description	The story of the news item
HTML Class	itn-story
Example	<li class="itn-story"><b><a class="itn-topic-article" href="/wiki/2017_Istanbul_nightclub_attack" title="2017 Istanbul nightclub attack">An attack on a nightclub</a></b> <i>(pictured)</i> in <a class="itn-article"href="/wiki/Istanbul" title="Istanbul">Istanbul</a>, Turkey, during New Year's celebrations, kills at least 39 people and injures more than 60 others.</li>

Topic Article URL

Description	An article associated with the main topic of the news item. A single article is preferred, but multiple topic articles are supported. If you annotate multiple topic articles, in some contexts the first topic article in the text may be favored. Must be within an element with the News Story class.
HTML Class	itn-topic-article
Example	<li class="itn-story"><b><a class="itn-topic-article" href="/wiki/2017_Istanbul_nightclub_attack" title="2017 Istanbul nightclub attack">An attack on a nightclub</a></b> <i>(pictured)</i> in <a class="itn-article"href="/wiki/Istanbul" title="Istanbul">Istanbul</a>, Turkey, during New Year's celebrations, kills at least 39 people and injures more than 60 others.</li>

Other Article URL (Optional)

Description	Other article links in the story, but not the main topic. Must be within an element with the News Story class.
HTML Class	itn-article
Example	<li class="itn-story"><b><a class="itn-topic-article" href="/wiki/2017_Istanbul_nightclub_attack" title="2017 Istanbul nightclub attack">An attack on a nightclub</a></b> <i>(pictured)</i> in <a class="itn-article" href="/wiki/Istanbul" title="Istanbul">Istanbul</a>, Turkey, during New Year's celebrations, kills at least 39 people and injures more than 60 others.</li>

Image URL (Optional)

Description	For any images displayed, you can associate them with a specific topic article of a news story. Any images referenced from the story (using works like “pictured”) should always be associated with a topic article. Because the image is usually in a separate div of the page (and therefore outside of the element with the News Story class), the image URL must be associated to the proper topic url using a custom HTML attribute.
HTML Class	itn-thumbnail
Custom Attribute Name	itn-thumbnail-topic-article
Custom Attribute Value	The URL of the topic article associated with the image
Example	<div class="thumbinner mp-thumb" style="background: transparent; border: none; padding: 0; max-width: 120px;"><a class="itn-thumbnail" itn-thumbnail-topic-article="/wiki/2017_Istanbul_nightclub_attack" href="/wiki/File:Reina_restaurant_Istanbul.JPG" title="Reina nightclub in 2012"><img alt="Reina nightclub in 2012" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Reina_restaurant_Istanbul_%28cropped%29.JPG/120px-Reina_restaurant_Istanbul_%28cropped%29.JPG" width="120" height="90" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Reina_restaurant_Istanbul_%28cropped%29.JPG/180px-Reina_restaurant_Istanbul_%28cropped%29.JPG 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Reina_restaurant_Istanbul_%28cropped%29.JPG/240px-Reina_restaurant_Istanbul_%28cropped%29.JPG 2x" data-file-width="2752" data-file-height="2064" /></a>

On this day

On this day anniversaries show curated events on specific days of the year and come in 2 varieties.

Day Page Anniversaries

Day page anniversaries are listed for each specific day of the year. These pages contain a large list of anniversaries of varying significance and exist for each day of the year. They are usually grouped by type (such as "Event" and "Birth"). You can see an example here on English Wikipedia:

https://en.wikipedia.org/wiki/December_20

Location

Day page anniversaries content must be located on a day page that is associated with the proper Wikidata item for that day. For instance, the English December 20th page here:

https://en.wikipedia.org/wiki/December_20

Is linked to the Wikidata Item for that date here:

https://www.wikidata.org/wiki/Q2636

Markup

To make Day page content visible to the Mobile Content Service, you must add several HTML classes to the HTML of each day page:

Anniversary

Description	An anniversary that occurs on the day designed by the containing page. This should contain the year, articles, and the summary of the anniversary
HTML Class	otd-anniversary
Example	<li class="otd-anniversary"><a class="otd-year" href="/wiki/69" title="69">69</a> – <a class="otd-topic-article" href="/wiki/Vespasian" title="Vespasian">Vespasian</a>, formerly a general under <a class="otd-article" href="/wiki/Nero" title="Nero">Nero</a>, enters Rome to claim the title of <a class="otd-article" href="/wiki/Roman_emperor" title="Roman emperor">Emperor</a>.</li>

Year URL

Description	The year of the anniversary. The text should be the year. The URL should be the year page. Must be within an element with the Anniversary class.
HTML Class	otd-year
Example	<li class="otd-anniversary"><a class="otd-year" href="/wiki/69" title="69">69</a> – <a class="otd-topic-article" href="/wiki/Vespasian" title="Vespasian">Vespasian</a>, formerly a general under <a class="otd-article" href="/wiki/Nero" title="Nero">Nero</a>, enters Rome to claim the title of <a class="otd-article" href="/wiki/Roman_emperor" title="Roman emperor">Emperor</a>.</li>

Topic Article URL

Description	An article associated with the main topic of the anniversary item. A single article is preferred, but multiple topic articles are supported. If you annotate multiple topic articles, in some contexts the first topic article in the text may be favored. Must be within an element with the Anniversary class.
HTML Class	otd-topic-article
Example	<li class="otd-anniversary"><a class="otd-year" href="/wiki/69" title="69">69</a> – <a class="otd-topic-article" href="/wiki/Vespasian" title="Vespasian">Vespasian</a>, formerly a general under <a class="otd-article" href="/wiki/Nero" title="Nero">Nero</a>, enters Rome to claim the title of <a class="otd-article" href="/wiki/Roman_emperor" title="Roman emperor">Emperor</a>.</li></ul>

Other Article URL (Optional)

Description	Other article links in the anniversary text, but not the main topic. Must be within an element with the Anniversary class.
HTML Class	otd-article
Example	<li class="otd-anniversary"><a class="otd-year" href="/wiki/69" title="69">69</a> – <a class="otd-topic-article" href="/wiki/Vespasian" title="Vespasian">Vespasian</a>, formerly a general under <a class="otd-article" href="/wiki/Nero" title="Nero">Nero</a>, enters Rome to claim the title of <a class="otd-article" href="/wiki/Roman_emperor" title="Roman emperor">Emperor</a>.</li>

Anniversary Type (Optional)

Description	To specify the type of anniversary, lists of anniversaries should be wrapped in tags to denote the anniversary type. The supported types are "Event", "Birth", "Death", and "Holiday/Observance".
Event HTML Class	otd-events
Birth HTML Class	otd-births
Death HTML Class	otd-deaths
Holiday HTML Class	otd-holidays
Example	<ul class="otd-events"><li class="otd-anniversary"><a class="otd-year" href="/wiki/69" title="69">69</a> – <a class="otd-topic-article" href="/wiki/Vespasian" title="Vespasian">Vespasian</a>, formerly a general under <a class="otd-article" href="/wiki/Nero" title="Nero">Nero</a>, enters Rome to claim the title of <a class="otd-article" href="/wiki/Roman_emperor" title="Roman emperor">Emperor</a>.</li> <li class="otd-anniversary"><a class="otd-year" href="/wiki/217" title="217">217</a> – <a class="otd-topic-article" href="/wiki/Pope_Callixtus_I" title="Pope Callixtus I">Callixtus I</a> is elected as the sixteenth <a class="otd-article" href="/wiki/Pope" title="Pope">pope</a>, although <a class="otd-article" href="/wiki/Hippolytus_of_Rome" title="Hippolytus of Rome">Hippolytus of Rome</a> is soon thereafter elected as a <a class="otd-article" href="/wiki/Antipope" title="Antipope">rival pope</a>.</li> </ul>

Selected Anniversaries

Selected anniversaries are a subset of curated anniversaries. They are similar to the "Day Page Anniversaries" above, but contain a much smaller number of events. You can see an example here on English Wikipedia:

https://en.wikipedia.org/wiki/Wikipedia:Selected_anniversaries/December_20

Location

Selected anniversaries content must be located on a selected anniversary day page that is associated with the proper Wikidata item for that day. For instance, the English December 20th page here:

https://en.wikipedia.org/wiki/Wikipedia:Selected_anniversaries/December_20

Is linked to the Wikidata Item for that date here:

[1]https://www.wikidata.org/wiki/Q5666427

Markup

To make Selected anniversary page content visible to the Mobile Content Service, add the same markup as you would for the Day page anniversaries listed above