Social Semantic Webon Facebook and
Twitter<br />Dr. Myungjin Lee<br />

The webis more a social
creation than a technical one. I designed it for a social effect — to help people work together — and not as a technical toy. <br />

The Social Network<br />In The
Social Network, director David Fincher and screenwriter Aaron Sorkin explore the moment at which Facebook, the most revolutionary social phenomena of the new century, was invented -- through the warring perspectives of the super-smart young men who each claimed to be there at its inception. <br />

Social Web<br />how people socialize
or interact with each other<br />throughout the Web<br />from Wikipedia<br />

the Social Attributes in the
Social Web<br />Identity<br />Groups<br />Myungjin Lee<br />Conversations<br />Presence<br />Relationships<br />Sharing<br />Reputation<br />

Weekly Market Share<br />from Hitwise.com<br
/>

Market Share of Visits<br /><ul><li>Market
Share of Page Views</li></ul>from Hitwise.com<br />

Top 20 Websites<br /><ul><li>Top 20
Social Networking Websites</li></ul>from Hitwise.com<br />

10terabytes<br />7terabytes<br />from Internet Summit
2010<br />

Semantic Web<br />to allow machines
to understand the meaning<br />of information on the World Wide Web<br />from Wikipedia<br />

Semantic Web Layer Cake<br />

Distributed and Separated Data in
the Social Web<br />

Linked Data<br />via dereferenceable URIs
on the Web<br />to describe a method of exposing, sharing, and connecting data<br />from Wikipedia<br />

Vocabularies for Linking and Sharing<br
/>Friend of a frienda phrase used to refer to someone that one does not know well, literally, a friend of a friend<br />FOAF<br />Semantically-Interlinked Online Communitiesmethods for interconnecting discussion methods such as blogs, forums and mailing lists to each other<br />SIOC<br />Simple Knowledge Organization System formal languages designed for representation of thesauri, classification schemes, taxonomies, subject-heading systems, or any other type of structured controlled vocabulary<br />SKOS<br />Resource Description Framework – in – attributes a W3C Recommendation that adds a set of attribute level extensions to XHTML for embedding rich metadata within Web documents<br />RDFa<br />Microformata web-based approach to semantic markup which seeks to re-use existing HTML/XHTML tags to convey metadata and other attributes in web pages<br />Microformat<br />from Wikipedia<br />

Social Semantic Web<br /> based
on human contributions and participations<br /> a Web of collective knowledge systems<br />which are able to provide useful information <br />from Wikipedia<br />

<br /><br />Social<br />Semantic Web<br
/>SIOC, DBpedia, Twine<br />Social Web<br />Wikis, blogs, social networks<br /><br /><br /><br /><br />Semantic Web<br />RDFS, OWL, SPARQL<br />World Wide Web<br />URIs, HTML, HTTP<br />Semantic<br />Syntax<br />

the global mapping of everybody
and hot they are related<br />Social Graph<br />relationships between users of the social networking service<br />an abstract concept of the social network<br />from Wikipedia<br />

First Social Graph of Facebook
in 2006<br />is a friend of<br />is a friend of<br />is a friend of<br />is a friend of<br />Myungjin Lee<br />

Social Graph of Facebook with
Social Object in 2010<br />is a friend of<br />is a fan of<br />is a friend of<br />is a friend of<br />is a friend of<br />is a fan of<br />Myungjin Lee<br />has a relationship with<br />is a member of<br />Social Object<br />

Social Object<br />the reason two
people are talking to each other<br />by Hugh Macleod<br />

Like button of Facebook<br />

Linking between you and outside
of Facebook<br />simple way to share your content with friends on Facebook<br />Like<br />http://graph.facebook.com/me/likes<br />Myungjin Lee<br />

Not a Web Page Anymore<br
/>simple way to share your content with friends on Facebook<br />Like<br />http://graph.facebook.com/me/likes<br />Social Object<br />Myungjin Lee<br />

How to make social graph
with social objects<br />

Open Graph Protocol<br />enables any
web page<br />to become a rich object in a social graph<br />simple technology<br />from Facebook<br />

