Author Archives: Marco Barnig

Facebook Connect API

Posted on by

Facebook Connect is the next evolution of Facebook Platform which enables developers to integrate the power of Facebook Platform into their site. Facebook Connect was announced on 23 July 2008 at Facebook’s annual conference for developers and made available to users on 4 December 2008.

There are four ways to add social context to a private website : Identity, Friends, Social Distribution and Privacy.

At its core, Facebook Connect is an alternative means of logging into a website. The Facebook Connect Button is best placed near the standard login flow. Once a user is connected, it’s important to provide him with an indicator that they are logged in with Facebook (for example a Facebook profile pic with the Facebook favicon (“f”) in the corner). To avoid unexpected or conflicting states, it’s best to use the auto-login and auto-logout functions. The Facebook Developer Terms of Service states that an application can only store user data from Facebook for up to 24 hours to make sure that if a user changes their data, it is refreshed across the web. To obey this rule, one way is to do an API call to Facebook for data on every page load, another way is to use XFBML, a markup language that pushes data access to the client layer.

Whenever a user creates content on a website, the API allows to publish that back to Facebook. Publication actions include forum or blog posts, calendar items, photos or albums, events and wiki articles. A tutorial to create a blog that allows user comments, a trying-out and a demonstration (The Run Around) with Facebook Connect are available on the developer website. An easy way to set up a first Facebook Connect application is the comment-box.

How to add Facebook Connect to your website using Javascript or PHP are two very usefuls tutorials with sample codes and demos to start with a Facebook Connect application.

In 2006, Facebook added News Feeds and Mini-Feeds to their application. News Feed highlights information that includes profile changes, upcoming events, and birthdays, among other updates. News Feed also shows conversations taking place between the walls of a user’s friends. An integral part of the News Feed interface is the Mini-Feed, a news stream on the user’s profile page that shows updates about that user.

One line stories get their point across in a single line and appear only on the Wall on the user’s profile. Short stories are formatted with templates and allow a small amount of text with media – which can be an image, MP3, video, or a SWF file. Short stories appear in the stream in a user’s and the user’s friends’ News Feeds and on the user’s Wall.

The Wall is a space on each user’s profile page that allows friends to post messages for the user to see while displaying the time and date the message was written. One user’s wall is visible to anyone with the ability to see his or her full profile, and different users’ wall posts show up in an individual’s News Feed.

To integrate with the Feed system, you need to create a framework for the stories you want your application to tell. You create this framework through a set of templates that you register with Facebook. You combine templates in bundles, and each bundle contains one template for each story size. A template bundle tells facebook how to display the data that you are sending to a feed. An application can have multiple Template Bundles as well as supports ‘one line stories’, a slightly longer ‘short story’, and a more verbose ‘full story’. Links to referring descriptions are listed herafter :

There are three ways an application can publish to a user’s Feed :

This link shows a feed form example (smiley). Template bundles can be created at the Facebook feed link. The creation of a new Template bundle is not possible (message error that id is not valid) if the developer has no friend.

An xd_receiver.htm file is necessary for cross-domain, the included XdCommReceiver.debug.js library corrects some errors existing in teh XdCommReceiver.js library. I experienced a weird [“null” is null or not an object] Javascript error when using Facebook Connect applications with IE (versions 6, 7 and 8 ) which has also been reported by other developers (Anuragsharma). Ajennings proposes a workaround solution described in the Facebook Connect Forum. His test application is available at the shoptivate website.

On March 11, 2009, Facebook released a new home page for users.

Facebook Open Stream API

Posted on by

last update : 29 august 2010

On april 27th, 2009, Facebook announced a new Open Stream API that will allow developers access the home page and profile streams. Facebook has always been known as a walled garden of social data (bringing lots of information in but rarely letting information out). Until now, the only data you could access was the status updates of the user, and a few other things.

The stream is the flow of information on Facebook, which manifests itself on a user’s home page as the News Feed and on the user’s profile as the Wall. It represents the content a user shares with friends in a real-time setting. Initially the stream content appeared only on Facebook, and now with the Open Stream API, developers can connect to their users’ streams and let their users read their streams wherever they want. This means that for the first time, you can build new user interfaces for the stream everywhere including Web, mobile, and desktop applications.

The stream API allows for reading and creating content. Thus, your applications can get users’ stories, comments, and likes, and incorporate this data into your user experience. More informations are available in the release notes.

