July 2010 Archives

One phenomenon I have been noticing recently is beautifully-decorated 'designer' cupcakes in the shops and specialty cupcake shops around London. Cupcakes seem to be in fashion at the moment. The designs can be anything from very pretty to very cute to promotional. There are cookbooks dedicated to the art of creating beautiful (and tasty) cupcakes. 

I've recently been given the task of implementing the Facebook 'Like' button to the business listings on a suite of websites using the XFBML method instead of the iFrame. The methods are described on Facebook's developer site as well as in many tutorials. While testing the feature, it was discovered that it not display in Internet Explorer. After some research, I discovered that this is due to Facebook using their own mark-up, and the namespace must be defined for rending in Internet Explorer. The following needs to be added into the HTML tag: xmlns:fb="http://www.facebook.com/2008/fbml". (If you are using Facebook OpenGraph, you will need to add the namespace for this too.)

However, for the work that I am doing, I do not have access to change the HTML tags, and the Facebook 'Like' button was not working in the expected manner. The button would not display randomly when the page and cache was refreshed, despite the page containing the correct source code. I believe that what is happening is that the page loads and the Javascript is in the middle of loading while the <fb:like> tag is executed. (This problem only occurs in Internet Explorer.) For a workaround, I encased the <fb:like> tag to print in the Javascript tags. Sure, it is messy, but it solves the problem.  

Unless the HTML tag cannot be edited, I completely recommend using the correct Facebook namespace instead.

<div id="fb-root"></div>

<script>

  window.fbAsyncInit = function() {

    FB.init({ 

    appId: '123456789',

    status: true, 

    cookie: true, 

    xfbml: true});

  };

  (function() {

    var e = document.createElement('script');

    e.async = true;

    e.src = document.location.protocol + '//connect.facebook.net/sv_SE/all.js';

    document.getElementById('fb-root').appendChild(e);

  }());

</script>

<script>

//<![CDATA[

<fb:like href="http://MYURL" layout="standard" show_faces="true" width="400" action="like" font="segoe ui" colorscheme="light" />

//]]>

</script>

According to the Facebook website(1), there are more than 400 million active users, and the average user has 130 friends. This is a large user base for connecting and marketing. 

Back in 2004 when I was working on my Master's degree, I stumbled across a book that I was reading to help me think of ideas for my dissertation. (I knew I wanted to look at web services, particularly with mobile applications and GPS, but that was a little unreachable for me.) Unfortunately, I cannot remember the title or author of the book now, but the book made some predictions about technology. It stated that social networking would be one of the driving areas; consumers would be able to find like-minded people to share and introduce each other to new music/media/books. It also stated mobile applications linked with GPS and gave examples of applications currently used in Japan, such as 'mobile dating' (ability to see which members of dating websites are in your area and to contact them to meet up). The prediction is certainly correct in that the web has become more social. 

For the purpose of this discussion, I have focused on the 'Like' button that Facebook have implemented. (This is mainly because I have been asked to include this feature on a suite of websites.) The 'Like' button works very much as a traditional 'word of mouth' concept. Users click on a button labelled 'Like', and the address and title of the website is added to their profile page. All of their friends can see the web address and title, along with the user's stamp of approval. Of course, with the 'Like' feature readily available and users being bombarded with so much data, there is always the possibility that a user's stamp of approval will go unnoticed.

Implementation of the 'Like' button is easy. It can be displayed in an iFrame or by using Facebook's mark-up language (XFBML), which will allow customisations and give more control. It can then be integrated into Facebook's OpenGraph, which essentially represents the content as a searchable Facebook page and allows others to link to it. When the 'Like' button is created, there are several options that can be customised: 

The text can read 'Recommend' instead of 'Like'.

The layout style can display the number of times the button has been clicked in two formats.

There is an option to show the faces of those who clicked the button.

The width, font, and colour scheme (depending on the page's background colour) can be changed.

In addition, the features of the 'Like' button include the following:

Different languages: 

The Facebook 'Like' button is available in other languages. This can be changed by changing the Javascript URL. For example, the English version is located at http://connect.facebook.net/en_US/all.js. To change to another language, simply change the language code (en_US) to another language code. Other supported languages can be found here: http://wiki.developers.facebook.com/index.php/Facebook_Locales

Asynchronous Loading:

Using this method will allow the scripts to load at the same time as the remainder of the code on the page. This should speed up the insertion of the button into the page. The fbAsyncInit function is available to achieve this. 

SSL:

If you are using SSL (Secure Socket Layers) for securely serving content, you can connect to the Facebook Javascript using the HTTPS protocol. (For example: https://connect.facebook.net/en_US/all.js).

For more information about the Facebook 'Like' button and other features, visit the Facebook Developer's network at http://developers.facebook.com/docs/.

(1) Facebook Press Room. [July 8, 2010]. http://www.facebook.com/press/info.php?statistics