User:CFloyd (WMF)/Feed Markup Documentation
About this page
[edit]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?
[edit]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?
[edit]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?
[edit]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
[edit]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
[edit]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
[edit]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)
[edit]| 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)
[edit]| 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
[edit]| 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 article...</b></a>)</p>
|
In the news
[edit]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
[edit]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
[edit]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
[edit]| 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
[edit]| 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)
[edit]| 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)
[edit]| 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
[edit]On this day anniversaries show curated events on specific days of the year and come in 2 varieties.
Day Page Anniversaries
[edit]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
[edit]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
[edit]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
[edit]| 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
[edit]| 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
[edit]| 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)
[edit]| 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)
[edit]| 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>
|
Selected Anniversaries
[edit]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
[edit]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
[edit]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