Archive for the ‘APIs’ Category

File Under: APIs, Multimedia, Web Services

Flickr Amps Up the Social With New ‘Groups’ Features

Flickr's new group pool pages, now with "justified" view.

Flickr has made some small but welcome upgrades to the cornerstone of its social features — Flickr Groups. The changes include a new way to view group pools and the ability to post directly to groups using Flickr’s new HTML5 uploader.

Flickr lacks the hype of more recent photo-sharing services like Instagram, but remains popular with pro and amateur photographers alike at least in part because of the community that continues, despite some stumbles, to exist on the site. Much of that community is built around Flickr Groups, like-minded photographers banding together to share images of anything from beautiful mountains to sushi to a shared love of RAW images from micro 4/3 cameras.

In an effort to make it easier for Flickr fans to contribute to Groups, Flickr’s recently updated photo uploader now offers an option to share your photos with any group you’ve joined directly from the upload page.

Perhaps more importantly, Flickr is extending the Flickr API with the same features, making it possible for third-party applications — like your favorite iOS and Android photo apps — to add the same group sharing features. Developers can check out the Flickr code blog for more on what’s new in the Flickr API.

As part of today’s Groups upgrade, Flickr is also extending its “justified” view — which tiles images to fit more photos at larger sizes in a smaller space — to Group photo pools. Along with the justified view, Group Photo Pool pages now have a persistent (but collapsible) sidebar where you can quickly access group discussion threads, view tags and see the top contributors.

File Under: APIs, Browsers, Web Standards

WebKit Offers Early Preview of ‘Web Intents’

The WebKit project, creators of the rendering engine that powers web browsers like Safari and Chrome, has added support for the new Intent tag, part of the proposed Web Intents standard.

Originally developed by Google’s Paul Kinlan, Web Intents are a kind of meta-website API that would allows sites to easily pass data between each other — for example, to edit a photograph or share a URL with friends.

Since Kinlan initially proposed Web Intents — which are based on a similar system used in Google’s Android operating system — Mozilla and several other companies have joined forces to work on standardizing Web Intents.

Web Intents offer a way to connect your favorite sites to each other and pass data between them. The canonical example is a photo-sharing website that wants to let you edit your uploaded images. To do that, the site simply adds a button, Edit This Photo, and behind the scenes the new <intent> tag tells the browser that the button wants to connect to a photo-editing service. The browser would then either connect to your favorite online photo editor or offer a list of options.

In practice Web Intents work a bit like mailto: links, defining an action and then passing it along to the browser, which allows the user to choose how to handle the action. The difference is that instead of opening a desktop app, Web Intents connect to web services. Here’s a barebones example of what the tag looks like (taken from webintents.org):

<intent 
  action="http://webintents.org/share" 
  type="image/*" 
  href="image.html" 
  title="Kinlan's Image Share" />

In this example the browser would then give the user a list of registered image sharing apps — services like Twitter, Facebook, Google+ and so on — which the user can choose from.

Part of what makes Web Intents appealing is that it decouples services. Instead of waiting for Flickr to support the latest and greatest online photo editor, Flickr could simply add an intent tag and let you choose any editor you like, including that cool new one that’s still a private beta. Flickr would simply pass the image to the editor of your choice and when you’re done tweaking your photo the editor would then pass the final image back to Flickr.

Other use cases for Web Intents include choosing a preferred search engine, cloud printing, logging into websites and, of course, sharing something on your preferred social networks.

For some more background on Web Intents, check out Paul Kinlan’s blog, particularly his overview post on the brief history of Web Intents and his follow-up on using the Web Intents JavaScript APIs in Chrome. Tantek Çelik, the creator of microformats, also wrote a nice post last year on what he calls Web Actions (same thing, better name). Çelik breaks down the idea behind Web Intents and how they benefit not just developers, but users as well.

