Social Semantic Web on Facebook Open Graph protocol and Twitter Annotations

1. Social Semantic Webon Facebook and TwitterDr. Myungjin Lee

2. 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.

3. The Social NetworkIn 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.

4. Social Webhow people socialize or interact with each otherthroughout the Webfrom Wikipedia

5. the Social Attributes in the Social WebIdentityGroupsMyungjin LeeConversationsPresenceRelationshipsSharingReputation

6. Weekly Market Sharefrom Hitwise.com

7. Market Share of VisitsMarket Share of Page Viewsfrom Hitwise.com

8. Top 20 WebsitesTop 20 Social Networking Websitesfrom Hitwise.com

10. 10terabytes7terabytesfrom Internet Summit 2010

12. Semantic Webto allow machines to understand the meaningof information on the World Wide Webfrom Wikipedia

13. Semantic Web Layer Cake

14. Distributed and Separated Data in the Social Web

16. Linked Datavia dereferenceable URIs on the Webto describe a method of exposing, sharing, and connecting datafrom Wikipedia

17. Vocabularies for Linking and SharingFriend of a frienda phrase used to refer to someone that one does not know well, literally, a friend of a friendFOAFSemantically-Interlinked Online Communitiesmethods for interconnecting discussion methods such as blogs, forums and mailing lists to each otherSIOCSimple Knowledge Organization System formal languages designed for representation of thesauri, classification schemes, taxonomies, subject-heading systems, or any other type of structured controlled vocabularySKOSResource Description Framework – in – attributes a W3C Recommendation that adds a set of attribute level extensions to XHTML for embedding rich metadata within Web documentsRDFaMicroformata web-based approach to semantic markup which seeks to re-use existing HTML/XHTML tags to convey metadata and other attributes in web pagesMicroformatfrom Wikipedia

18. Social Semantic Web based on human contributions and participations a Web of collective knowledge systemswhich are able to provide useful information from Wikipedia

19. SocialSemantic WebSIOC, DBpedia, TwineSocial WebWikis, blogs, social networksSemantic WebRDFS, OWL, SPARQLWorld Wide WebURIs, HTML, HTTPSemanticSyntax

22. the global mapping of everybody and hot they are relatedSocial Graphrelationships between users of the social networking servicean abstract concept of the social networkfrom Wikipedia

23. First Social Graph of Facebook in 2006is a friend ofis a friend ofis a friend ofis a friend ofMyungjin Lee

24. Social Graph of Facebook with Social Object in 2010is a friend ofis a fan ofis a friend ofis a friend ofis a friend ofis a fan ofMyungjin Leehas a relationship withis a member ofSocial Object

25. Social Objectthe reason two people are talking to each otherby Hugh Macleod

26. Like button of Facebook

27. Linking between you and outside of Facebooksimple way to share your content with friends on FacebookLikehttp://graph.facebook.com/me/likesMyungjin Lee

28. Not a Web Page Anymoresimple way to share your content with friends on FacebookLikehttp://graph.facebook.com/me/likesSocial ObjectMyungjin Lee

29. How to make social graph with social objects

31. Open Graph Protocolenables any web pageto become a rich object in a social graphsimple technologyfrom Facebook

32. Design Goals of Open Graph Protocol

33. Representation Concepts of Open Graph ProtocolOne Web PageOne Social Object

34. Representation Concepts of Open Graph ProtocolPropertyof Open Graph protocolLiteral ValueURIof web pagelooks like

35. The Open Graph protocol is based on RDFa.

36. RDFaW3C Recommendation to add a set of attribute level extensions to XHTML for embedding rich metadatawithin Web documents

37. Example of RDFa in XHTML

38. However, the Open Graph protocol is ...

39. Use <meta> tagsin the <head> of your web page

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

41. What is needed? – Required Properties

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

43. The type of your object.What is the user linking?<meta property='og:type' content='movie' />Products and EntertainmentActivitiesGroupsPlacesalbum

44. book

45. drink

46. food

47. game

48. movie

49. product

50. song

51. tv_show

52. activity

53. sport

54. cause

55. sports_league

56. sports_team

57. city

58. country

59. landmark

60. state_provinceBusinessesOrganizationsbar

61. company

62. café

63. hotel

64. restaurantWebsitesband

65. government

66. non_profit

67. school

68. universityPeoplearticle

69. blog

70. website

71. actor

72. athlete

73. author

74. public_figure

75. musician

76. politician

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

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