Design Goals of Open Graph
Protocol<br />

Representation Concepts of Open Graph
Protocol<br />One Web Page<br />One Social Object<br />

Representation Concepts of Open Graph
Protocol<br />Property<br />of Open Graph protocol<br />Literal Value<br />URI<br />of web page<br />looks like<br />

The Open Graph protocol is
based on RDFa.<br />

RDFa<br />W3C Recommendation to add
a set of attribute level extensions to XHTML for embedding rich metadatawithin Web documents<br />

Example of RDFa in XHTML<br
/>

However, the Open Graph protocol
is ...<br />

Use <meta> tagsin the <head>
of your web page<br />

Example of Open Graph Protocol<br
/><html xmlns:og="http://opengraphprotocol.org/schema/" <br />xmlns:fb="http://www.facebook.com/2008/fbml"><br /> <head><br /> <meta property="og:url" content="http://www.imdb.com/title/tt1285016/" /><br /> <meta property='og:image' content='http://ia.media-imdb.com/…140_.jpg'><br /> <meta property='og:type' content='movie' /><br /> <meta property='fb:app_id' content='115109575169727' /><br /> <meta property='og:title' content='The Social Network (2010)' /><br /> <meta property='og:site_name' content='IMDb' /><br />...<br />

What is needed? – Required
Properties<br />

The canonical URL of your
object that will be used as its permanent ID in the graph.<br />A Canonical URL<br /><meta property="og:url" content="http://www.imdb.com/title/tt1285016/" /><br />

The type of your object.<br
/>What is the user linking?<br /><meta property='og:type' content='movie' /><br />Products and Entertainment<br />Activities<br />Groups<br />Places<br /><ul><li>album

book

drink

food

game

movie

product

song

tv_show

activity

sport

cause

sports_league

sports_team

city

country

landmark

state_province</li></ul>Businesses<br />Organizations<br /><ul><li>bar

company

café

hotel

restaurant</li></ul>Websites<br /><ul><li>band

government

non_profit

school

university</li></ul>People<br /><ul><li>article

blog

website

actor

athlete

author

public_figure

musician

politician

director</li></li></ul><li>The title of your object
as it should appear within the graph.<br />A Clean Page Title<br /><meta property='og:title' content='The Social Network (2010)' /><br />

An image URL which should
represent your object within the graph. <br />An Image<br /><meta property='og:image' content='http://ia.media-imdb.com/…140_.jpg‘><br />

What is desired? – Optional
Properties <br />

A one to two sentence
description of your object. <br />A Short Description<br /><meta property='og:description’ content='Directed by David Fincher.<br /> With Jesse Eisenberg, Andrew Garfield,<br /> Justin Timberlake, Rooney Mara. ‘><br />

If your object is part
of a larger web site, the name which should be displayed for the overall site. <br />A Site Name<br /><meta property='og:site_name' content='IMDb' /><br />

You can specify location via
latitude and longitude, a full address, or both. <br />To specify latitude and longitude:<br />og:latitude and og:longitude<br />To specify a human readable address: <br />og:street-address, og:locality, og:region, og:postal-code, and og:country-name<br />Location Information<br /><meta property="og:latitude" content="37.416343" /><br /><meta property="og:longitude" content="-122.153013" /><br /><meta property="og:street-address" content="1601 S California Ave" /><br /><meta property="og:locality" content="Palo Alto" /><br /><meta property="og:region" content="CA" /><br /><meta property="og:postal-code" content="94304" /><br /><meta property="og:country-name" content="USA" /><br />

The Open Graph protocol supports
the ability for you to specify contact information for your object. <br />To specify contact information<br />og:email, og:phone_number, and og:fax_number<br />Contact Information<br /><meta property="og:email" content="me@example.com" /><br /><meta property="og:phone_number" content="650-123-4567" /><br /><meta property="og:fax_number" content="+1-415-123-4567" /><br />