As Çelik writes, “web actions have the potential to change our very notions of what a web application is from a single site to loosely coupled interactions across multiple, distributed sites…. In that regard, web actions have the potential to become a building block for distributed web applications.”

Web Intents are a long way from a finalized standard and while many things may change before other browsers add support, if you’d like to get a sense of what you can do with Web Intents and how they work in practice grab the latest WebKit nightly build and point it at the examples page on webintents.org.

Image: Aidan Jones/CC/Flickr

Picture Better Web Apps With Mozilla’s Camera API

Mozilla is hard at work on a Camera API that will give web developers a way to access your phone’s camera. The Camera API will make it possible to build websites that can take pictures with your device’s camera and then upload them to that webpage. Throw in some CSS-based filters — perhaps a bit of JavaScript to add other image effects — and you’ve got Instagram, no native app necessary.

The Camera API is part of Mozilla’s larger WebAPI project, which is developing a set of APIs that will allow web apps to better compete with platform-native applications. To do that the WebAPI project will give developers access to your device’s hardware capabilities, like the camera, the calendar and even the vibration mechanism.

The WebAPI effort is a long way from complete, but the Camera API will work today on most Android devices. Mozilla’s Robert Nyman has a new post over at the Mozilla Hacks blog that walks through the basics of using the nascent Camera API, including a working demo you can test on your Android device using either Firefox or Chrome.

Bear in mind that, cool as the Camera API is, it’s not yet an official web standard. As with the rest of Mozilla’s WebAPI project, the Camera API is still very much in the development stage.

On the other hand, for those that want to experiment, the Camera API is much further along than some of the other WebAPIs. Adding to the appeal is the fact that the Camera API is being developed in conjunction with the W3C’s WebRTC spec, an effort to standardize a set of real-time audio and video streaming protocols. That means that an official standardized version of the Camera API will likely emerge sooner rather than later.

As it stands the Camera API is already supported in Firefox and Google Chrome on Android devices. Some of the other elements used in Nyman’s demo, like the JavaScript function createObjectURL are also supported in Internet Explorer 10. So far Apple’s Mobile Safari doesn’t support the Camera API or any of the JavaScript used to create the demo app.

For more info on Mozilla’s WebAPI efforts, check out the Mozilla wiki and for some additional Camera API ideas hit up the Mozilla Developer Network docs.

File Under: APIs, Web Services

Getting Started With Twitter’s Embedded Tweets Feature

Embed a tweet in any webpage

Somewhat lost amidst the news of Twitter’s revamped interface is a slightly more interesting tidbit for web developers: Twitter posts can now be embedded in other pages.

The new Embedded Tweet feature works just like a YouTube movie, offering a short HTML snippet that you can copy and paste into any third-party website. Unfortunately using the Embed Tweet feature from Twitter is somewhat awkward since it’s buried in the new interface. First you need to click on a tweet, then click “details” and then you’ll see the embed option.

The real benefit of the embed feature lies with third party platforms like Twitter’s two launch partners WordPress and Posterous. Users of both services can now simply paste a link to a tweet and it will automatically be converted to an embedded tweet, no cut and paste necessary. For example, just drop this code in your WordPress.com blog and it will automatically be converted to an embedded tweet:

