tutorial

/ Don

Twitter Cards

[d]online - Twitter Card Example

[d]online - Twitter Card Example

If you’re an avid user of Twitter, you’ve probably noticed the new links that show up on the bottom of certain tweets in your feed. The links say “View Summary” and allow you to read the title and excerpt of an article, along with a thumbnail of the article’s featured image. Those links are called Twitter Cards, come in three different varieties: summaries, photos, and play, and have two different layouts:  web and mobile.

Twitter Cards help increase your visibility and ensourage users to click to your site by providing more information beyond Twitter’s 140 character limit. Furthermore, design and development studios with Twitter Card functionality built into their site can provide a working example for clients to see how the same functionality can be implemented into their sites.

As with most of Twitter’s APIs, Twitter cards are fairly quick to implement. All you need to do is insert some metadata, test, and apply to participate. To make things even easier, Niall Kennedy has created a WordPress plug-in to automatically scrape your post’s title, permalink, description and image URL for summary Twitter cards. After installing and activating the plug-in, preview your Twitter card by pasting the post’s URL into their preview page.Lastly, you’ll need to apply to participate. Simply enter your site and contact information here and Twitter will reply within 5-10 business days.

/ Don

Window Focus and Blur

In working on the new Pantone Moods this week, I needed to add a listener to the widget to halt the realtime updates if a user no longer had the page active (meaning, they switched to another browser tab or application) to prevent unnecessary traffic to the server.

The application cycles through the ten most recent Moods posts and, upon nearing the end of its cache, queried the server for a new supply. However, if someone’s focus wasn’t on the page, it makes no sense to keep collecting and displaying results.

With ActionScript 3, this task is quite easy:

stage.addEventListener(Event.DEACTIVATE, onDeactivate);
stage.addEventListener(Event.ACTIVATE, onActivate);

And it’s just as easy when programming for Mobile Applications:

NativeApplication.nativeApplication.addEventListener(Event.ACTIVATE, onActivate);
NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE, onDeactivate);

With JQuery, we can now accomplish the same thing for AJAX/PHP browser applications to no longer commit resources to updating a page that isn’t being viewed:

$(function(){
	$(window).bind('blur', function(){
		onDeactivate();
	});
 
	$(window).bind('focus', function(){
		onActivate();
	});
	// IE EVENTS
	$(document).bind('focusout', function(){
		onDeactivate();
	});
	$(document).bind('focusin', function(){
		onActivate();
	});
});

Note that the second two methods must be added because Internet Explorer uses focusin/focusout rather than simply focus/blur.

/ Don

What is Google Chrome OS?

Telling the story of Google Chrome and how it inspired an operating system. Produced by Epipheo Studios.

BTW, I have Google Wave Preview and about a 1/2 dozen colleagues on it, yet, I still haven’t manage to catch someone online to play around with it. Will you add me so I can test with you?

/ Don

Facebook announces Fanboxes

fanboxFacebook and site developers/promoters as well as those keen on social networking for their business/band were excited to learn of the launch of “fanboxes” to drive traffic directly to their Facebook professional service page. Now, people wishing to take advantage of their social network and drive traffic to become their fans have a much simpler/easier process for doing this. In the past, you had to say “Log-in to Facebook, search for [company name], and from the results look for the one that has our logo and says ‘professional service’ below it.” Next Monday, Facebook will remove the restrictions on adding usernames to Pages. But Wednesday, they’ve announced the Fanbox:

Over 8 million users become fans of Facebook Pages every day to connect with their favorite public figures and organizations and get updates directly in their streams. Now, users can connect with brands, musicians, celebrities, businesses, and more, whether they’re on or off Facebook.

Today, we’re excited to launch the Fan Box, a Facebook Connect-enabled social widget that Page owners can add to their websites to allow users to fan and view the accompanying Facebook Page stream. With the Fan Box, brands can bring content from their Facebook Page into their website and help convert website visitors into Facebook fans. Users can view the most recent posts from the Page, see a list of other fans (including their friends), and, most importantly, become a fan without leaving the site. Additionally, if a user visits the site and isn’t logged in to Facebook, the user can log in and become a fan directly inline as well.

I’ve been tinkering with the idea of putting together a tutorial to teach [d]online readers how to implement a Fanbox into their site. If this is something you might be interested in reading, please drop a few comments and I’d be happy to oblige. If there isn’t much interest, I’ll go to Coney Island instead. Ta!