Example of Open Graph Protocol<br
/><html xmlns:og="http://opengraphprotocol.org/schema/" <br />xmlns:fb="http://www.facebook.com/2008/fbml"><br /> <head><br /> <meta property="og:url" content="http://www.imdb.com/title/tt1285016/" /><br /> <meta property='og:image' content='http://ia.media-imdb.com/…140_.jpg'><br /> <meta property='og:type' content='movie' /><br /> <meta property='fb:app_id' content='115109575169727' /><br /> <meta property='og:title' content='The Social Network (2010)' /><br /> <meta property='og:site_name' content='IMDb' /><br />...<br />

Social Plugin<br />to provide engaging
social experiences to your users with just a line of HTML<br />from Facebook<br />

Social Plugins of Facebook<br />

The Like button lets users
share pages from your site back to their Facebook profile with one click.<br />Like Button Plugins<br />

Simple Way to Insert a
Like Button<br />http://developers.facebook.com/docs/reference/plugins/like<br />

Sharing your content with friends<br
/>Click<br />Graph Object<br />Myungjin Lee<br />Share<br />

Information based on Metadata<br /><meta
property='og:title’<br />content='The Social Network (2010)' /><br /><meta property='og:image' content='http://ia.media-imdb.com/…140_.jpg‘><br /><meta property="og:description" content=" Directed by David Fincher. With Jesse Eisenberg, Andrew Garfield, Justin Timberlake, Rooney Mara. " /><br />

Meaning of Open Graph protocol
on the Semantic Web<br />

Using RDF Model<br />Property<br />of
Open Graph protocol<br />Literal Value<br />URI<br />of web page<br />S<br />P<br />O<br />

Mapping of Object types<br /><ul><li>Object
types</li></ul>Products and Entertainment<br />Activities<br />Groups<br />Places<br /><ul><li>album

book

drink

food

game

activity

sport

cause

sports_league

sports_team

movie

product

song

tv_show

city

country

landmark

state_province</li></ul>Businesses<br />Organizations<br /><ul><li>bar

company

café

hotel

restaurant</li></ul>Websites<br /><ul><li>band

government

non_profit

school

university</li></ul>People<br /><ul><li>article

blog

website

actor

athlete

author

public_figure

musician

politician

director</li></ul>rdfs:Class<br />

Mapping of Social Object<br /><rdf:Propertyrdf:about="http://ogp.me/ns#type"><br
/> <rdfs:labelxml:lang="en-US">type</rdfs:label><br /> <rdfs:seeAlsordf:resource="http://www.w3.org/1999/02/22-rdf-syntax-ns#type"/><br /> <rdfs:isDefinedByrdf:resource="http://ogp.me/ns#"/><br /></rdf:Property><br />Individual<br />Social Object<br />

Link with other Vocabularies<br /><rdfs:Classrdf:about="http://ogp.me/ns#Actor"><br
/> <rdfs:labelxml:lang="en-US">Actor</rdfs:label><br /> <rdfs:subClassOfrdf:resource="http://xmlns.com/foaf/0.1/Person"/><br /> <owl:equivalentClassrdf:resource="http://dbpedia.org/resource/Actor"/><br /> <rdfs:isDefinedByrdf:resource="http://ogp.me/ns#"/><br /></rdfs:Class><br />og:Actor<br />rdfs:subClassOf<br />rdf:type<br />foaf:Person<br />owl:equivalentClass<br />rdf:type<br />db:Actor<br />Social Object<br />

How to link Open Graph
to blog posts<br />blogg.er<br />http://blogg.er/2010/04/rock#post<br />og:site_name<br />The Rock<br />og:title<br />sioc:about<br />http://blogg.er/2010/04/rock#movie<br />http://blogg.er/2010/04/rock#movie<br />sioc:num_replies<br />og:type<br />sioc:content<br />movie<br />sioc:has_creator<br />og:url<br />dc:title<br />2<br />Saw the Rock on TV tonight. Actually it was a lot better than I thought it would be!<br />Rock!!!<br />rev:hasReview<br />og:image<br />http://ia.media-imdb.com/images/rock.jpg<br />http://blogg.er/user/1<br />og:description<br />http://blogg.er/2010/04/rock#review<br />A group of U.S. marines, under command of a renegade general, take over Alcatraz and threat San Francisco Bay with biological weapons. A chemical weapons specialist and the only man to have ever escaped from the Rock are the only ones who can prevent chaos.<br />rev:rating<br />6.5<br />

