Facebook FB.Connect.showFeedDialog

Posted on by

FB.Connect.showFeedDialog is a very powerful method which pops up a Feed form, without the need of a session, and an iframe pops up letting the user confirm publication of a story.

The required parameters are:

  • template_bundle_id  string
    The id of the feed template you want to use
  • template_data  object
    Data associated with the template (for short and full stories)
  • target_id array
    If you are publishing to other people’s Feeds, this array contains that friend’s user ID. The Feed story template must include the {*target*} token
  • body_general string
    Associated text for short and full stories
  • story_size FeedStorySize
    This parameter has been deprecated. Pass null in its place
  • require_connect RequireConnect
    Either FB.RequireConnect.doNotRequire, FB.RequireConnect.require, or FB.RequireConnect.promptConnect – The action to occur if the user has not authorized this application
  • callback Callback
    Callback to be executed after function is completed

The optional parameters are :

  • user_message_prompt string
    The label (which could be in the form of a question) that appears above the text box on the Feed form
  • user_message object
    A simple JavaScript object containing single property, value, which is set to the content that the user enters into the Feed form. When the Feed form is created, you can pass along this object to populate suggested text in the text box. The user can then edit this text. When the user publishes the Feed form, Facebook sets the value property to whatever text the user typed

Some tutorials about the FB.Connect.showFeedDialog method are shown hereafter :

Development of facebook applications

Posted on by

The Facebook guide Creating a Platform Application shows how to configure the settings and integration points for a Facebook Platform application and how to configure a host server. Demo applications are also available on the Facebook development website. The Anatomy of a Facebook Application is useful to get an idea how to integrate an application into the Facebook experience. If you plan on internationalizing your application, you should use English as the native language, as the Translations tool can translate from English only. Platform guidelines,  terms of service (Statement of Rights and Responsibilities) and Facebook Platform Policy and Escalation Procedures are accessible on the same website. The following guide explains how applications are authorized, the Developers blog runs all major Facebook announcements.

The following url gives access to the personal facebook developer webpage :

The developer API key is linked to the domain name.

Integration of an application in Facebook can take many forms :

  • The Application Directory allows users to find an application
  • The About page tells users about an application
  • The Canvas page is the main page of the application (FBML or an iframe
  • The Facebook profile is the online representation of a user’s real world identity
  • The profile box is usually the place to show the most recently updated information or the most recent actions of the user
  • The Applications menu is where users go to access your applications
  • Bookmarks appear on every user’s home page as well as on the Applications menu
  • Application tabs let users feature full canvas-like pages for applications they enjoy the most
  • The Boxes tab contains application profile boxes
  • The Info tab on the profile allows users to express their interests in a more structured way than before
  • Applications can integrate into the Publisher so users can create or find rich content and post it directly into their own or their friends’ Walls
  • Feed forms are special FBML components that allow applications to publish Feed stories on the behalf of users. Your application can publish directly into the user’s and the user’s friends’ Mini-Feeds
  • Users can set their privacy options from your application’s privacy/settings page
  • Applications can access News Feed and post stories to it
  • Applications can send notifications to a user through email
  • Requests are also sent in the form of notifications and displayed on the right top corner of the homepage
  • Dashboards allow users to manage their own content in an application

Ten succesfully integrations of Facebook Connect into websites are presented by Aziz Haddad (in french).

Redirection of a webpage

Posted on by

To avoid “404 File Not Found” Error!’s after deleting webpages in the context of a website update, it’s often useful to redirect these webpages to a new url. There are at least 2 major different forms of web page redirection : Client-side Redirection & Server-side Redirection.

Stay away from Client-side Redirection. These methods of redirecting a webpage range from using html meta tags, to javascript, and even using flash embedded on a page to redirect. All of these methods are notorious for getting you de-indexed from search engines, or at the very least, you’re page getting automatically penalized from search engines.

The best and safest way to this is the “301 Redirect“. The following tutorials describe the “301 Redirect” method :

There are different ways to set up an “301 Redirect“. Using .htaccess to accomplish the 301 redirect is highly suggested due to it being fairly convenient to manage, rather than setting redirects on each individual page, you can simply add the redirect code to the .htaccess file. An Online .htaccess editor to configure the redirection is offered by Hideyo Ryoken & Masato Mannen.

A php sample code to redirect an individual page permanently to a new location is shown hereafter :

  1. <?
  2. header( “HTTP/1.1 301 Moved Permanently” );
  3. header( “Status: 301 Moved Permanently” );
  4. header( “Location: http://www.new-url.com/” );
  5. exit(0); // This is Optional but suggested, to avoid any accidental output
  6. ?>

If the redirection is only temporary, you should use the “302 redirect” method. A php sample code to redirect an individual page temporary to a new location is shown below :

  1. <?php
  2. header(”Location: http://www.NewTemporaryWebAddress.com”);
  3. exit();
  4. ?>

Web cache

Posted on by

last update : August 16th, 2011
A Web cache sits between one or more Web servers (also known as origin servers) and a client or many clients, and watches requests come by, saving copies of the responses — like HTML pages, images and files (collectively known as representations) — for itself. Then, if there is another request for the same URL, it can use the response that it has, instead of asking the origin server for it again.

Web caches are used to reduce latency and to reduce network traffic. A very useful tutorial about web caches has been published by Mark Nottingham under a creative common licence.

An appreciated tutorial about wordpress caching has been posted by Kyle Robinson Young in Web Development Tutorials.

A cached representation is considered fresh  if it has an expiry time or other age-controlling header set and is still within the fresh period, or if the cache has seen the representation recently, and it was modified relatively long ago. Fresh representations are served directly from the cache, without checking with the origin server.

HTTP headers are sent by the server before the HTML, and are only seen by the browser and by any intermediate caches. Typical HTTP 1.1 response headers might look like this:

HTTP/1.1 200 OK
Date: Fri, 30 Oct 1998 13:19:41 GMT
Server: Apache/1.3.3 (Unix)
Cache-Control: max-age=3600, must-revalidate
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT
ETag: "3e86-410-3596fbbc"
Content-Length: 1040
Content-Type: text/html

The Expires HTTP header is a basic means of controlling caches; it tells all caches how long the associated representation is fresh for. After that time, caches will always check back with the origin server to see if a document is changed. Expires headers are supported by practically every cache. One problem with Expires is that it’s easy to forget that you’ve set some content to expire at a particular time. If you don’t update an Expires time before it passes, each and every request will go back to your Web server, increasing load and latency.

HTTP 1.1 introduced a new class of headers, Cache-Control response headers, to give Web publishers more control over their content, and to address the limitations of Expires. The most important response is max-age=[seconds]. It specifies the maximum amount of time that an representation will be considered fresh. This directive is relative to the time of the request, rather than absolute. [seconds] is the number of seconds from the time of the request you wish the representation to be fresh for.

A tool (REDbot) to check Cache Control and HTTP headers has been made available by Mark Nottingham; a public instance is available at rebdbot.org.

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.