79. What is desired? – Optional Properties

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

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

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

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

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

86. Social Pluginto provide engaging social experiences to your users with just a line of HTMLfrom Facebook

87. Social Plugins of Facebook

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

89. Simple Way to Insert a Like Buttonhttp://developers.facebook.com/docs/reference/plugins/like

91. Sharing your content with friendsClickGraph ObjectMyungjin LeeShare

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

93. Meaning of Open Graph protocol on the Semantic Web

94. Using RDF ModelPropertyof Open Graph protocolLiteral ValueURIof web pageSPO

95. Mapping of Object typesObject typesProducts and EntertainmentActivitiesGroupsPlacesalbum

96. book

97. drink

98. food

99. game

100. activity

101. sport

102. cause

103. sports_league

104. sports_team

105. movie

106. product

107. song

108. tv_show

109. city

110. country

111. landmark

112. state_provinceBusinessesOrganizationsbar

113. company

114. café

115. hotel

116. restaurantWebsitesband

117. government

118. non_profit

119. school

120. universityPeoplearticle

121. blog

122. website

123. actor

124. athlete

125. author

126. public_figure

127. musician

128. politician

129. directorrdfs:Class

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

131. Link with other Vocabularies<rdfs:Classrdf:about="http://ogp.me/ns#Actor"> <rdfs:labelxml:lang="en-US">Actor</rdfs:label> <rdfs:subClassOfrdf:resource="http://xmlns.com/foaf/0.1/Person"/> <owl:equivalentClassrdf:resource="http://dbpedia.org/resource/Actor"/> <rdfs:isDefinedByrdf:resource="http://ogp.me/ns#"/></rdfs:Class>og:Actorrdfs:subClassOfrdf:typefoaf:Personowl:equivalentClassrdf:typedb:ActorSocial Object

132. How to link Open Graph to blog postsblogg.erhttp://blogg.er/2010/04/rock#postog:site_nameThe Rockog:titlesioc:abouthttp://blogg.er/2010/04/rock#moviehttp://blogg.er/2010/04/rock#moviesioc:num_repliesog:typesioc:contentmoviesioc:has_creatorog:urldc:title2Saw the Rock on TV tonight. Actually it was a lot better than I thought it would be!Rock!!!rev:hasReviewog:imagehttp://ia.media-imdb.com/images/rock.jpghttp://blogg.er/user/1og:descriptionhttp://blogg.er/2010/04/rock#reviewA 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.rev:rating6.5

134. Annotationa note that you make to yourself while you are reading information in a book, document, online record, video, software code or other informationfrom Wikipedia

135. Twitter Annotationsto add one or more annotations that represent structured metadata about the tweetfrom Twitter

136. The annotations feature has not been released.

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

138. Twitter Annotations Formatterhttp://r.github.com/annotationsformatter/

139. What can we put in the Annotations?Anything you want.

140. However, they published some guidelines.

141. Common Attributes

142. Recommend Types and Attributeswebpagereviewmovieproductcontent

143. rating

144. director

145. year

146. brand

147. model

148. price

149. categorytopicplacesongtvshowid

150. provider

151. place_type

152. street_address

153. locality

154. region

155. postal_code

156. country_code

157. latitude

158. longitude

159. artist

160. year

161. genre

162. album

163. networkstockbooksymbol

164. price

165. isbn

166. author

167. yearofferbookend_date

168. price

169. discount

170. location

171. start_date

172. end_dateSize of Tweet140 charctersAnnotations512 bytes

173. to bring more structured data to tweets to allow for better discovery of data and richer interactionsto borrow heavily from existing standardsRDFa, Microformats, Open Graph Protocol, AB Meta and Activitystrea.msThe Goal of Annotations

174. Annotation and Semantic Web

175. Annotations types to Ontologiesfoaf:Documentowl:equivalentClassOntologyClass“webpage” typefor Annotations

176. Linking into the Semantic Web

177. Conclusion

178. Social Semantic Web

179. Question

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

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

182. xml@yonsei.ac.krhttp://www.semantics.kr/http://www.twitter.com/MyungjinLeehttp://www.facebook.com/mjinleehttp://www.slideshare.net/onlyjinyAbout Me

Social Semantic Web on Facebook Open Graph protocol and Twitter Annotations

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Social Semantic Web on Facebook Open Graph protocol and Twitter Annotations (20)

More from Myungjin Lee (20)

Recently uploaded (20)

Social Semantic Web on Facebook Open Graph protocol and Twitter Annotations