Annotation<br />a note that you
make to yourself while you are reading information in a book, document, online record, video, software code or other information<br />from Wikipedia<br />

Twitter Annotations<br />to add one
or more annotations that represent structured metadata about the tweet<br />from Twitter<br />

The annotations feature has not
been released.<br />

First element is a type.<br
/>Every Annotations has a type.<br />Type maps to attribute and value pair.<br />Second element is one or more attribute names with values.<br />How to present Annotations on a tweet<br />

Twitter Annotations Formatter<br />http://r.github.com/annotationsformatter/<br />

What can we put in
the Annotations?<br />Anything you want.<br />

However, they published some guidelines.<br
/>

Common Attributes<br />

Recommend Types and Attributes<br />webpage<br
/>review<br />movie<br />product<br /><ul><li>content

rating

director

year

brand

model

price

category</li></ul>topic<br />place<br />song<br />tvshow<br /><ul><li>id

provider

place_type

street_address

locality

region

postal_code

country_code

latitude

longitude

artist

year

genre

album

network</li></ul>stock<br />book<br /><ul><li>symbol

price

isbn

author

year</li></ul>offer<br />book<br /><ul><li>end_date

price

discount

location

start_date

end_date</li></li></ul><li>Size of Tweet<br />140 charcters<br
/>Annotations<br />512 bytes<br />

to bring more structured data
to tweets <br />to allow for better discovery of data and richer interactions<br />to borrow heavily from existing standards<br />RDFa, Microformats, Open Graph Protocol, AB Meta and Activitystrea.ms<br />The Goal of Annotations<br />

Annotation and Semantic Web<br />

Annotations types to Ontologies<br />foaf:Document<br
/>owl:equivalentClass<br />Ontology<br />Class<br />“webpage” type<br />for Annotations<br />

Linking into the Semantic Web<br
/>

Conclusion<br />

Social Semantic Web<br />

Question<br />

Tim Berners-Lee, Weaving the Web<br
/>Wikipedia, http://www.wikipedia.org<br />Hitwise, http://www.hitwise.com<br />Rod Smith, Big Data For Smarter Planet, https://www-927.ibm.com/ibm/cas/cascon/files/Rod%20Smith%20keynote.pdf<br />W3C, Semantic Web, and Other Technologies to Watch, http://www.w3.org/2008/Talks/1009-bratt-W3C-SemTech/Overview.html<br />Alexandre Passant and John Breslin, The Social Semantic Web, http://www.slideshare.net/Cloud/the-social-semantic-web<br />John Maver and Jamie Tedford, Facebook Open Graph, http://www.slideshare.net/TechAwards2010/facebook-open-graph-61010<br />MatteoBrunati, Facebook (Open) Graph and the Semantic Web, http://www.slideshare.net/dagoneye/facebook-open-graph-and-the-semantic-web<br />References<br />

Hugh Macleod, Social Objects for
Beginners, http://gapingvoid.com/2007/12/31/social-objects-for-beginners/<br />The Open Graph Protocol, http://www.opengraphprotocol.org/<br />David Recordon, The Open Graph protocol - Understanding the design decisions, http://www.scribd.com/doc/30715288/The-Open-Graph-Protocol-Design-Decisions<br />Social Plugin, http://developers.facebook.com/plugins<br />Annotations Overview, http://dev.twitter.com/pages/annotations_overview<br />Annotations, http://www.slideshare.net/raffikrikorian/twitter-api-annotations<br />Joshua Shinaview and JansAasman, Real-time Semantic Web with Twitter Annotations, http://www.slideshare.net/joshsh/realtime-semantic-web-with-twitter-annotations-4606369<br />References<br />

xml@yonsei.ac.kr<br />http://www.semantics.kr/<br />http://www.twitter.com/MyungjinLee<br />http://www.facebook.com/mjinlee<br />http://www.slideshare.net/onlyjiny<br
/>About Me<br />