Google Maps API, Mapplets and KLM

Posted on by

Google offers an API to embed Google maps into personal websites. A Google Maps key is needed to access the API, to apply for the key you need to have a Google account and to agree to the terms and conditions of Google Maps API. The key can be generated online on the Google signup webpage.

Google maps are integrated in a website with Javascript. Embedding static maps without Javascript by using image tags is also possible.

The Google API accepts certain parameters. Some are required while others are optional. The parameter list is given below:

  • center of the map : This parameter takes a comma-separated {latitude, longitude} pair
  • zoom : Maps on Google Maps have an integer “zoom level” which defines the resolution of the current view. Zoom levels between 0 (the lowest zoom level, in which the entire world can be seen on one map) to 19 (the highest zoom level, down to individual buildings) are possible within the normal maps view.
  • size : width and height of the map in pixels; 640×640 is the largest image size allowed
  • format : gif, png or jpg for images
  • maptype : satellite, terrain, hybrid, and mobile (default = roadmap)
  • markers : one or more markers to attach to the image at specified locations. This parameter takes a string of marker definitions separated by the pipe character (|)
  • path : a single path of two or more connected points to overlay on the image at specified locations. This parameter takes a string of point definitions separated by the pipe character (|)
  • span : a minimum viewport for the map image expressed as a latitude and longitude pair
  • frame : specifies that the resulting image should be framed with a colored blue border
  • hl : the language to use for display of labels on map tiles
  • key : the Maps API key for the domain on which this URL request takes place
  • sensor : specifies whether the application requesting the static map is using a sensor to determine the user’s location

The process of turning an address into a geographic point is known as geocoding. Goggle provides a GClientGeocoder object to convert a string address into a latitudes and longitudes.

A marker descriptor contains a string defining the location to place the marker and the visual attributes to use when displaying the marker. These strings contain the following variable values:

  • {latitude} (required) specifies a latitudinal value with precision to 6 decimal places
  • {longitude} (required) specifies a longitudinal value with precision to 6 decimal places
  • {size} (optional) specifies the size of marker from the set {tiny, mid, small}
  • {color} (optional) specifies a color from the set {black, brown, green, purple, yellow, blue, gray, orange, red, white}
  • {alphanumeric-character} (optional) specifies a single lowercase alphanumeric character from the set {a-z, 0-9}. Note that default and mid sized markers are the only markers capable of displaying an alphanumeric-character parameter. tiny and small markers are not capable of displaying an alphanumeric-character

An online tool to create map-markers is available on the donkeymagic website.

The Google geo-developer website prodides documentation, tutorials, code samples, demos, guides and more ressources. A blog for Google geo-developers provides tips and tricks and announcements of new features concerning Google maps. Personal Geo Content can be submitted to Google, guidelines are available on the KLM webpage. KML is a file format used to display geographic data in an Earth browser such as Google Earth, Google Maps, and Google Maps for mobile.

Another useful option are Mapplets, mini-applications that run within Google Maps. You can create Mapplets that add new features or overlay your data on Google Maps.

Mike Williams published a great tutorial about the Google maps API.

eBay API

Posted on by

Today, I registered for an eBay Development account. The eBay Developers Homepage provides support, documentation, code samples, API keys, affiliate programs, forum, sandbox, tools, release notes and system announcements.

A sandbox key and a production key can be generated on the personal account page. There are different API’s available : shopping, merchandising, feedback, trading, client alerts, large merchant services, platform notification, research. The developer center is segmented in Windows, Java, php, Javascript, Flash and other. The eBay community codebase contains several open-source projects.

I started using the shopping API (view guide) which is optimized for response size, speed and usability. This API allows to search for eBay items, products and reviews, user info, and popular items and searches. You are able to retrieve public eBay data in a buyer-friendly view, for easy consumption by buyer-focused applications. The call reference (version 613) of the eBay shopping API is available on the following link. The call “FindItemsAdvanced” is the most useful and enables you to search for items on eBay based on many possible input fields and filters. Detailed informations are available here.

Google Analytics API launched

Posted on by

On april 21th, Google announced that the Google Analytics Data Export API beta is now publicly available to all Analytics users. The API will allow developers to extend Google Analytics in new and creative ways that benefit developers, organizations and end users.

A list of featured examples from Google customers is available at the Google developer website. All the documentation needed to use the API is found on the same website.

FeedBurner

Posted on by

