(5) Transclusion

• Transclusion means to include some remote content inside a web page
• Instead of the included content being copied, it is pointed to in a way that allows it to viewed (or listened to) in different contexts
• Transclusion differs from linking: instead of the user having to follow a link, the browser fetches the included content and displays it directly
• We've already seen several examples of transclusion
  • Images [HyperText Markup Language (HTML); Images (1)], Scalable Vector Graphics (SVG) [Multimedia; Scalable Vector Graphics (SVG) (1)], Canvas [Multimedia; Canvas (1)], Audio & Video in HTML5 [Multimedia; Audio & Video in HTML5 (1)]
• Today we'll be talking about transcluding more "independent" third-party content

(6) iframes

• The iframe element can be used to include any HTML page within any other HTML page
• The content within the iframe is loaded directly from the source web server by the browser, just as if the user had visited that page directly

<iframe src="http://mobile.yelp.com/biz/qHmamQPCAKkia9X0uryA8g" width="50%" height="450px" style="float: right; margin: 20px;">

(7) Embedded Objects

• The object and embed elements are used to transclude non-HTML content
• Usually used for Java applets [http://java.sun.com/docs/books/tutorial/deployment/applet/], Silverlight [http://en.wikipedia.org/wiki/Microsoft_Silverlight], and Flash applications
• Sophisticated embedded objects can allow users to explore sites without needing to visit them (e.g. YouTube)

<object width="640" height="385" style="float: right; margin: 20px;">
<param name="movie" value="http://www.youtube.com/v/lAl28d6tbko&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/lAl28d6tbko&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>

(8) Javascript Widgets

• Rather than directly adding elements to transclude 3rd-party content, you can reference a script that adds the elements for you
• This is very simple, but you are trusting the 3rd party not to do evil things to your page
• On the other hand, any time you transclude 3rd-party content you are entrusting part of your page to someone else

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script>
<script>if (WIDGETBOX) WIDGETBOX.renderWidget('d8e2e8e9-8b6d-4f9f-a143-b1dd4347e398');</script>

(9) Server-Side Transclusion

• All the previous methods of transcluding 3rd-party content are client-side methods
  • the browser is loading the 3rd-party content directly
• With server-side widgets, the 3rd-party content is loaded by a web server (such as a widget portal [Widget Portals (1)] or platform [Widget Platforms (1)]) and integrated into a web page before sending it to the browser
  • The browser never contacts the 3rd-party server

(11) Social Media

• The big success of 3rd-party content has been driven by social networking sites: MySpace, Facebook, but also things like phpBB [http://www.phpbb.com/]
• Profiles, wiki pages, blog posts, comment threads are all places where client-side transclusion can be used (if allowed)
• Note that social networking sites can be both hosts [http://www.facebook.com/platform_tour.php] and sources [http://www.facebook.com/facebook-widgets/] of 3rd-party content
• Through a popular host site, providers of third-party content can also grow very popular
• Sometimes the third-party (para)site can "eat its host"
  • MySpace & YouTube, Facebook & Zynga [http://www.zynga.com/]?

(12) Widget Marketing Success

(13) Widget Portals

[http://google.com/ig]

[http://netvibes.com]

• Widget portals are an update of the old My Netscape portal [Content Syndication (Atom & RSS); RSS History (1)] idea
• Intended for use as "start pages" with an overview of commonly accessed content
  • Weather, news, sports scores, email inbox, etc.
• Yahoo! [http://developer.yahoo.net/blog/archives/2009/09/yaps_on_yahoo.html], Google [http://www.google.com/ig/directory], and Microsoft [http://gallery.live.com/default.aspx?pl=4] all have variations on this theme
• Widget portals use server-side transclusion, so 3rd parties must develop widgets according to portal specifications (or use syndication [Content Syndication (Atom & RSS); Syndication Formats (1)])

(14) Widget Platforms

[http://www.facebook.com/platform_tour.php]

[http://code.google.com/apis/wave/]

• Widget portals [Widget Portals (1)] just aggregate 3rd-party content or functionality
• Widget platforms provide some special functionality that 3rd parties can integrate with
• For example:
  • the Facebook Platform [http://www.facebook.com/platform_tour.php] provides functionality relating to social networking (inviting, sharing, etc.)
  • the Google Wave platform [http://code.google.com/apis/wave/] provides functionality relating to real-time collaboration (chatting, editing, etc.)
• Note that both of these sites also can be 3rd parties themselves:
  • Facebook has widgets that you can embed anywhere
  • Google Wave documents/conversations can be embedded anywhere

(15) Advertising

• Advertising is the "killer app" of 3rd-party content
• Publishers can make money by hosting 3rd-party content (advertising) on their sites
• 3rd-party content providers can also sell advertising space, e.g. in embedded videos or games
• Client-side or server-side transclusion?
• Issues for branded advertising

(16) “Outsourcing”

[http://disqus.com/]

[http://en.gravatar.com/]

• Transclusion isn't just for extra stuff like badges or ads
• It can be used to outsource core functionality to another company or service
• For example:
  • Disqus [http://disqus.com/] provides commenting for other sites (like Tumblr [http://tumblinerb.com/post/482404218/review-wiz-khalifa-yelawolf-9-30-club#disqus_thread])
  • Gravatar [http://en.gravatar.com/] provides avatars for other sites (like Disqus)
• What are the advantages of this kind of outsourcing? Disadvantages?