HOME > RSS > TECHNOLOGY > Niall Kennedy's Weblog

R S S : Niall Kennedy’s Weblog


PageRank : 5 %

VoteRank :
(0 - 0 vote)





tagsTags: , , , , , , , , , , ,


English

RSS FEED READER



Windows 8, plugin-free browsing, and UA spoofing

26 May, by Niall Kennedy[ —]
Internet Explorer 10 metro view

Microsoft released a developer preview of Windows 8 at this week’s BUILD conference including a preview release of the next version of Internet Explorer. Windows 8 will include a “Metro style browser,” a simplified appliance-like view based on Windows Phone tiles. The Metro interface is powered by Internet Explorer (Trident, Chakra) behind-the-scenes in a special “immersive” full-screen runtime without support for browser plugins such as Adobe Flash Player. Microsoft is bundling a special compatibility view list with a uaStringImmersive attribute to spoof an iPhone, iPad, or even Firefox User-Agent to trigger special views on websites designed for a plugin-free or full-screen experience.


youtube.com
tv.slashgear.com
mashable.com

Sites using feature detection at runtime helps avoid assuming the same features for desktop Internet Explorer and Metro’s “immersive” Internet Explorer. The application/x-shockwave-flash handlers present in one version of the browser may not be present in the next. Assuming Internet Explorer cannot handle XMLHttpRequest or display H.264 video with AAC audio inside a could land your hostname in the Compatibility View penalty box.

The Internet Explorer 9 compatibility view list is available online in XML format including existing featureSwitch handlers.

Feature detect at runtime or update your content negotiation User-Agent matchers for Internet Explorer 10 before Microsoft decides to spoof its User-Agent for iPad treatment.


Open Graph protocol 1.1

24 May, by Niall Kennedy[ —]
Open Graph protocol logo

Facebook completed its rollout of Timeline profiles and Open Graph activity aggregation last week, completing a set of changes announced at their f8 developer conference in September. Facebook also switched over to a new version of Open Graph protocol, the metadata language used to connect web pages in the public Internet with the sharing activity happening inside Facebook’s walls. In this post I will highlight some of the major features of Open Graph protocol 1.1 affecting how your web pages display and rank inside Facebook news feeds, Google+ streams, Mixi social streams, and LinkedIn shared stories.

  1. What is Open Graph protocol
    1. Semantics
  2. Populating a basic story template
    1. Images
    2. Title, site name
    3. Type
    4. URL
  3. Multimedia
    1. Video
    2. Audio
  4. Special type attributes
  5. Generate markup, validate
    1. PHP generator
    2. Validator
    3. Official tools
  6. Summary

What is Open Graph protocol?

When someone shares a URL on a social networking site such as Facebook the site tries to create a summary of the page: title, description, thumbnail image, metadata, and more. Open Graph protocol defines elements placed in the of a web page’s HTML markup summarizing the contents of the page. Fallbacks to HTML standard elements sometimes exist; Open Graph protocol is an explicit definition of those elements and more. Open Graph protocol markup informs Facebook shared stories, Google +Snippets, mixi check, and other social sites using explicit sharing markup and content classification. I will reference Facebook consumption of Open Graph protocol for the rest of this post as they are the main proponent of the specification and typically the main target of web page publishers including Open Graph protocol markup on their pages.

Open Graph protocol markup affects pages shared with the “Like Button” social plugin, messages sent between Facebook users, links posted to a profile or news feed, and possibly search results returned by Facebook. The new Timeline activity groupings are based on Open Graph protocol defined web content when available.

Facebook shared story without Open Graph protocol markup

A link shared without Open Graph protocol markup relies on HTML fallbacks to generate a shared story summary. The content receives the most generic content classification of “website and may be de-emphasized in Multifeed rankings in favor of a more diverse set of stories.

Facebook shared story with Open Graph protocol video markup

A link shared with additional metadata provided by Open Graph protocol markup generates a full story summary with a preview image, embedded video, special categorization, and more behind-the-scenes data used to search and rank shared content.