FeedBurner is a Chicago-based company that provides media distribution and audience engagement services for blogs and RSS feeds. Its Web-based tools, including an extensive feed and blog advertising network, help publishers promote, deliver, and monetize their content on the Web and make feed-based content more accessible and manageable for its end users. In 2007, FeedBurner was acquired by Google.

A FeedBurner Blog is available at the Google website. FeedBurner Stats is Google’s analytics offering for blogs, websites and feeds of all kinds. The service is free with every FeedBurner feed and provides publishers with a comprehensive view of their audience.

The FeedBurner Stats service for feeds provides the following feed-related information:

  • Subscription data (e.g. number of subscribers by day, previous week, last 30 days and all time) and Reach data (the estimated number of individuals clicking or viewing your feed content in a given day)
  • Breakdown of feed readers and aggregators, email services, web browsers and bots by which subscribers are accessing your content
  • Clickthrough tracking
  • Uncommon uses — sites where your content has been resyndicated including other blogs, directories and even spam sites
  • Item enclosure downloads (podcasts)
  • Live hits, conveniently translated to your local time zone

For even more insight, you can activate the following PRO features for no charge:

  • Reach
  • Item views

Today I activated FeedBurner for my Blog.

(http://feeds2.feedburner.com/InteractiveRichMedia)

RSS feeds about contemporary arts

Posted on by

I assembled the following list of handselected rss-feeds about contemporary art :

Luxembourg News :

Integrate rss feeds in a webpage

Posted on by

Last update : December 28, 2011
To integrate rss (Really Simple Syndication) feeds in a webpage, different technical solutions are available.

XSL Transformations

rss feeds are xml documents. To transform xml documents into another format like XHTML or HTML, XSL Transformations (XSLT) are used. XSL stands for Extensible Stylesheet Language. I tried this technique in 2006 with the artpet.lu website and I run into several problems with browser incompatibilities needing browser specific code selectors in the related javascript file.

Javascript widgets

A second possibility is to use a Javascript widget displaying the parsed rss data provided by a third party rss to HTML service.

The following list shows a few rss to javascript providers :

Flash Widgets

Some rss  to HTML providers offer Flash widgets to display the parsed rss data.

PHP

PHP coupled up with HTML is the favored method for showing RSS feeds on a website when it comes to search engine optimization.

Among the php scripts, Magpie RSS, published by Kellan Elliot-Mcrea under a GPL licence, is widely considered to be the most robust option, with SimplePie coming as a second best with the less restrictive BSD license and a few additional features. SimplePie is a fast and easy to use PHP library for parsing RSS and Atom, written by Ryan Parman and Geoffrey Sneddon. There are a number of alternative RSS-Libraries for PHP, including lastRSS.php, PEAR::XML_Feed_Parser, PEAR::XML_RSS, rss2array and PHP RSS News Parser.

I installed SimplePie on my hosted webserver a few years ago. The provided testscript to ensure that the basic requirements have been addressed by the server and that you have everything you need to run SimplePie properly is very helpful.

simplepie

simplepie

I use the php technique at the www.lesliesartgallery.eu website.

Late 2011, I prefer the Google Feed API solution to quickly integrate feeds on my websites.

Google Website Optimizer

Posted on by

Google recently launched the Website Optimizer, a tool that can help you improve the effectiveness of your website by allowing you to test different versions of your site content to determine what will best attract users.

Website Optimizer uses two types of testing: A/B testing and multivariate testing.

An A/B experiment allows you to test the performance of two (or more!) entirely different versions of a page. You can change the content of a page, alter the look and feel, or move around the layout of your alternate pages; there’s plenty of design freedom with A/B testing.

Multivariate tests, on the other hand, allow you to test multiple variables — in this case, sections of a page — simultaneously. For example, you could identify the headline, image, and promo text as parts of your page you’d like to improve, and try out three different versions of each one.

A/B experiments are the simpler version of testing with Website Optimizer. Experiments can run on many webpages of a website.

Website Optimizer needs a Google Analytics Account, because it uses the same powerful tracking technology that is used in Google Analytics to collect experiment data. The performance of experiment pages won’t be impacted, with the possible exception of the very first page-load after you have added the tracking code.

A quick start guide is available at the Google site. Different test strategies are possible (time on page,  conversions, clicking rates, landing pages, …).

Website Optimizer scripts will fail W3C validation because they meet browser requirements which do not strictly adhere to the W3C guidelines. There is no workaround available for these errors.