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:
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:
Obtain an URL to or ID number of the Tweet you want to render.
Make a request to the GET statuses/oembed endpoint, passing the Tweet URL or ID as a query parameter.
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.
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:
Or, it might be because you’ve got a complete and total backup of all your Flickr images running on your own URL, complete with all the metadata, permissions and privacy settings you’ve stored on Flickr.
What’s that? You don’t have a parallel version of Flickr on your own server? For shame.
Lucky for you, former Flickr employee Aaron Straup Cope created Parallel-Flickr which, as the name suggests, mirrors Flickr on your own domain. Parallel-Flickr is, in Cope’s words, “still a work in progress… it ain’t pretty or classy yet but it works.”
In a nutshell Parallel-Flickr is a set of PHP scripts for backing up your Flickr photos and generating a database-backed website to display them. The feature list includes downloading and storing your original images (along with the 640px version) and grabbing all of Flickr’s metadata about each image as a JSON file. With that info Parallel-Flickr then constructs a database and generates a website with the same URL structure that Flickr uses. Parallel-Flickr also “honours the viewing permissions you’ve chosen on Flickr.” It’s that last part of that description that’s intriguing. Here’s Cope’s description of what the code does:
The thing that’s most interesting to me though is the last piece on that list: The part where the site uses Flickr to authenticate logged in users. What that means is that I can replicate Flickr’s privacy settings locally. It means that I can have a local copy of my photos and keep private things private…
…
If you come to my site and you’re not logged in (via Flickr) you just won’t see non-public photos. Neither will I, for that matter. But if you do log in then because you’ve logged in via the Flickr API auth dance I have a auth token for you and can look up your Flickr ID and whether you’re a contact and see when and where you have permissions to see all those other photos.
In other words, so long as Flickr is around, Parallel-Flickr allows your site to act exactly like Flickr. From the URLs to the privacy settings, you’ll have your data backed up and online. Should the unthinkable happen to Flickr your site will still continue to function, save your private images which will be hidden safely away.
As noted above, Parallel-Flicker is a work in progress, but if you’d like to try it out, head on over to the GitHub page and grab the code. If you prefer to wait for features like cron jobs for syncing, geodata backups, S3 archiving and more, keep an eye on the project, all that and more is already on the todo list.
Video on the web has always been a bit disappointing. After all, it’s pretty much just like television, only smaller. Unlike the rest of the web, video is just as much a passive experience in your browser as it is anywhere else.
Mozilla would like to change that. The company’s effort to bring a more interactive video experience to the web is known as Popcorn.js and it recently reached 1.0 status. If you’d like to play around with Popcorn, head on over to the Mozilla site and download a copy. Popcorn uses HTML5 video features and at the moment works best in Firefox and Chrome.
At its core, Popcorn is about making HTML5 web video into something more than just another television.
While it’s nice to have a way to embed videos without Flash, HTML5 video is capable of much more than just, well, video. It’s HTML, after all. That means it can tap into things like WebGL, or use JavaScript to augment video in real time — annotating videos with information like location, details about the people and topics in the video, subtitles, Twitter feeds, current weather information, links and much more.
Popcorn is simply a JavaScript library that aims to simplify the process of adding external data culled from around the web to your video. To give an idea of what’s possible with Popcorn, Mozilla is showcasing the movie One Millionth Tower, a documentary film about an apartment building and how residents imagine the future. One Millionth Towerpremiered online last weekend at Wired.com. If you haven’t seen it yet, head over to the Underwire blog.
One Millionth Tower uses some tricks beyond Popcorn (like WebGL for some 3-D elements), but most of its coolest effects — like the way the environment in the film changes based on the real-time weather conditions and time of day at the Toronto high-rises where the documentary was filmed — are all courtesy of Popcorn.
If it happens to be snowing in Toronto when you watch the film, it will begin snowing in the virtual world of One Millionth Tower. At other points in the film Popcorn pulls outside information from Flickr, Wikipedia, Google Maps and, of course, Yahoo Weather. Pretty much any web service with an API can be plugged into an HTML5 video in real time with Popcorn.
A more mundane but potentially more widespread use for Popcorn is subtitles. Using Popcorn, a set of subtitles attached to a video could be sent on to an online translation tool and converted to whatever language you wanted on the fly. Popcorn could then pipe the translation back into the video. In other words, subtitle your movie once and anyone will be able to understand it.
So how does Popcorn work? Well, Popcorn.js takes the native HTMLMediaElement properties, methods and events — collectively known as HTML5 video — and normalizes them into an API. The API has a plug-in system so developers can contribute and reuse code for common tasks. In fact, Popcorn already has dozens of plugins for most popular web services like Twitter, various maps, Facebook, Processing.js and, of course, all the services mentioned above in conjunction with One Millionth Tower.
In addition to the Popcorn.js framework, there’s also Popcorn Maker, a web-based graphical user interface for creating Popcorn-based videos. Popcorn Maker is the newest member of the Popcorn family and is not yet a 1.0 release. Its goal is to offer the familiar timeline controls you’d expect in video editing software, but at the moment it’s an alpha release and can be a little buggy. Popcorn Maker is powered by another bit of JavaScript, dubbed butter.js, which could be used to add Popcorn editing features to any desktop video editing software, though as of this writing we aren’t away of any popular video editing apps that use it.
A few of the many tasks Ifttt can automate for you
The awkwardly named, but fantastically useful, Ifttt.com (short for “if this then that”), has come out of private beta and is now open to everyone. Ifttt is a service that hooks together other web services so that you can automate common tasks like sharing links, saving Instagram photos or responding to Twitter posts. Think of Ifttt as Yahoo Pipes, but simplified, and better looking.
If you’d like to try out the site, head on over to ifttt.com. For some background on how the site came to be, check out the Ifttt blog.
At its most basic level Ifttt is what its founders call “digital duct tape… allowing you to connect any two services together.” On a perfect web Ifttt wouldn’t be necessary, every service would talk to every other service and everything would just work. Obviously that web doesn’t exist, so there’s Ifttt.
The best way to understand how Ifttt works is by example. Let’s say you want to share links with other people on the web. You might store links in Delicious or Pinboard for yourself and then post them to services like Twitter or Facebook for your friends to see. That’s all well and good, but what if you could automate the process? That’s where Ifttt comes in.
The usefulness is in the name — if this, then that. Sticking with the link example, we might create a task that works like this: IF a new link is posted to Delicious, THEN grab the link and post it to Twitter and Facebook.
The basic workflow is to choose a service from the list (which include popular web services like Instagram, Tumblr and WordPress, or more general tasks like phone calls, SMS or time-based actions). Once you have the “this,” the next step is choosing a trigger. Triggers vary according to the “this” you’ve selected. For example the Delicious triggers include things like “any new public bookmark” or “new bookmark tagged,” while the time option has triggers like “Every day at” or “Every year on.” Once you have your trigger set, you add the “that” portion of Ifttt’s name, which consists of a list of services like the “this” portion.
Maybe links aren’t a particularly interesting use case these days, here’s a better one for the kids: every time you post an image to your Instagram account, have Ifttt.com grab a copy and sync it over to your dropbox folder for instant backups. Or send starred items in Google Reader to Read it Later or Instapaper. Or send yourself an email every time an Orange Bass Cabinet pops up on Craigslist. Or create daily reminders with the time triggers. Or trigger a fake phone call to escape awkward situations.
Because the possibilities of Ifttt can be overwhelming, along with the public launch, Ifttt introduced a new feature called recipes, which are simply a way of sharing your tasks (not the data in the tasks, just the tasks). The site has only been public for a few days and already there are hundreds of recipes.
If you’d like to automate your web, head on over to Ifttt.com and sign up for a free account.
Google’s Page Speed testing tool, which recently went from a browser add-on to a web-based tool, now sports a new API. The Page Speed Online API allows outside applications to send URLs to Page Speed and get back a list of things the site developer can do to speed up the page in question.
If you’d like to try it, head over to the new documentation page and request an API key. Sample apps include using the Page Speed Online API to display suggestions for speeding up sites or even combining the API with the Google Charts API to show a visual breakdown of the page’s resources.
For a more practical example of how the Page Speed Online API can help out your site, check out the latest version of the W3 Total Cache plugin for WordPress. If you’re not already using W3 Total Cache in your WordPress installation, we highly recommend you install it, especially now that the plugin taps into the Page Speed API. W3 Total Cache now sends your pages to the Page Speed Online API and then offers Page Speed suggestions, right in the WordPress dashboard.
Map nerds unite, this year’s Where 2.0 conference is in full swing and there are already several notable announcements, including a partnership between FourSquare and Bing Maps to create Foursquare Everywhere, and a much improved API from local news site Fwix.
The Bing Foursquare partnership pulls Foursquare data into Bing Maps to visualize check-ins, tips, badges and mayorships. Bing announced the new Foursquare feature earlier this year, but it was not available until today. Even now the rollout of the new features appears to be staggered so if you don’t see it yet, be patient.
The more interesting announcement for developers is the revamped Fwix API which now allows third-party developers to pull in names, locations and web content about places. There’s also an ad layer you can include in your app, pulling in ads from Fwix’s partners (like AT&T and Comcast).
Part of Fwix’s goal is to create an open database of places. To do that the company has partnered with Factual, a large-scale geodata aggregator founded by Gil Elbaz, the man behind Google’s AdSense technology. Factual provides the geodata backend and Fwix builds on that with its aggregated info about each place.
Fwix’s new Places API allows developers to request business listings, cities, and neighborhoods. Combine that with Fwix’s Content API and developers can request reviews, news, check-ins, photos, video, and tweets about any particular place ID in Fwix’s database.
For more information on the Fwix API, head on over to the site and read through the documentation. The Fwix API is free, just sign up for a developer key to get started.
ProgrammableWeb's stat for API protocols and data formats
Once a novel idea that seemed limited to Flickr, the web-based API is now everywhere you turn — Twitter, Foursquare, Google Maps and thousands of other sites offer up their data in the form of an API.
APIs mean that third-party developers can build their own tools and mashups, which in turn helps to fuel the popularity of the web service. It’s hard to imagine where sites like Flickr and Twitter would be today without APIs.
In fact, these days some web services don’t even bother launching websites to go with their APIs — the API is the service. The SimpleGeo API, for example, doesn’t really have a corresponding website, it’s just an API that can be used anywhere, including inside mobile apps.
And APIs aren’t just something for external developers anymore. Increasingly web services are building their own sites and tools around their APIs — after all, why bother with an API if you aren’t going to use it yourself? Twitter is a good example of the “eat your own dog food” approach to APIs; Twitter’s website and its mobile clients are both developed off the same Twitter API that outside developers can tap into.
Former Webmonkey writer Adam DuVander, now Executive Editor at ProgrammableWeb, recently announced that ProgrammableWeb, an API tracking site, now lists some 3000 web-based APIs. To go along with that milestone DuVander breaks down some of the trends in today’s APIs.
It will come as no surprise to those actively developing or using APIs, but the overwhelming trend in APIs is moving toward serving JSON data over a REST interface. As DuVander notes in his post, how many “REST APIs” are truly RESTful is debatable, but certainly SOAP is on its way out and HTTP coupled with OAuth is the future.
When it comes to the data APIs serve up, XML is still the most used format, but JSON is hot on its heels and growing much faster. Even though there are still more XML APIs, the more recent the API, the more likely it’s serving JSON. In many cases — like Twitter’s streaming API and Foursquare’s updated API — companies are rapidly moving from XML to JSON.
The biggest thing that sticks out from ProgrammableWeb’s API trends is that the API, once a sort of “hey, that’s cool” option for progressive websites, is now a first class citizen of the web. Perhaps eventually something better than the REST/OAuth/JSON combo will come along, but the the API and the idea behind it — making data available to the entire web — isn’t going anywhere.
The HTML5 Canvas element promises web developers a web-native way to create animations, interactive charts and even full-fledged apps like image editors and complicated games. Canvas may well be the best thing about HTML5. But unfortunately, it can be kind of a pain to work with, especially for those coming from a Flash animation background.
Easel JS is a JavaScript library for working with the HTML5 Canvas element. It was created by developer Grant Skinner and his cohorts at gskinner.com. Skinner is probably best known for his work in Flash, and the Easel Library adds a number of tools that make Canvas a bit more approachable for Flash developers (and everyone else as well).
Canvas’ biggest drawback (compared to Flash or SVG) is that it has no internal concept of display objects. That means you have to manage updates manually (see our earlier posts for some more tips on working with Canvas). The gskinner blog post has some more details on what Easel JS does, but the main points are a core interaction model with a full, hierarchical display list and helper classes to simplify working with Canvas.
Easel JS is currently an alpha release, so proceed with caution. The code is available under the MIT license and full documentation can be found on the docs page. Skinner says that, once Easel reaches the beta stage, the code will be moved to GitHub and opened for outside contributions and improvements.
According to a leaked photo, Yahoo plans to close a number of services, including Yahoo Buzz, MyBlogLog and Delicious, the popular bookmarking site.
Most of the closing services are Yahoo projects that simply never went anywhere, but Delicious, which Yahoo acquired in 2005, was once the king of bookmarks and helped popularize many of the key elements of today’s social web.
Delicious (Del.icio.us in its original incarnation) popularized tags as a more flexible alternative to folders, introduced us to the idea of following other users and helped kick off the “share it with the world” trend that created today’s social websites like Twitter and Facebook.
Under Yahoo’s leadership Delicious ceased to be innovative. Delicious remains a useful service, but it hasn’t really improved on its original features in almost half a decade.
It’s unclear what will happen to Delicious. So far Yahoo hasn’t made any official announcement, nor has the company given any hint of when or how Delicious will head into the sunset, but one thing is for sure: the web will be poorer without it.
Fortunately for Delicious users its impending demise doesn’t mean your bookmarks will disappear forever. It’s actually quite easy to export your bookmarks, and there are dozens of services that can import them and replace Delicious in your workflow.
I’ve been a heavy Delicious user ever since the demise of its competitor Ma.gnolia. I bookmarked sites, scraped the API and stored the bookmarks on my own server (you can find the details of those scripts in our Django tutorial). I also relied on feeds from other people to find news, links and other tidbits for Webmonkey.
The first part of that workflow is easy to replace. I signed up for Pinboard.in, which lacks some of Delicious’ sharing features, but offers a mirror of the Delicious API. I imported my Delicious bookmarks into Pinboard, changed the root url in my scripts and effectively replaced Delicious in less than 10 minutes. If you don’t want to pay for Pinboard, Zootool, StumbleUpon and other services also make fine Delicious replacements.
But Delicious isn’t just a bookmarking service, it’s a fantastic resource for finding links, stories and the latest news about nearly anything that interested you. Its popularity make its reach extensive. You can easily tap into the minds of friends, colleagues and strangers to see what they’re reading on the web. The concept of tags makes it easy to find links related to any topic or combination of topics that interests you.
ReadWriteWeb’s Marshall Kirkpatrick likens the impending death of Delicious to “setting a museum on fire.” Where, asks Kirkpatrick, “are you going to find a reading list of the best collected written works and other multimedia about almost any given topic?”
Put simply: nowhere.
Twitter is a possibility. Delicious even used Twitter for some of its real-time search features. But Twitter isn’t dedicated to links the way Delicious is so you’ll have to put up with a lot more noise to find the same stories. Facebook may fill the gap for people. It’s also possible that Pinboard or another service will grow in the wake of Delicious’ collapse and come to offer a similar depth and breath of links.
Exactly what will happen to all those links currently stored on Delicious remains to be seen. It’s possible Yahoo may sell off Delicious, but in the absence of a statement from Yahoo, many users have already assumed the worst.
Hopefully Yahoo will at least keep the Delicious domain active, even if the service is not. Perhaps the Archive Team — which saved Geocities from death at the hands of Yahoo — can scrape and mirror Delicious.
For those that have only vaguely heard of Delicious and don’t see what the fuss is, just re-read the above replacing the word Delicious with the word Flickr or even Facebook. This is the template I’ll be using five years from now when Facebook meets the same fate.
Like most of the web you’re probably waiting for the other shoe to drop on the much-loved, but seemingly beleaguered, Flickr photo service. 
According to a leaked photo, Yahoo plans to 
Browse Our Tutorials
Cheat Sheets
Color Charts
Cut & Paste Code