Semantics

Open Graph protocol 1.1 is based on RDFa Core 1.1 markup. The examples below use compact URI expressions (CURIEs) based on scoped prefixes first defined by a parent element such as .



Populating a basic story template

When a Facebook user pastes a link into their status update Facebook requests the document, parses the result, and displays a story preview in the status update composition box. The webpage title, description, and thumbnail images are displayed immediately in this preview template. The fully published story may include additional metadata and viewing actions depending on the rendering context: profile, news ticker, or social news feed.

Images

An image thumbnail displayed next to a shared story boosts engagement in the social news feed. It’s possible to explicitly define image thumbnails you would like to appear next to your shared links on Facebook by including an og:image Open Graph protocol property. If Facebook encounters a page without Open Graph protocol image markup it might select all elements on the page and choose its own thumbnail image ranging from the largest image on the page to the tiny “powered by” badges in your site footer. Multiple image definitions are allowed, such as highlighting an image specific to the page followed by a site logo as a fallback.





The markup above points to an image representative of the current page and includes additional structured metadata describing the image width, height, and Internet media type. Facebook supports images formatted as JPEG, PNG, or GIF with a minimum width of 50 pixels and a minimum height of 50 pixels and a width no larger than three times the image height. Specifying “og:image” is enough to generate a thumbnail; adding extra structured properties helps filter out content that might not be the best fit for the intended display area.

Facebook shared story choose thumbnail control

You may specify multiple images using this markup. The first image matching minimum requirements is the default selection. A Facebook user authoring a status update might select a different thumbnail based on your explicitly-defined images. A hotel might include multiple photos of the property as Open Graph protocol images, allowing the person sharing the story to share a view of the pool or a view of the restaurant.

The “secure_url” property is used to display the same resource from a page accessed using HTTPS. Facebook proxies its images through Haystack to normalize images and protect users, minimizing the impact of this property for images in the Facebook news feed. The property is more useful for audio and video, covered later.

Title, Site name

A typical HTML </code> element value might include both the title of the page and the site name. Open Graph protocol separates the document title and the parent website into unique properties: <kbd>title</kbd> and <kbd>site_name</kbd>.</p> <p><code class="html"><title>Hello world - Example site

The “site_name” property provides an extra branding line in some shared story views. When a shared link is aggregated, such as a Timeline box showing shared articles of the month, the title of the page can be separated from the site to better highlight unique content and its source.

Type

An Open Graph protocol type definition classifies your shared content into globally-defined buckets or a bucket specific to your site.

Globally-defined Open Graph protocol content types currently include:

  • Website (default)
  • Book
  • Article
  • Profile (person)
  • Music album
  • Music playlist
  • Radio station
  • Song
  • Video
  • Movie
  • TV show
  • TV episode

Content that does not fit into one of the global types might be defined as a special type scoped to your Facebook application. If you plan to later aggregate this content in a Timeline profile box custom types can be a good idea; otherwise you are better off choosing a type understood by a wider array of parsers and available for aggregation in more contexts.

Open Graph protocol 1.0 defined 39 object types; Open Graph protocol 1.1 defines only 12. If you were previously a “band” or a “musician” you are now a “profile” and should update your markup.

URL

Facebook creates a unique identifier for each URL shared. A page specifying an og:url property can collapse multiple URLs referencing the same content into a single URL to properly represent the popularity of your content across Facebook. Similar to used by major search engines but in a special Facebook flavor. Visitors arriving at your web page via a URL with special query parameters appended for tracking purposes should be collapsed into a single URL reference with og:url.

Multimedia

Shared stories can include inline audio and video playback with appropriate Open Graph protocol markup.

Video

Defining a Flash video file associated with the page places a play button over your thumbnail image (now essentially a poster frame) and loads your linked video file on a user click or tap. It’s possible to specify multiple video formats with an array of structured video properties: Flash, MP4, and WebM for example. Facebook currently supports Flash and HTML video links, roughly correlated to and