[tweet https://twitter.com/twitterapi/status/133640144317198338]

If you’d like to implement something similar on your own site Twitter now has an OEmbed endpoint you can query to convert Twitter links to embedded tweets. Those not familiar with OEmbed can check out our OEmbed tutorial, but, in a nutshell, OEmbed is a standard format where you send a URL and the host site then sends back the necessary embed code.

There are three steps to Twitter’s OEmbed process:

  1. Obtain an URL to or ID number of the Tweet you want to render.
  2. Make a request to the GET statuses/oembed endpoint, passing the Tweet URL or ID as a query parameter.
  3. Render the html property of the response, as well as a <script> element pointing to //platform.twitter.com/widgets.js, if you want the embed to be interactive.

If you choose to render the tweet using Twitter’s widgets.js, the raw HTML will be converted into an interactive tweet. The fancy embedded tweet script uses Web Intents to allow users to reply, retweet, or follow the user directly from the embedded tweet. See the Twitter developer site for more details on Twitter’s widgets.js and how to use OEmbed to embedded tweets to your website.

Archive Your Social-Network Life With ThinkUp 1.0

A few of the things ThinkUp can do for your social-network life

ThinkUp, the web-based data-liberation and analytics application from former Lifehacker editor Gina Trapani, has just released version 1.0.

Social networking is often very ephemeral: You post something, a few people respond, and then the conversation just evaporates, disappearing into the ether. One of ThinkUp’s goals is the give your social-network posts a longer life and ensure that you’ll have a way to refer back to those conversations years later.

ThinkUp is a web-based app that pulls your data out of social silos like Facebook or Twitter and stores it on your own server. You control your own data, and have a record of your conversations potentially long after Facebook, Twitter and the rest have become mere footnotes in the history of the web.

“The conversations you have online are worth capturing, keeping, and referring back to over time,” writes Trapani on her Smarterware blog. “In fact, the things you share and the conversations you have about them gain weight, perspective, and importance over time, not just the moment you post them.”

The backup and archiving features alone would make ThinkUp a worthwhile app to have, but the real analytical power of ThinkUp comes after it has a local copy of your data. That’s when ThinkUp starts slicing, dicing and pulling together your data to reveal things about your online activity that you’ve never considered before.

For example ThinkUp can pull conversations together, plot them on a map, reveal which of your posts are the most popular, which are the most replied to and even track all the links your friends have ever sent you.

We took a detailed look at the software back when the beta was first released. Now ThinkUp is out of beta and ready for prime time with a 1.0 release.

The first step to using ThinkUp is installing the app on your server. The requirements are modest and installation is automated — if you can install WordPress, you can install ThinkUp. Of course not everyone is comfortable installing WordPress so ThinkUp takes a page from Dave Winer and offers a ThinkUp instance running on Amazon EC2. Just follow the link, sign in to your Amazon account and you’ll have ThinkUp running in no time (the first year is free for new EC2 users, $15/ month for the rest).

Once ThinkUp is installed you need to point it to your accounts. I tested it with Twitter and Google+ and had no problems importing data. One nice touch that’s been added since the beta release is a secret RSS feed for running the ThinkUp updater. Sure, you can add a cron job if you know what you’re doing, but for novice users the RSS feed is an ingenious tool — just add it to your favorite RSS reader (for example, Google Reader) and the reader will periodically scrape the feed, triggering the update.

The Twitter Dashboard in ThinkUp

Because ThinkUp pulls in your raw data it can show you useful stuff you won’t find on the social networks themselves. This is particularly noticeable with Twitter, which really shows very little beyond the most recent few tweets from your friends. ThinkUp takes the same data Twitter has and actually puts it to good use, showing, for example, your most replied-to posts, your most re-tweeted posts and, my personal favorite, conversations you have with other Twitter users. It also tracks everything your followers do as well. For example, ThinkUp catalogs all the links your followers have posted, displaying them all in one place. There’s also an excellent search function for tracking down old tweets.

While ThinkUp puts a tremendous amount of data at your fingertips, it manages to keep the interface simple enough that the data is never overwhelming.

ThinkUp also now makes it possible to host your conversations at a permalink on your site. It’s a feature that’s particularly useful if you frequently ask your Twitter followers for advice or suggestions. For example, here’s a page where Trapani asks her followers which iPad apps they recommend.

ThinkUp is already in use on several popular Twitter accounts, like, for example The White House (Steve Martin is also a fan) and in my testing it worked without a hitch. If you’re comfortable setting up basic software like WordPress, installing ThinkUp should be a snap and if you’re not confident around a server there’s always the Amazon-based version.

If you’d like to see more of what ThinkUp has to offer, check out the video below:

See Also: