Markup for sociality.
There are currently two markup types supported by SocietML: FB and MSG.
To create a SocietML element, simply set the
data-societml-type attribute to either
msg (case-insensitive) on a normal HTML element.
This element will henceforth be referred to as the "parent element"; we recommend using
Each markup type has its own syntax:
Type-FB represents a longform social-media post.
The only permitted child nodes of a type-FB parent are text nodes and
There are several attributes that you should use to provide additional information. Set these on the root element:
data-societml-imggives the location of a profile picture for the post.
data-societml-namedescribes the author of the post. If not set, it defaults to "A Friend".
data-societml-namesrcsets the link to the author's profile page.
data-societml-viatells where the post came from.
data-societml-viasrcsets the link to the "via" page.
data-societml-datetimegives the date and time of the post. This should follow the syntax of the
datetimeattribute of the
Line-breaks inside text nodes are preserved, and double-line-breaks create new paragraphs.
You can optionally include a link with a picture or preview information by setting
data-societml-title on an
data-societml-title is set, a description may be added in the element's contents and an author may be included with
data-societml-title is set, this information is ignored and only the picture is displayed.
Only one link can be given a preview per type-FB post.
Here is a sample type-FB SocietML element:
<blockquote data-societml-type="fb" data-societml-name="Concerned Friend" data-societml-img="" data-societml-datetime="2015-07-23T17:00:00-0700"> Here's some text, and then a link: <a href="http://example.com">example.com</a>. That's all the formatting you can do with type-FB. Line-breaks are preserved. Two or more line-breaks produce a new paragraph. <a href="http://example.com" data-societml-title="example title" data-societml-author="example author"> Here is the preview content for the link. </a> </blockquote>
Type-MSG represents messaging; for example in a text-message or chatroom setting.
The only permitted child nodes of a type-MSG parent are
data-societml-name attribute represents the person talking; each person should be represented by exactly one
On the first
<p> element with a given
data-societml-name attribute, a few additional parameters may be set:
These associate background and text colours with the name in question.
These can only be set the first time a name appears, and cannot be changed later.
data-societml-datetime element can assign a date and/or time to each message.
This should follow the syntax of the
datetime attribute of the
You can start a message with
/me to write the message in first-person; give it a try!
Here is a sample type-MSG SocietML element:
<blockquote data-societml-type="msg"> <p data-societml-name="Person 1" data-societml-bg="#E6E5EB" data-societml-text="black">Hey what's up?</p> <p data-societml-name="Person 2" data-societml-bg="#1289FD" data-societml-text="white">Not much yo.</p> <p data-societml-name="Person 1">Only specify data-societml-bg and data-societml-text the first time someone's name comes up.</p> <p>If data-societml-name is omitted it defaults to the previous one.</p> </blockquote>
societml.js file contains a script to render SocietML elements.
Load this script after the DOM content for the page has been loaded and it will process the page, rendering all SocietML markup.