Hatena HTML controls

Studio reads a limited subset of HTML and uses selected <meta> names to control its interface. Put these entries in the page head. They can set top-screen text, replace it with an image and add fixed action buttons. Check layouts on the DSi client: a desktop browser cannot reproduce its second screen or native controls. [1]

Top and bottom screen

Name	Placement or effect
uppertitle	Large centred heading with underline.
uppersubleft / uppersubright	Medium text beneath the title, aligned to its named side.
uppersubtop / uppersubbottom	Small boxed text near the top, or centred low on the top screen.
upperlink	NBF or PPM URL; supersedes top-screen text.
background	Bottom-screen image URL plus comma-separated dimensions.

Player and action controls

Metadata name	Client result
playcontrolbutton	Show the Flipnote player controls.
autoplay	Begin playback as the page opens.
savebutton	PPM download target, visible with player controls.
commentbutton, commentherebutton, replybutton	Three labels for opening a drawing reply, usually with a .reply URL.
postherebutton, postchannelbutton	Open the Flipnote posting screen, commonly with a .post URL.
favoritebutton, cutoutbutton, deletebutton	Favourite, remove favourite, or delete action.
starbutton	Yellow-star target.
starbutton1–starbutton4	Green, red, blue and purple star targets with a colour and available count.
autoscroll, bgm	Page scrolling and the fixed staff-roll tune.

A colour-star value includes the action path, colour name and wallet count, while yellow stars use the ordinary action path. The background label can be misleading: the wiki cautions that one lower-screen image path may expect NPF-shaped bytes despite an NBF extension. Never infer a decoder solely from the suffix. [1]

Literal metadata values

Place these Studio-specific metadata entries inside <head>. In the table, replace {absolute-URL} with the full resource or action URL; the braces and placeholder text are not sent to the client. [1]

Head metadata reference

Name	Content value	Effect or constraint
uppertitle	Text	Large, centred and underlined upper-screen title
uppersubleft	Text	Medium text below the title, aligned left
uppersubright	Text	Medium text below the title, aligned right
uppersubtop	Text	Small text in a box near the top
uppersubbottom	Text	Small text centred near the bottom of the upper screen
upperlink	{absolute-URL}.nbf or {absolute-URL}.ppm	Upper-screen image or animation; hides the upper text fields
background	{absolute-URL},width,height	Lower-screen image and its dimensions; documented extensions are .nbf and .ntft
autoplay	1	Start the animation when the page opens
playcontrolbutton	1	Expose native playback controls
savebutton	Absolute PPM URL	Download destination; the control appears only alongside playcontrolbutton
autoscroll	1	Scroll the page automatically; user interaction can stop it
bgm	1	Loop the built-in staff-credit music; this field does not choose a custom audio file

The wiki's lower-screen .nbf background contains NPF data and is limited to 8 × 8 pixels. This applies to that particular use of the background image; it does not change the NBF format or establish the same limit for NTFT. Supply dimensions that agree with the actual image bytes. [1]

Native button labels and destinations

Metadata name	Destination convention	Label recorded by the wiki
commentbutton	Absolute .reply URL	Comment
commentherebutton	Absolute .reply URL	Write here
replybutton	Absolute .reply URL	Reply
postherebutton	Absolute .post URL	Post here
postchannelbutton	Absolute .post URL	No label is supplied in the source's table
favoritebutton	Absolute .follow URL	Add to Favorites
cutoutbutton	Absolute .unfollow URL	Remove favorite
deletebutton	Absolute .delete URL	Delete

The table uses the English labels recorded by the wiki. These do not mean that a service can set arbitrary labels, and other localisations may use different words. Each destination triggers a native action rather than submitting an HTML form. [1]

Colour-star values

Name	Colour	Value shape
starbutton	Yellow	{absolute-page-URL}.star
starbutton1	Green	{absolute-page-URL}.star/green,{count}
starbutton2	Red	{absolute-page-URL}.star/red,{count}
starbutton3	Blue	{absolute-page-URL}.star/blue,{count}
starbutton4	Purple	{absolute-page-URL}.star/purple,{count}

The count tells the client how many stars of that colour are available, rather than how many the Flipnote has received. With twelve red stars available, set content="http://ds.example.com/ds/v2-us/movie/example.star/red,12" on starbutton2. A comma separates the count from the action URL. Yellow stars do not have this colour-and-count suffix. [1]

Example HTML document

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="uppertitle" content="Gallery">
    <meta name="playcontrolbutton" content="1">
    <meta name="savebutton" content="http://ds.example.com/movie/example.ppm">
  </head>
  <body>Choose an animation.</body>
</html>

This example follows the wiki's head-metadata layout and includes an explicit body. It shows the document structure only: to put an animation on the upper screen, add an appropriate upperlink. [1]